* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; background: #000; color: #eee;
  font-family: 'Malgun Gothic', 'Segoe UI', sans-serif;
  overflow: hidden; width: 100%; height: 100%;
}
/* 게임 화면은 늘 960x540으로 짜고, display.js가 창 크기에 맞춰 transform으로 통째로 키워 가운데 놓는다. */
#game-root {
  position: absolute; left: 0; top: 0; width: 960px; height: 540px;
  transform-origin: 0 0;
  outline: 2px solid #333;
}
.set-row select { background: #1c1c2b; color: #eee; border: 1px solid #555; border-radius: 3px; font-size: 12px; padding: 2px 4px; }
.set-row button { font-size: 11px; padding: 3px 10px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
#game-canvas { display: block; background: #1b2838; cursor: crosshair; }

/* ---------- 상단 바 ---------- */
#top-bar {
  position: absolute; top: 0; left: 0; right: 0; height: 56px;
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 6px 10px; pointer-events: none;
}
#menu-icons, #target-bar, #minimap-wrap { pointer-events: auto; }
/* 창 여는 버튼들은 MENU 하나로 접어둔다(화면 위에 아이콘이 늘어서면 시야를 가린다). */
#menu-icons { position: relative; }
#menu-icons button {
  height: 30px; font-size: 14px;
  display: flex; align-items: center; justify-content: center; padding: 0;
  background: rgba(20,20,30,0.85); border: 1px solid #555; border-radius: 4px; color: #fff; cursor: pointer;
}
#menu-icons button:hover { background: rgba(60,60,80,0.9); }
#menu-btn { width: auto; padding: 0 12px; font-size: 12px; font-weight: bold; letter-spacing: 1px; }
#menu-dropdown {
  position: absolute; top: 34px; left: 0; width: 196px; z-index: 30;
  display: flex; flex-direction: column; gap: 2px; padding: 4px;
  background: rgba(15,15,22,0.96); border: 1px solid #555; border-radius: 4px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
#menu-dropdown.hidden { display: none; }
#menu-dropdown button {
  width: 100%; height: 26px; justify-content: flex-start; gap: 6px;
  font-size: 11px; padding: 0 6px; border-color: transparent; background: transparent;
}
#menu-dropdown button:hover { background: rgba(80,80,110,0.9); }
#menu-dropdown .mi-icon { width: 16px; text-align: center; font-size: 13px; }
#menu-dropdown .mi-key { margin-left: auto; opacity: 0.5; font-size: 10px; }
#target-bar { text-align: center; min-width: 220px; }
#target-bar.hidden { visibility: hidden; }
#target-name { font-size: 13px; margin-bottom: 2px; text-shadow: 1px 1px 2px #000; }
#minimap-wrap {
  width: 120px; height: 120px; border-radius: 50%;
  border: 2px solid #555; overflow: hidden; background: rgba(0,0,0,0.4);
}

/* ---------- 바(체력/마나) ---------- */
.bar-bg { position: relative; width: 100%; height: 12px; background: rgba(0,0,0,0.6); border: 1px solid #444; border-radius: 2px; }
.bar-bg.small { height: 8px; }
.bar-fill { position: absolute; left: 0; top: 0; height: 100%; border-radius: 1px; transition: width 0.15s linear; }
.bar-fill.hp { background: linear-gradient(#e74c3c, #a93226); }
.bar-fill.mp { background: linear-gradient(#3498db, #21618c); }
.bar-fill.xp { background: linear-gradient(#f1c40f, #b7950b); }
.bar-text { position: absolute; inset: 0; font-size: 9px; line-height: 12px; text-align: center; text-shadow: 1px 1px 1px #000; }
.bar-bg.xp-bg { height: 6px; }
.bar-bg.sxp-bg { height: 11px; }
.bar-bg.sxp-bg .bar-text { line-height: 11px; font-size: 8px; }

/* ---------- 보스 체력바 ---------- */
#boss-bar {
  position: absolute; top: 84px; left: 50%; transform: translateX(-50%);
  width: 460px; text-align: center; pointer-events: none; z-index: 4;
}
#boss-bar.hidden { display: none; }
#boss-name { font-size: 13px; font-weight: bold; color: #ff8a7a; text-shadow: 1px 1px 3px #000; margin-bottom: 3px; }
#boss-bar .bar-bg { height: 16px; border-color: #7b241c; }
#boss-bar .bar-text { line-height: 16px; font-size: 10px; }
/* ---------- 상태이상 ---------- */
.status-row { display: flex; justify-content: center; gap: 3px; min-height: 0; pointer-events: auto; }
.status-icon { image-rendering: pixelated; vertical-align: middle; }
.status-chip { position: relative; display: inline-flex; align-items: center; background: rgba(0,0,0,0.6); border-radius: 2px; padding: 1px 2px 1px 1px; font-size: 9px; line-height: 1; color: #eee; }
.status-chip b { position: absolute; left: 9px; top: 7px; font-size: 8px; color: #fff; text-shadow: 1px 1px 0 #000; }
.status-chip i { font-style: normal; margin-left: 1px; opacity: 0.85; }
#target-status, #boss-status { margin-top: 2px; }
.party-slot .portrait { position: relative; }
.skill-status { font-size: 10px; margin-top: 2px; display: flex; flex-wrap: wrap; gap: 6px; }
.skill-status span { display: inline-flex; align-items: center; gap: 2px; }
#boss-warn { font-size: 12px; font-weight: bold; color: #f1c40f; text-shadow: 1px 1px 3px #000; height: 16px; margin-top: 2px; }

/* ---------- 파티 시너지 ---------- */
.syn-row { display: flex; flex-direction: column; gap: 2px; padding: 5px 7px; background: rgba(46,204,113,0.10); border-left: 2px solid #2ecc71; border-radius: 3px; margin-bottom: 4px; }
.syn-row b { color: #58d68d; font-size: 11px; }
.syn-row span { font-size: 10px; color: #aaa; }

/* ---------- 하단 바 ---------- */
#bottom-bar {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 45;
  display: flex; align-items: flex-end; gap: 8px; padding: 6px 8px;
  background: linear-gradient(to top, rgba(10,10,15,0.92), rgba(10,10,15,0.4));
}
#gold-display { font-size: 13px; padding: 4px 8px; background: rgba(0,0,0,0.5); border-radius: 4px; height: fit-content; }
#party-slots { display: flex; gap: 6px; flex: 1; }
.party-slot {
  display: flex; gap: 6px; background: rgba(20,20,30,0.85); border: 1px solid #555; border-radius: 4px; padding: 4px; flex: 1;
}
.party-slot.active-slot { border-color: #f1c40f; box-shadow: 0 0 6px #f1c40f; }
.portrait {
  width: 40px; height: 40px; border-radius: 4px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; color: #fff;
  border: 1px solid rgba(255,255,255,0.3);
}
.slot-info { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 120px; }
.name-lv { font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 버프·디버프 줄. 남은 시간을 초 단위로 붙여 준다. */
.slot-effects { display: flex; flex-wrap: wrap; gap: 3px; min-height: 12px; }
.eff-chip {
  display: inline-flex; align-items: center; gap: 1px; padding: 0 3px; border-radius: 2px;
  font-size: 9px; line-height: 12px; background: rgba(0,0,0,0.55); position: relative;
}
.eff-chip.buff { color: #f7dc6f; border: 1px solid rgba(247,220,111,0.45); }
.eff-chip.debuff { color: #ec7063; border: 1px solid rgba(236,112,99,0.45); }
.eff-chip i { font-style: normal; opacity: 0.85; margin-left: 3px; }
.eff-chip b { font-size: 8px; color: #fff; }
/* 자동전투 버튼(정지/킵/홀드)과 스킬 줄을 오른쪽에 위아래로 쌓는다.
   예전처럼 옆에 세로로 세워 두면 그 폭만큼 HP/MP/경험치 바가 좁아졌다. */
.slot-right { display: flex; flex-direction: column; gap: 3px; justify-content: center; flex-shrink: 0; }

/* 스킬 3개 + 전용기(R) 1개가 한 줄에 들어가야 한다. */
.hotbar { display: grid; grid-template-columns: repeat(4, 22px); grid-template-rows: 22px; gap: 2px; align-content: center; }
.hotbar .skill-btn {
  width: 22px; height: 22px; font-size: 9px; background: rgba(0,0,0,0.55); border: 1px solid #666; border-radius: 3px;
  color: #fff; display: flex; align-items: center; justify-content: center; position: relative; padding: 0;
}
.hotbar .skill-btn .key-label { position: absolute; top: 0; left: 1px; font-size: 7px; color: #aaa; z-index: 2; }
.hotbar .skill-btn { overflow: hidden; }
.hotbar .skill-btn .cd-mask {
  position: absolute; left: 0; bottom: 0; width: 100%; height: 0;
  background: rgba(0,0,0,0.72); pointer-events: none; transition: height 0.08s linear;
}
.hotbar .skill-btn .cd-text {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: bold; color: #fff; text-shadow: 1px 1px 2px #000; z-index: 3; pointer-events: none;
}
.hotbar .skill-btn.no-mp { border-color: #5dade2; box-shadow: inset 0 0 0 1px rgba(93,173,226,0.5); }
.hotbar .skill-btn.no-mp::after {
  content: 'MP'; position: absolute; bottom: 0; right: 1px; font-size: 6px; color: #5dade2; z-index: 3;
}
.party-slot.downed { opacity: 0.55; border-color: #7b241c; }
.party-slot.downed .portrait { filter: grayscale(1); }
.inv-row button { font-size: 10px; padding: 2px 8px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
.hotbar .skill-btn.empty { opacity: 0.25; }

/* ---------- 채팅 창 ---------- */
#chat-window {
  position: absolute; left: 6px; bottom: 78px; width: 300px; height: 150px;
  background: rgba(10,10,15,0.75); border: 1px solid #444; border-radius: 4px;
  display: flex; flex-direction: column; font-size: 11px; z-index: 5;
}
#chat-drag-handle {
  cursor: move; background: rgba(255,255,255,0.08); font-size: 10px; padding: 3px 6px;
  border-bottom: 1px solid #444; user-select: none; border-radius: 4px 4px 0 0;
  display: flex; justify-content: space-between; align-items: center;
}
.chat-btns button {
  background: transparent; border: none; color: #bbb; cursor: pointer; font-size: 11px; padding: 0 4px;
}
.chat-btns button:hover { color: #fff; }
#chat-window.minimized { height: auto; }
#chat-window.minimized #chat-tabs, #chat-window.minimized #chat-log { display: none; }
#chat-window.hidden-chat { display: none; }
#chat-tabs { display: flex; flex-wrap: wrap; border-bottom: 1px solid #444; }
#chat-tabs button { flex: 1; min-width: 34px; background: transparent; border: none; color: #ccc; font-size: 9px; padding: 3px 0; cursor: pointer; }
#chat-tabs button.active { background: rgba(255,255,255,0.15); color: #fff; }
#chat-log { flex: 1; overflow-y: auto; padding: 4px 6px; }
#chat-log .line { margin-bottom: 2px; opacity: 0.9; }
#chat-log .line.tag-system { color: #f1c40f; }

/* ---------- 힌트 바 ---------- */
#hint-bar {
  position: absolute; top: 60px; left: 50%; transform: translateX(-50%);
  font-size: 10px; color: #aaa; background: rgba(0,0,0,0.4); padding: 2px 8px; border-radius: 3px;
  white-space: nowrap; pointer-events: none;
}

/* ---------- 공용 창 ---------- */
.game-window {
  /* 위치는 ui.js의 창 매니저가 잡는다. 전부 가운데로 겹쳐 뜨지 않도록. */
  position: absolute; top: 62px; left: 10px;
  width: 420px; max-height: 390px; background: #15151f; border: 1px solid #555; border-radius: 6px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.6); display: flex; flex-direction: column; z-index: 10;
}
.game-window.hidden { display: none; }
.window-title-bar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 6px 10px; background: #23233a; border-bottom: 1px solid #444; font-size: 13px; border-radius: 6px 6px 0 0;
}
.close-btn { background: transparent; border: none; color: #ccc; cursor: pointer; font-size: 14px; }
.window-tabs { display: flex; border-bottom: 1px solid #444; }
.tab-btn { flex: 1; padding: 6px; background: #1c1c2b; border: none; color: #ccc; cursor: pointer; font-size: 12px; }
.tab-btn.active { background: #2c2c44; color: #fff; }
.tab-panel { padding: 10px; overflow-y: auto; font-size: 12px; }
.tab-panel.hidden { display: none; }

.stat-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px 10px; margin-bottom: 10px; }
.stat-grid .row { display: flex; justify-content: space-between; background: rgba(255,255,255,0.05); padding: 2px 6px; border-radius: 3px; }
.section-title { font-size: 12px; color: #f1c40f; margin: 8px 0 4px; }
.equip-slots { display: grid; grid-template-columns: repeat(4, 44px); gap: 6px; margin-top: 6px; }
.equip-slot { width: 44px; height: 44px; background: rgba(255,255,255,0.06); border: 1px dashed #555; border-radius: 4px; }

.stance-list { display: flex; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; }
.stance-chip { padding: 4px 10px; border-radius: 12px; background: rgba(255,255,255,0.08); border: 1px solid #555; cursor: pointer; font-size: 11px; }
.stance-chip.current { background: #f1c40f; color: #222; border-color: #f1c40f; }
.stance-chip.locked { opacity: 0.4; cursor: default; }

.equip-list { margin-bottom: 6px; }
.equip-row { display: flex; align-items: center; gap: 8px; padding: 4px 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin-bottom: 3px; font-size: 11px; }
.equip-row .equip-slot-name { width: 52px; color: #f1c40f; }
.equip-row .equip-item { flex: 1; }
.equip-row .equip-stat { font-size: 10px; color: #85c1e9; }
.equip-row button { font-size: 10px; padding: 3px 8px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
.skill-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 5px 6px; background: rgba(255,255,255,0.05); border-radius: 3px; margin-bottom: 4px; }
.skill-row.locked { opacity: 0.45; }
.skill-row .skill-main { flex: 1; }
.skill-row .skill-meta { font-size: 10px; color: #999; margin-top: 2px; }
.skill-row button { font-size: 10px; padding: 4px 10px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
.skill-row button:disabled { opacity: 0.35; cursor: default; }
.tag { font-size: 9px; padding: 1px 5px; border-radius: 8px; }
.tag.single { background: #1e6091; }
.tag.aoe { background: #7d3c30; }
.bar-fill.sxp { background: linear-gradient(#1abc9c, #117a65); }
.hotbar .skill-btn.locked { opacity: 0.5; }
.hotbar .skill-btn .lv-label { position: absolute; bottom: 0; right: 2px; font-size: 7px; color: #f1c40f; }

#inventory-grid { padding: 12px; overflow-y: auto; max-height: 340px; }

#quest-content { padding: 12px; font-size: 12px; line-height: 1.6; overflow-y: auto; }

/* ---------- 상점 ---------- */
#shop-gold { padding: 8px 12px 4px; font-size: 12px; }
#shop-body { padding: 4px 12px 12px; overflow-y: auto; max-height: 300px; font-size: 12px; }
.shop-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #2a2a3a; }
.shop-row .shop-name { flex: 1; }
.shop-row .shop-meta { font-size: 10px; color: #999; margin-top: 2px; }
.shop-row button { font-size: 10px; padding: 4px 10px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
.shop-row button:disabled { opacity: 0.35; cursor: default; }
.craft-filters { display: flex; gap: 6px; align-items: center; padding: 6px 0 8px; }
.craft-filter { font-size: 10px; padding: 3px 10px; background: #1c1c2b; border: 1px solid #555; color: #bbb; border-radius: 12px; cursor: pointer; }
.craft-filter.on { background: #f1c40f; color: #111; border-color: #f1c40f; font-weight: bold; }
.craft-hint { margin-left: auto; font-size: 10px; opacity: 0.6; }
.tier-badge { font-size: 9px; padding: 1px 5px; border-radius: 8px; background: #5b2c6f; }
.enh-btns { display: flex; flex-direction: column; gap: 4px; }
.enh-btns button { white-space: nowrap; }
.inv-list { display: flex; flex-direction: column; gap: 2px; }
.inv-row { display: flex; justify-content: space-between; gap: 10px; background: rgba(255,255,255,0.05); padding: 4px 8px; border-radius: 3px; font-size: 12px; }
.quest-steps { margin: 8px 0 0; padding-left: 18px; font-size: 11px; line-height: 1.7; }

#barracks-party { display: flex; gap: 8px; padding: 10px; border-bottom: 1px solid #333; }
#barracks-party .b-party-member { flex: 1; text-align: center; font-size: 11px; background: rgba(255,255,255,0.06); border-radius: 4px; padding: 6px; }
#barracks-create { padding: 6px 10px; border-bottom: 1px solid #333; }
.bc-row { display: flex; align-items: center; gap: 8px; padding: 3px 2px; font-size: 11px; }
.bc-row .bc-name { flex: 1; }
.bc-row button { font-size: 10px; padding: 3px 8px; background: #3a2020; border: 1px solid #6b3030; color: #e6b0aa; border-radius: 3px; cursor: pointer; }
.bc-form { display: flex; gap: 6px; margin-top: 6px; }
.bc-form select, .bc-form input { flex: 1; background: #16162a; border: 1px solid #555; color: #fff; border-radius: 3px; font-size: 11px; padding: 4px 6px; }
.bc-form button { font-size: 10px; padding: 4px 10px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
.bc-form button:disabled, .bc-form select:disabled, .bc-form input:disabled { opacity: 0.4; cursor: default; }
#barracks-list { padding: 8px 10px; overflow-y: auto; max-height: 200px; }
.barracks-row { display: flex; align-items: center; gap: 8px; padding: 5px; border-bottom: 1px solid #2a2a3a; font-size: 11px; }
.barracks-row .b-name { flex: 1; }
.barracks-row button { font-size: 10px; padding: 3px 6px; cursor: pointer; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; }

#npc-dialogue-text { padding: 12px; font-size: 13px; min-height: 60px; line-height: 1.6; }
#npc-dialogue-actions { padding: 0 12px 12px; text-align: right; }
#npc-dialogue-actions button { padding: 5px 14px; cursor: pointer; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; margin-left: 6px; }
#npc-dialogue-actions button.primary { background: #b7950b; border-color: #f1c40f; color: #111; font-weight: bold; }

/* ---------- 존 라벨 ---------- */
#zone-label {
  pointer-events: none; font-size: 12px; color: #f1c40f; text-shadow: 1px 1px 2px #000;
  background: rgba(0,0,0,0.4); padding: 3px 10px; border-radius: 3px; height: fit-content;
}

/* ---------- 자동전투 모드 버튼 ---------- */
.auto-modes { display: flex; flex-direction: row; gap: 2px; justify-content: stretch; }
.auto-modes button { flex: 1; }
.auto-modes button {
  font-size: 9px; padding: 2px 4px; background: rgba(0,0,0,0.5); border: 1px solid #555;
  color: #bbb; border-radius: 3px; cursor: pointer; width: 30px;
}
.auto-modes button.on { background: #f1c40f; color: #111; border-color: #f1c40f; font-weight: bold; }

/* ---------- 텔레포트 ---------- */
#teleport-list { padding: 8px 10px; overflow-y: auto; max-height: 380px; }
.tp-row { display: flex; align-items: center; gap: 8px; padding: 6px 4px; border-bottom: 1px solid #2a2a3a; font-size: 12px; }
.tp-row .tp-type { width: 46px; text-align: center; border-radius: 3px; font-size: 10px; padding: 2px 0; }
.tp-row .tp-type.town { background: #1e6091; }
.tp-row .tp-type.field { background: #7d3c30; }
.tp-row .tp-name { flex: 1; }
.tp-row .tp-lv { color: #aaa; font-size: 11px; width: 60px; }
.tp-row button { font-size: 10px; padding: 3px 10px; cursor: pointer; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; }
.tp-row.current { background: rgba(241,196,15,0.12); }
.tp-row.current button { opacity: 0.4; cursor: default; }

/* ---------- 캐릭터 생성 화면 ---------- */
#create-screen {
  position: absolute; inset: 0; background: rgba(8,8,14,0.96); z-index: 50;
  display: flex; align-items: center; justify-content: center;
}
#create-screen.hidden { display: none; }
#create-box { width: 760px; text-align: center; }
#create-box h1 { font-size: 22px; margin: 0 0 6px; color: #f1c40f; }
.create-sub { font-size: 12px; color: #aaa; margin: 0 0 16px; }
#class-list { display: flex; gap: 10px; justify-content: center; margin-bottom: 18px; }
.class-card {
  width: 138px; padding: 12px 8px; background: #16162a; border: 2px solid #3a3a55; border-radius: 6px; cursor: pointer;
}
.class-card:hover { border-color: #666; }
.class-card.selected { border-color: #f1c40f; background: #221f10; }
.class-card .class-icon { width: 46px; height: 46px; border-radius: 6px; margin: 0 auto 8px; }
.class-card .class-name { font-size: 14px; margin-bottom: 4px; }
.class-card .class-role { font-size: 10px; color: #f1c40f; margin-bottom: 6px; }
.class-card .class-desc { font-size: 10px; color: #999; line-height: 1.4; min-height: 42px; }
.class-card .class-stats { font-size: 9px; color: #777; margin-top: 6px; }
#create-form { display: flex; gap: 8px; justify-content: center; }
#nickname-input { width: 220px; padding: 8px 10px; background: #16162a; border: 1px solid #555; color: #fff; border-radius: 4px; font-size: 13px; }
#create-btn { padding: 8px 24px; background: #b7950b; border: 1px solid #f1c40f; color: #111; font-weight: bold; border-radius: 4px; cursor: pointer; }
#create-error { color: #e74c3c; font-size: 11px; height: 16px; margin-top: 8px; }
#start-btn { padding: 8px 24px; background: #1e6091; border: 1px solid #5dade2; color: #fff; font-weight: bold; border-radius: 4px; cursor: pointer; }
#start-btn:disabled { opacity: 0.35; cursor: default; }
#created-list { display: flex; gap: 8px; justify-content: center; margin-top: 14px; min-height: 26px; }
.created-chip {
  display: flex; align-items: center; gap: 6px; padding: 4px 8px; font-size: 11px;
  background: #16162a; border: 1px solid #3a3a55; border-radius: 14px;
}
.created-chip .chip-icon { width: 14px; height: 14px; border-radius: 3px; }
.created-chip button { background: transparent; border: none; color: #888; cursor: pointer; font-size: 10px; }
.created-chip button:hover { color: #e74c3c; }

/* ---------- 가문 특성 ---------- */
#family-header { padding: 10px 12px 8px; border-bottom: 1px solid #333; }
.fam-top { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.fam-level { font-size: 14px; color: #f1c40f; font-weight: bold; }
.fam-points { font-size: 11px; margin-left: auto; }
.fam-points b { color: #2ecc71; font-size: 13px; }
#fam-reset { font-size: 10px; padding: 3px 8px; background: #3a2020; border: 1px solid #6b3030; color: #e6b0aa; border-radius: 3px; cursor: pointer; }
.fam-hint { font-size: 10px; color: #888; margin-top: 6px; line-height: 1.5; }
#family-tree { padding: 8px 12px 12px; overflow-y: auto; max-height: 330px; }
.fam-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: rgba(255,255,255,0.05); border-radius: 3px; margin-bottom: 4px; }
.fam-row.locked { opacity: 0.45; }
.fam-main { flex: 1; }
.fam-name { font-size: 12px; }
.fam-name b { color: #f1c40f; }
.fam-eff { font-size: 10px; color: #85c1e9; margin-top: 2px; }
.fam-lock { font-size: 10px; color: #e74c3c; margin-top: 2px; }
.fam-btns { display: flex; gap: 4px; }
.fam-btns button { width: 26px; height: 26px; font-size: 14px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
.fam-btns button:disabled { opacity: 0.3; cursor: default; }

/* ---------- 의뢰 게시판 ---------- */
#board-body { padding: 10px 12px; overflow-y: auto; max-height: 390px; }
.q-hint { font-size: 10px; color: #888; margin-bottom: 8px; line-height: 1.5; }
.q-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; background: rgba(255,255,255,0.05); border-radius: 4px; margin-bottom: 5px; }
.q-row.q-active { border-left: 2px solid #f1c40f; background: rgba(241,196,15,0.08); }
.q-row.locked { opacity: 0.4; }
.q-main { flex: 1; }
.q-title { font-size: 12px; font-weight: bold; }
.q-count { font-size: 9px; color: #2ecc71; margin-left: 6px; font-weight: normal; }
.q-desc { font-size: 10px; color: #999; margin: 2px 0 3px; }
.q-meta { font-size: 10px; color: #85c1e9; }
.q-prog { font-size: 10px; color: #f1c40f; }
.q-done { font-size: 10px; color: #2ecc71; font-weight: bold; }
.q-btns { display: flex; flex-direction: column; gap: 4px; }
.q-btns button { font-size: 10px; padding: 4px 10px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; white-space: nowrap; }
.q-btns button.primary { background: #b7950b; border-color: #f1c40f; color: #111; font-weight: bold; }

/* ---- 무기 세트(장비교체등록) ---- */
.hint-text { font-size: 11px; opacity: 0.65; margin: 0 0 8px; line-height: 1.5; }
.wset-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.wset {
  border: 1px solid #3b4a5a; border-radius: 5px; padding: 6px 8px;
  background: rgba(255, 255, 255, 0.03); cursor: pointer;
}
.wset.editing { border-color: #5dade2; background: rgba(93, 173, 226, 0.08); }
.wset.active { box-shadow: inset 3px 0 0 #f1c40f; }
.wset-head { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; font-size: 12px; }
.wset-head b { min-width: 46px; }
.wset-stance { color: #8ad6ff; flex: 1; }
.wset-atk { opacity: 0.75; font-size: 11px; }
.wset-badge.on { font-size: 10px; color: #f1c40f; border: 1px solid #f1c40f; border-radius: 3px; padding: 1px 5px; }
.wset-slot { display: flex; align-items: center; gap: 6px; font-size: 11px; padding: 2px 0 2px 6px; }
.wset-slot-name { min-width: 54px; opacity: 0.6; }
.wset-item { flex: 1; }
.name-lv .wset-tag {
  margin-left: 5px; font-size: 9px; padding: 0 4px; border-radius: 3px;
  background: rgba(241, 196, 15, 0.18); color: #f1c40f; vertical-align: 1px;
}

/* ---- 전용기 / 고유 특성 ---- */
.skill-btn.sig-btn { border-color: #b9770e; background: rgba(241, 196, 15, 0.14); }
.skill-btn.sig-btn.locked { border-color: #4a4a4a; background: rgba(255, 255, 255, 0.04); }
.syn-row.locked { opacity: 0.55; }

/* ---- 심연의 탑 ---- */
.tower-stat { display: flex; gap: 8px; margin-bottom: 10px; }
.tower-stat > div {
  flex: 1; text-align: center; padding: 7px 4px; border-radius: 5px;
  background: rgba(155, 89, 182, 0.12); border: 1px solid #5b3a6e;
}
.tower-stat span { display: block; font-size: 10px; opacity: 0.65; margin-bottom: 3px; }
.tower-stat b { font-size: 14px; color: #d7a3f0; }
.tower-row { font-size: 12px; margin-bottom: 8px; }
.tower-floors { display: flex; flex-wrap: wrap; gap: 6px; }
.tower-floors button { min-width: 68px; }
#tower-leave-btn { margin-bottom: 6px; }

/* ---- 장비 비교 ---- */
.cmp { font-size: 10px; font-weight: bold; white-space: nowrap; min-width: 62px; text-align: right; }
.cmp.up { color: #2ecc71; }
.cmp.down { color: #e74c3c; }
.cmp.same { color: #7f8c8d; }

/* ---- 퀘스트 목표 트래커 ---- */
#quest-tracker {
  position: absolute; right: 8px; top: 140px; width: 232px; z-index: 4;
  display: flex; flex-direction: column; gap: 3px; pointer-events: none;
}
#quest-tracker .tr-row {
  background: rgba(10, 12, 20, 0.72); border-left: 3px solid #5dade2; border-radius: 3px;
  padding: 4px 6px; font-size: 10.5px; line-height: 1.45; color: #e8eef5;
  text-shadow: 1px 1px 2px #000;
}
#quest-tracker .tr-tag {
  display: inline-block; margin-right: 5px; padding: 0 4px; border-radius: 2px;
  font-size: 9px; font-weight: bold; background: rgba(93, 173, 226, 0.25); color: #8ad6ff;
}

/* ---- 설정 창 ---- */
#settings-window { width: 420px; max-height: 390px; }
#settings-body { overflow-y: auto; padding: 8px 10px 12px; }
.set-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 11px; }
.set-row label { min-width: 72px; opacity: 0.85; }
.set-row input[type="range"] { flex: 1; accent-color: #5dade2; }
.set-row input[type="checkbox"] { accent-color: #5dade2; width: 14px; height: 14px; }
.set-row > span { min-width: 74px; }
.key-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; }
.key-grid .row { display: flex; justify-content: space-between; font-size: 10.5px; padding: 1px 0; }
.key-grid .row span:first-child { color: #8ad6ff; font-weight: bold; }
#set-reset { font-size: 11px; padding: 4px 10px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }

/* 설정 창의 기록/조작표는 항목 이름이 길어 3열 그리드에서는 줄바꿈이 난다. */
#settings-body .stat-grid { grid-template-columns: 1fr 1fr; gap: 3px 8px; }
#settings-body .stat-grid .row { font-size: 11px; padding: 3px 7px; }
#settings-body .stat-grid .row span:last-child { color: #f7dc6f; font-weight: bold; }
#settings-body .key-grid .row { background: rgba(255,255,255,0.04); border-radius: 3px; padding: 2px 6px; }

/* 창은 끌어서 옮길 수 있다. 제목 표시줄이 손잡이. */
.window-title-bar { user-select: none; }
#chat-drag-handle { user-select: none; }
#set-window-reset {
  font-size: 11px; padding: 4px 10px; background: #2c2c44; border: 1px solid #555;
  color: #fff; border-radius: 3px; cursor: pointer;
}

/* ---- 도트 아이템 아이콘 ---- */
.item-icon {
  image-rendering: pixelated; image-rendering: crisp-edges;
  vertical-align: middle; margin-right: 5px; flex: 0 0 auto;
  background: rgba(255, 255, 255, 0.04); border-radius: 3px;
}
.shop-meta .item-icon, .q-meta .item-icon { margin-right: 2px; background: none; }
.inv-row .inv-name { display: flex; align-items: center; flex: 1; }

/* ---- 단계별 스탠스 ---- */
.grade-badge { font-size: 9px; padding: 0 4px; border-radius: 3px; margin-right: 4px; vertical-align: 1px; }
.grade-badge.advanced { background: rgba(93, 173, 226, 0.25); color: #85c1e9; }
.grade-badge.master { background: rgba(245, 176, 65, 0.25); color: #f5b041; }
.stance-chip .lock-why { font-size: 9px; opacity: 0.7; margin-left: 3px; }
.growth-box {
  font-size: 11px; padding: 6px 8px; margin-bottom: 6px; border-radius: 4px;
  background: rgba(46, 204, 113, 0.08); border: 1px solid rgba(46, 204, 113, 0.25); color: #abebc6;
}
.class-upper { font-size: 10px; opacity: 0.65; margin-top: 3px; }

/* ---- 아이템 설명 풍선 ---- */
#item-tip {
  position: absolute; z-index: 60; width: 200px; pointer-events: none;
  background: rgba(12,12,18,0.96); border: 1px solid #666; border-radius: 4px;
  padding: 6px 8px; font-size: 11px; line-height: 1.5; box-shadow: 0 4px 12px rgba(0,0,0,0.6);
}
#item-tip.hidden { display: none; }
#item-tip .tip-name { display: flex; align-items: center; gap: 4px; font-weight: bold; font-size: 12px; margin-bottom: 2px; }
#item-tip .tip-kind { opacity: 0.6; font-size: 10px; margin-bottom: 4px; }
#item-tip .tip-dim { opacity: 0.6; font-size: 10px; }
#item-tip .tip-pot { border-top: 1px solid #444; margin-top: 4px; padding-top: 4px; }

/* ---- 강화 · 잠재능력 ---- */
.enh-picker { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; max-height: 120px; overflow-y: auto; }
.enh-pick {
  position: relative; width: 48px; height: 52px; padding: 2px; border-radius: 4px; cursor: pointer;
  background: rgba(255,255,255,0.04); border: 2px solid #333; color: #fff;
}
.enh-pick.on { background: rgba(93,173,226,0.18); box-shadow: 0 0 0 1px #5dade2 inset; }
.enh-pick .item-icon { margin: 0; background: none; }
.enh-pick-star { position: absolute; top: 1px; right: 2px; font-size: 9px; color: #f7dc6f; text-shadow: 1px 1px 0 #000; }
.enh-pick-where { display: block; font-size: 8px; opacity: 0.6; white-space: nowrap; overflow: hidden; }
.enh-head { display: flex; gap: 8px; align-items: center; }
.enh-stars { font-size: 11px; letter-spacing: -1px; color: #444; }
.enh-stars span.on { color: #f7dc6f; }
.enh-result { font-size: 12px; font-weight: bold; margin: 6px 0; }
.sf-rates { font-size: 11px; margin-bottom: 3px; }
.sf-max { font-size: 11px; color: #f7dc6f; }
.sf-protect { display: block; font-size: 10px; margin: 4px 0; }
.sf-protect.disabled { opacity: 0.4; }
.sf-btns { display: flex; gap: 8px; align-items: center; }
.sf-btns button, .cube-btns button { font-size: 11px; padding: 4px 10px; background: #2c2c44; border: 1px solid #555; color: #fff; border-radius: 3px; cursor: pointer; }
.sf-btns button.primary { background: #b9770e; border-color: #f7dc6f; }
.sf-btns button:disabled, .cube-btns button:disabled { opacity: 0.35; cursor: default; }
.pot-grade { font-size: 10px; border: 1px solid; border-radius: 3px; padding: 0 5px; margin-left: 4px; }
.pot-box { border: 1px solid #333; border-radius: 4px; padding: 5px 8px; margin-bottom: 6px; background: rgba(0,0,0,0.25); }
.pot-line { font-size: 11px; line-height: 1.6; }
.cube-btns { display: flex; flex-wrap: wrap; gap: 4px; }
.cube-btns .item-icon { margin-right: 3px; background: none; }

/* ---- 컬렉션 ---- */
#collection-window { width: 440px; }
#collection-body { overflow-y: auto; padding: 8px 10px 12px; font-size: 12px; }
.ms-row { display: flex; justify-content: space-between; font-size: 11px; padding: 2px 6px; opacity: 0.55; }
.ms-row.done { opacity: 1; color: #abebc6; }
.col-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.col-card { text-align: center; padding: 4px 2px; border-radius: 4px; background: rgba(255,255,255,0.04); border: 1px solid #2c2c3c; }
.col-card.boss { border-color: #922b21; }
.col-card img { image-rendering: pixelated; display: block; margin: 0 auto; }
.col-card.unknown img { filter: brightness(0); opacity: 0.45; }
.col-name { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 2px; }
.col-pips { display: flex; justify-content: center; gap: 2px; margin: 2px 0; }
.col-pips i { width: 6px; height: 6px; border-radius: 50%; background: #333; display: inline-block; }
.col-pips i.on { background: #f7dc6f; }
.col-kills { font-size: 8px; opacity: 0.7; }
.link-row { padding: 4px 6px; border-radius: 3px; margin-bottom: 3px; background: rgba(255,255,255,0.03); opacity: 0.6; }
.link-row.on { opacity: 1; background: rgba(46,204,113,0.07); }
.link-name { font-size: 11px; }
.link-lv { font-size: 10px; color: #f7dc6f; }
.link-eff { font-size: 10px; opacity: 0.85; }

/* 병영 승급 패널 */
.promo-row {
  display: flex; align-items: center; gap: 8px; justify-content: space-between;
  padding: 6px 8px; margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid #2f3b46; border-radius: 4px;
}
.promo-name { font-size: 12px; }
.promo-note { font-size: 11px; opacity: 0.75; margin-top: 2px; }
.promo-mats { font-size: 11px; margin-top: 3px; line-height: 1.6; }
.promo-row button { min-width: 88px; }

/* 텔레포트 목록의 수련장 표시 */
.tp-note { font-size: 10px; opacity: 0.7; margin-left: 4px; }
.tp-type.training { background: #6c5ce7; }

/* 창 안 탭 (병영: 캐릭터 교체 / 승급) */
.win-tabs { display: flex; gap: 4px; margin-bottom: 8px; border-bottom: 1px solid #2f3b46; padding-bottom: 6px; }
.win-tabs button {
  flex: 1; padding: 6px 0; font-size: 12px;
  background: #1b2430; border: 1px solid #2f3b46; color: #aab4be; border-radius: 4px;
}
.win-tabs button.on { background: #2b3a4a; color: #f4f4f4; border-color: #4a6076; font-weight: bold; }

/* 캐릭터 생성 화면에서 파티에 꼭 필요한 클래스 표시 */
.class-must {
  margin-left: 4px;
  padding: 0 4px;
  border-radius: 3px;
  background: #27ae60;
  color: #0d1b10;
  font-size: 9px;
  vertical-align: middle;
}

/* 힐러(지원) 스킬 태그 */
.tag.support { background: #1e8449; color: #eafaf1; }

/* 시나리오 진행이 모자라 아직 못 받는 영입 퀘스트 */
.quest-locked {
  margin-top: 8px;
  padding: 6px 8px;
  border: 1px solid #6b4f1d;
  border-radius: 4px;
  background: #241d10;
  color: #e0b354;
  font-size: 11px;
}

/* ---------- 길잡이(튜토리얼) 패널 ---------- */
/* 추적 패널 바로 위. 지금 할 일 하나만 띄운다. */
#tutorial-panel {
  position: absolute; right: 8px; top: 140px; width: 232px; z-index: 5;
  background: rgba(12, 16, 26, 0.92); border: 1px solid #4a7fb5; border-left: 3px solid #5dade2;
  border-radius: 4px; padding: 6px 8px 7px; color: #e8eef5; text-shadow: 1px 1px 2px #000;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}
#tutorial-panel.hidden { display: none; }
#tutorial-panel .tut-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 9px; font-weight: bold; color: #8ad6ff; letter-spacing: 0.4px; margin-bottom: 3px;
}
#tutorial-panel .tut-head button {
  background: none; border: none; color: #7c8a99; font-size: 11px; cursor: pointer; padding: 0 2px;
}
#tutorial-panel .tut-head button:hover { color: #e74c3c; }
#tutorial-panel .tut-title { font-size: 12px; font-weight: bold; color: #f7dc6f; margin-bottom: 3px; }
#tutorial-panel .tut-desc { font-size: 10.5px; line-height: 1.45; }
#tutorial-panel .tut-why { font-size: 9.5px; line-height: 1.4; color: #9fb4c7; margin-top: 4px; }
#tutorial-panel .tut-reward { font-size: 9.5px; color: #f1c40f; margin-top: 5px; }
/* 길잡이가 떠 있으면 추적 패널을 아래로 민다 */
#tutorial-panel:not(.hidden) ~ #quest-tracker { top: 258px; }

/* ---------- 달성 연출 ---------- */
#celebrate-toast {
  position: absolute; left: 50%; top: 96px; transform: translate(-50%, -14px);
  z-index: 60; pointer-events: none; text-align: center;
  padding: 8px 20px; border-radius: 6px;
  background: linear-gradient(rgba(26, 21, 8, 0.96), rgba(16, 13, 6, 0.96));
  border: 1px solid #c9a227; box-shadow: 0 0 18px rgba(241, 196, 15, 0.35);
  opacity: 0; transition: opacity 0.22s ease, transform 0.22s ease;
}
#celebrate-toast.hidden { display: none; }
#celebrate-toast.show { opacity: 1; transform: translate(-50%, 0); }
#celebrate-toast .cel-kind { font-size: 9.5px; letter-spacing: 1px; color: #c9a227; }
#celebrate-toast .cel-title { font-size: 15px; font-weight: bold; color: #f7dc6f; margin: 2px 0 3px; text-shadow: 1px 1px 3px #000; }
#celebrate-toast .cel-reward { font-size: 11px; color: #ecf0f1; }

/* ---------- 여정 ---------- */
#quest-window { width: 420px; max-height: 420px; }
#quest-journey, #quest-content { overflow-y: auto; max-height: 340px; padding: 6px 10px 10px; }
.jr-row {
  display: flex; align-items: center; gap: 8px; padding: 5px 6px; margin-bottom: 4px;
  background: rgba(255, 255, 255, 0.03); border: 1px solid #3a3a4a; border-radius: 4px;
}
.jr-row.ready { border-color: #c9a227; background: rgba(241, 196, 15, 0.08); }
.jr-row.claimed { opacity: 0.5; }
.jr-main { flex: 1; min-width: 0; }
.jr-title { font-size: 11px; margin-bottom: 3px; }
.bar-bg.jr-bar { height: 10px; }
.bar-bg.jr-bar .bar-text { line-height: 10px; font-size: 8px; }
.jr-reward { font-size: 9.5px; color: #f1c40f; margin-top: 3px; }
.jr-claim {
  flex-shrink: 0; min-width: 52px; font-size: 10px; padding: 4px 8px; border-radius: 3px;
  background: #2c2c44; border: 1px solid #555; color: #fff; cursor: pointer;
}
.jr-claim:not(:disabled) { background: #c9a227; border-color: #f1c40f; color: #17130a; font-weight: bold; }
.jr-claim:disabled { opacity: 0.45; cursor: default; }
.jr-done { flex-shrink: 0; min-width: 52px; text-align: center; font-size: 10px; color: #2ecc71; }

/* 메뉴 항목의 '받을 게 있음' 표시 */
.menu-dot {
  display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  background: #e74c3c; border-radius: 50%; box-shadow: 0 0 5px #e74c3c;
}
.menu-dot.hidden { display: none; }

/* ---------- 스킬 아이콘 ---------- */
.skill-icon { image-rendering: pixelated; vertical-align: middle; }
/* 스킬 버튼 안에서는 가운데에 놓고, 키·레벨 글자가 위로 오게 한다. */
.hotbar .skill-btn .skill-icon { position: absolute; inset: 0; margin: auto; z-index: 1; }
.hotbar .skill-btn .lock-mark { font-size: 10px; opacity: 0.8; }
.hotbar .skill-btn .key-label, .hotbar .skill-btn .lv-label { z-index: 4; }
.eff-chip .skill-icon { margin-right: 2px; }
.skill-row .skill-icon { margin-right: 3px; }

/* 광역 평타 = 쩔(병작)에 쓰기 좋은 캐릭터 표시 */
.leech-badge {
  display: inline-block; margin-left: 4px; padding: 0 4px; border-radius: 3px;
  background: #6c3483; color: #e8daef; font-size: 9px; vertical-align: middle;
}
.leech-badge.later { background: #3d2a46; color: #b39ac2; }

/* 난이도 관문 사냥터 표시 */
.gate-badge {
  display: inline-block; margin-left: 5px; padding: 0 4px; border-radius: 3px;
  background: #922b21; color: #fadbd8; font-size: 9px; vertical-align: middle;
}