/* ============================================================
   GHeDR — 한지 · 먹 · 인주 테마
   ============================================================ */

:root {
  --paper: #f2ead6;        /* 한지 바탕 */
  --paper-warm: #ede2c8;   /* 짙은 한지 */
  --paper-card: #f7f1e1;   /* 카드 배경 */
  --ink: #2b241d;          /* 먹 */
  --ink-soft: #574a3a;     /* 담묵 */
  --ink-faint: #8a7c67;    /* 연묵 */
  --seal: #a13c2f;         /* 인주(붉은 도장) */
  --seal-dark: #7e2c22;
  --gold: #8a6d3b;         /* 황토 */
  --jade: #4e6e58;         /* 옥색 (긍정) */
  --line: rgba(43, 36, 29, 0.28);
  --line-soft: rgba(43, 36, 29, 0.14);
  --shadow: 0 2px 10px rgba(43, 36, 29, 0.12);

  --font-brush: 'Nanum Brush Script', cursive;
  --font-body: 'Song Myung', 'Gungsuh', 'HY궁서', 'Nanum Myeongjo', 'Gowun Batang', serif;
  --font-mobile-menu: 'Do Hyeon', 'Gungsuh', 'HY궁서', 'Nanum Myeongjo', serif;
  --font-woodcut: 'Kirang Haerang', 'Gasoek One', 'Nanum Myeongjo', serif;
}

/* 플레이어 창설 문파 무공 체계 편집기 */
.martial-custom-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 12px 0;
  padding: 10px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.martial-custom-toolbar > div { display: grid; gap: 2px; }
.martial-custom-toolbar span { color: var(--ink-faint); font-size: 0.82rem; }
.martial-custom-toggle,
.martial-custom-add-tech,
.martial-custom-list-row button,
.martial-custom-remove-tech {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-card);
  color: var(--ink);
  cursor: pointer;
}
.martial-custom-toggle,
.martial-custom-add-tech,
.martial-custom-list-row button { padding: 6px 10px; }
.martial-custom-editor { margin-bottom: 18px; }
.martial-custom-form {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper-card);
}
.martial-custom-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.martial-custom-grid label { display: grid; gap: 5px; min-width: 0; }
.martial-custom-grid label > span { color: var(--ink-faint); font-size: 0.78rem; }
.martial-custom-grid input,
.martial-custom-grid select,
.martial-custom-technique input,
.martial-custom-technique select {
  width: 100%;
  min-width: 0;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: var(--paper-card);
  color: var(--ink);
  padding: 6px 8px;
}
.martial-custom-parent { grid-column: span 2; }
.martial-custom-lore { grid-column: span 2; }
.martial-custom-tradeoffs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.martial-custom-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  min-width: 0;
  margin: 0;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 4px;
}
.martial-custom-choices legend { padding: 0 5px; font-weight: 700; }
.martial-custom-choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  min-width: 0;
}
.martial-custom-choice input { margin-top: 3px; }
.martial-custom-choice span { display: grid; min-width: 0; }
.martial-custom-choice small { color: var(--ink-faint); overflow-wrap: anywhere; }
.martial-custom-techniques-head,
.martial-custom-actions,
.martial-custom-list-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.martial-custom-techniques-editor { display: grid; gap: 7px; }
.martial-custom-technique {
  display: grid;
  grid-template-columns: minmax(130px, 0.8fr) minmax(190px, 1.2fr) 36px;
  gap: 7px;
}
.martial-custom-remove-tech { width: 36px; padding: 0; font-size: 1.15rem; }
.martial-custom-balance { color: var(--jade); font-weight: 700; }
.martial-custom-balance.invalid { color: var(--seal); }

/* 트레이드오프 포인트 표기 */
.martial-custom-tradeoff-guide {
  margin: 0 0 8px;
  color: var(--ink-faint);
  font-size: 0.8rem;
  line-height: 1.5;
}
.martial-points-badge {
  margin-left: 6px;
  font-style: normal;
  font-size: 0.74rem;
  font-weight: 700;
}
.martial-points-badge.advantage { color: var(--jade); }
.martial-points-badge.handicap { color: var(--seal); }
.martial-custom-choice.locked { opacity: 0.42; }
.martial-custom-choice.locked strong::after {
  content: " (상위 단계 해금)";
  font-weight: 400;
  font-size: 0.7rem;
  color: var(--ink-faint);
}
.martial-tradeoff ul { display: grid; gap: 4px; }
.martial-tradeoff li { list-style: none; font-size: 0.82rem; }
.martial-tradeoff li.gain b { color: var(--jade); }
.martial-tradeoff li.cost b { color: var(--seal); }
.martial-tradeoff-net {
  margin-left: 8px;
  font-size: 0.78rem;
  color: var(--gold);
  font-weight: 700;
}
.martial-tradeoff-net.invalid { color: var(--seal); }
.martial-custom-list { display: grid; gap: 6px; margin-top: 10px; }
.martial-custom-list-row {
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.martial-custom-list-row span { display: grid; }
.martial-custom-list-row small { color: var(--ink-faint); }
.martial-node.custom { border-left-color: var(--seal); }
.martial-node.custom .martial-node-grade { color: var(--seal); }
.martial-node.selected .martial-node-grade { color: var(--paper-warm); }
.martial-kind.custom { color: var(--seal); border-color: var(--seal); }
.martial-legend .custom::before { background: var(--seal); }

@media (max-width: 900px) {
  .martial-custom-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .martial-custom-tradeoffs { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
  .martial-custom-toolbar,
  .martial-custom-actions { align-items: stretch; flex-direction: column; }
  .martial-custom-grid { grid-template-columns: 1fr; }
  .martial-custom-parent,
  .martial-custom-lore { grid-column: auto; }
  .martial-custom-choices { grid-template-columns: 1fr; }
  .martial-custom-technique { grid-template-columns: 1fr 36px; }
  .martial-custom-technique input { grid-column: 1 / -1; }
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body { height: 100%; }

body {
  font-family: var(--font-body);
  color: var(--ink);
  background-color: var(--paper);
  /* 한지 질감: 은은한 섬유 결 + 얼룩 */
  background-image:
    radial-gradient(ellipse at 20% 10%, rgba(255, 252, 240, 0.55), transparent 55%),
    radial-gradient(ellipse at 85% 90%, rgba(196, 178, 140, 0.25), transparent 50%),
    repeating-linear-gradient(93deg, rgba(160, 140, 100, 0.045) 0 2px, transparent 2px 7px),
    repeating-linear-gradient(2deg, rgba(160, 140, 100, 0.035) 0 1px, transparent 1px 9px);
  line-height: 1.55;
}

.hidden { display: none !important; }

h1, h2, h3, .brush { font-family: var(--font-brush); font-weight: 400; }

button { font-family: inherit; cursor: pointer; }

/* ---------- 명령 버튼 (커맨드) ---------- */
.brush-btn {
  font-family: var(--font-body);
  font-size: 1.35rem;
  letter-spacing: 0.08em;
  line-height: 1.1;
  padding: 0.55em 1.2em 0.6em;
  color: var(--paper-card);
  background: var(--ink);
  border: none;
  border-radius: 42% 58% 55% 45% / 48% 45% 55% 52%;
  box-shadow: var(--shadow);
  transition: transform 0.08s ease, background 0.15s ease;
}
.brush-btn:hover { background: #40372c; transform: translateY(-1px) rotate(-0.4deg); }
.brush-btn:active { transform: translateY(1px); }
.brush-btn:disabled { opacity: 0.35; cursor: not-allowed; transform: none; }

.brush-btn.seal { background: var(--seal); }
.brush-btn.seal:hover { background: var(--seal-dark); }

.brush-btn.ghost {
  background: transparent;
  color: var(--ink);
  box-shadow: none;
  border: 1.5px solid var(--line);
}
.brush-btn.ghost:hover { background: rgba(43, 36, 29, 0.07); }

.brush-btn.big { font-size: 2.2rem; padding: 0.4em 1.6em 0.5em; }
.brush-btn.small { font-size: 1.15rem; padding: 0.3em 0.8em 0.4em; }

/* ============================================================
   입문(시작) 화면
   ============================================================ */
.intro {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.intro-scroll {
  width: min(680px, 100%);
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 6px;
  box-shadow: 0 10px 40px rgba(43, 36, 29, 0.25);
  padding: 48px 56px 56px;
  position: relative;
}
/* 두루마리 축 느낌 */
.intro-scroll::before, .intro-scroll::after {
  content: "";
  position: absolute;
  left: -8px; right: -8px;
  height: 12px;
  background: var(--ink);
  border-radius: 6px;
}
.intro-scroll::before { top: -6px; }
.intro-scroll::after { bottom: -6px; }

.intro-title {
  font-size: 4.4rem;
  text-align: center;
  letter-spacing: 0.35em;
  text-indent: 0.35em;
}
.intro-sub {
  text-align: center;
  color: var(--ink-soft);
  margin-bottom: 36px;
  letter-spacing: 0.2em;
}

.intro-form { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }

.field-label {
  display: block;
  font-family: var(--font-brush);
  font-size: 1.7rem;
  margin-bottom: 8px;
}

.field input[type="text"] {
  width: 100%;
  font-family: var(--font-body);
  font-size: 1.25rem;
  padding: 10px 14px;
  color: var(--ink);
  background: rgba(255, 253, 246, 0.75);
  border: none;
  border-bottom: 2px solid var(--ink);
  outline: none;
}
.field input[type="text"]:focus { border-bottom-color: var(--seal); }

.alignment-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.align-btn {
  background: rgba(255, 253, 246, 0.6);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  padding: 18px 16px;
  text-align: left;
  transition: all 0.15s ease;
}
.align-btn .align-name {
  display: block;
  font-family: var(--font-brush);
  font-size: 2rem;
  margin-bottom: 6px;
}
.align-btn .align-desc { font-size: 0.86rem; color: var(--ink-soft); }
.align-btn.selected {
  border-color: var(--seal);
  box-shadow: inset 0 0 0 1.5px var(--seal), var(--shadow);
}
.align-btn.selected .align-name { color: var(--seal); }
.align-btn[data-align="unorthodox"].selected .align-name { color: var(--seal-dark); }

#btn-start { align-self: center; margin-top: 8px; }
#btn-continue { align-self: center; }

/* ============================================================
   본 화면 골격
   ============================================================ */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ---------- 유틸리티 바 (최상단) ---------- */
.utility-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 18px;
  background: rgba(28, 18, 10, 0.88);
  border-bottom: 1px solid rgba(200,160,100,0.25);
  font-size: 0.8rem;
  backdrop-filter: blur(4px);
  position: sticky;
  top: 0;
  z-index: 200;
}
.utility-left, .utility-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.utility-center {
  display: flex;
  align-items: center;
}
.util-btn {
  font-family: var(--font-body);
  font-size: 0.78rem;
  padding: 4px 10px;
  border: 1px solid rgba(200,160,100,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  color: #e8dcc8;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 4px;
}
.util-btn:hover { background: rgba(255,255,255,0.13); border-color: rgba(200,160,100,0.6); }
.util-btn .util-icon { font-size: 0.95rem; }
.util-btn .util-tag {
  font-size: 0.68rem;
  padding: 1px 4px;
  border-radius: 3px;
  background: rgba(255,255,255,0.1);
  margin-left: 2px;
}
.util-btn.warn { color: #f5c87a; border-color: rgba(200,130,40,0.5); }
.util-btn.warn:hover { background: rgba(200,130,40,0.18); }
.util-btn.danger { color: #e88080; border-color: rgba(180,60,60,0.5); }
.util-btn.danger:hover { background: rgba(180,60,60,0.18); }

/* 서버 상태 */
.server-status {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #b0a090;
  font-size: 0.75rem;
}
.server-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #888;
  display: inline-block;
  animation: pulse-dot 2s ease-in-out infinite;
}
.server-dot.online { background: #6cd06c; }
.server-dot.offline { background: #d06c6c; animation: none; }
.server-dot.local { background: #c8a060; }
@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ---------- 턴 종료 버튼 ---------- */
.end-turn-btn {
  font-family: var(--font-brush);
  font-size: 1.3rem;
  padding: 8px 20px 6px;
  background: linear-gradient(135deg, var(--seal) 0%, #8b1a1a 100%);
  color: #f7f1e1;
  border: 1.5px solid rgba(255,200,150,0.3);
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.12s, box-shadow 0.12s, filter 0.12s;
  box-shadow: 0 2px 8px rgba(150,30,30,0.35);
  white-space: nowrap;
}
.end-turn-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(150,30,30,0.5);
  filter: brightness(1.1);
}
.end-turn-btn:active { transform: translateY(0); }
.end-turn-btn:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}
.end-turn-arrow {
  font-size: 0.9rem;
  animation: arrow-pulse 1.2s ease-in-out infinite;
}
@keyframes arrow-pulse {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(3px); }
}

/* ---------- 모달 ---------- */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(3px);
}
.modal-overlay.hidden { display: none; }
.modal-box {
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 32px 36px;
  max-width: 380px;
  width: 90%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.35);
  animation: modal-in 0.2s ease;
}
.modal-box--danger {
  border-color: rgba(180,60,60,0.5);
  box-shadow: 0 8px 40px rgba(150,30,30,0.25);
}
@keyframes modal-in {
  from { transform: scale(0.92); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.modal-title {
  font-family: var(--font-brush);
  font-size: 1.6rem;
  margin-bottom: 12px;
}
.modal-desc {
  color: var(--ink-soft);
  font-size: 0.93rem;
  margin-bottom: 20px;
  line-height: 1.65;
}
.modal-confirm-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  margin-bottom: 16px;
  background: rgba(255,255,255,0.7);
  box-sizing: border-box;
}
.modal-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
}

/* ---------- 상단바 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 12px 22px 10px;
  border-bottom: 2px solid var(--ink);
  background: linear-gradient(rgba(255, 252, 242, 0.5), transparent);
  flex-wrap: wrap;
}

.sect-seal {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brush);
  font-size: 2rem;
  color: #f7f1e1;
  background: var(--seal);
  border-radius: 10% 14% 12% 10%;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.35), var(--shadow);
  transform: rotate(-2deg);
  user-select: none;
}

.sect-title h1 { font-size: 2.3rem; line-height: 1; }
.sect-title span { color: var(--ink-soft); font-size: 0.9rem; }

.hud {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  margin-left: auto;
  align-items: center;
}
.hud-item { text-align: center; min-width: 52px; }
.hud-item .hud-key {
  display: block;
  font-family: var(--font-brush);
  font-size: 1.05rem;
  color: var(--ink-soft);
  line-height: 1.1;
}
.hud-item .hud-val { font-weight: 700; font-size: 1.02rem; }
.hud-item .hud-val.bad { color: var(--seal); }
.hud-item .hud-val.good { color: var(--jade); }

.topbar-right { display: flex; align-items: center; gap: 12px; }
.hud-month {
  font-family: var(--font-brush);
  font-size: 2rem;
  color: var(--seal);
}

/* ---------- 탭바 ---------- */
.tabbar {
  display: flex;
  gap: 4px;
  padding: 6px 18px 0;
  border-bottom: 1.5px solid var(--line);
  overflow-x: auto;
}

.tab-btn {
  font-family: var(--font-woodcut);
  font-size: 1.55rem;
  letter-spacing: 0.06em;
  padding: 8px 20px 6px;
  background: transparent;
  border: none;
  color: var(--ink-faint);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
  transition: color 0.12s ease;
}
.tab-btn:hover { color: var(--ink-soft); }
.tab-btn.active {
  color: var(--ink);
  border-bottom-color: var(--seal);
}

/* ---------- 본문 ---------- */
.tab-content {
  flex: 1;
  padding: 22px 26px 30px;
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
}

.pane-title {
  font-size: 2.4rem;
  margin-bottom: 4px;
}
.pane-desc {
  color: var(--ink-soft);
  margin-bottom: 18px;
  font-size: 0.92rem;
}

/* ---------- 카드/패널 공통 ---------- */
.card {
  background: var(--paper-card);
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 16px 18px;
}

.card h3 { font-size: 1.6rem; margin-bottom: 6px; }

.grid { display: grid; gap: 16px; }
.grid.cols-2 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.grid.cols-3 { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }

.muted { color: var(--ink-faint); font-size: 0.86rem; }
.small { font-size: 0.86rem; }

.tag {
  display: inline-block;
  font-size: 0.78rem;
  padding: 1px 9px 2px;
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink-soft);
  background: rgba(255, 253, 246, 0.6);
  margin-right: 4px;
}
.tag.seal-tag { color: var(--seal); border-color: var(--seal); }
.tag.jade-tag { color: var(--jade); border-color: var(--jade); }
.tag.gold-tag { color: var(--gold); border-color: var(--gold); }
.tag.contract-tag { color: #2f6d54; border-color: #2f6d54; background: rgba(47, 109, 84, 0.1); }
.tag.negotiate-tag { color: #8a5a1e; border-color: #b9852f; background: rgba(185, 133, 47, 0.12); }
.tag.shadow-tag { color: #7c3a63; border-color: #7c3a63; background: rgba(124, 58, 99, 0.1); }

/* ---------- 표 ---------- */
table.sheet {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
  background: var(--paper-card);
}
table.sheet th, table.sheet td {
  border: 1px solid var(--line-soft);
  padding: 7px 10px;
  text-align: left;
}
table.sheet th {
  font-family: var(--font-brush);
  font-size: 1.15rem;
  font-weight: 400;
  background: rgba(43, 36, 29, 0.05);
  white-space: nowrap;
}
table.sheet tr:hover td { background: rgba(161, 60, 47, 0.045); }

/* ---------- 게이지 ---------- */
.gauge {
  height: 9px;
  background: rgba(43, 36, 29, 0.1);
  border-radius: 5px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.gauge > i {
  display: block;
  height: 100%;
  background: var(--ink-soft);
  border-radius: 5px;
}
.gauge > i.seal-fill { background: var(--seal); }
.gauge > i.jade-fill { background: var(--jade); }
.gauge > i.gold-fill { background: var(--gold); }

/* ---------- 준비중(틀만) 블록 ---------- */
.placeholder {
  border: 1.5px dashed var(--line);
  border-radius: 8px;
  padding: 26px 22px;
  text-align: center;
  color: var(--ink-faint);
  background: rgba(255, 253, 246, 0.4);
}
.placeholder .ph-stamp {
  display: inline-block;
  font-family: var(--font-brush);
  font-size: 1.9rem;
  color: var(--seal);
  border: 2.5px solid var(--seal);
  border-radius: 8px;
  padding: 2px 14px 6px;
  transform: rotate(-4deg);
  margin-bottom: 10px;
  opacity: 0.85;
}

/* ============================================================
   강호도 (지도)
   ============================================================ */
.map-layout { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, 1fr); gap: 20px; }
@media (max-width: 900px) { .map-layout { grid-template-columns: 1fr; } }

.map-frame {
  background: var(--paper-card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: var(--shadow);
  padding: 8px;
}
.map-frame svg { width: 100%; height: auto; display: block; touch-action: none; }
.map-paper { fill: rgba(255, 253, 246, 0.35); }

.city-node, .map-node { cursor: pointer; }
.city-node circle, .map-node circle {
  fill: var(--paper-card);
  stroke: var(--ink);
  stroke-width: 1.6;
  transition: all 0.12s ease;
}
.city-node:hover circle, .map-node:hover circle { fill: #f0d9b8; stroke-width: 2.4; }
.city-node.selected circle, .map-node.selected circle { fill: var(--seal); stroke: var(--seal-dark); }
.city-node.home circle, .map-node.home circle { stroke: var(--seal); stroke-width: 2.4; }
.node-mountain circle { fill: #d9ceb5; }
.node-pass circle { fill: #ead0c7; stroke: var(--seal-dark); }
.node-lake circle { fill: #d8e6e8; }
.city-node text, .map-node text {
  font-family: var(--font-brush);
  font-size: 32px;
  fill: var(--ink);
  pointer-events: none;
  paint-order: stroke;
  stroke: rgba(255, 253, 246, 0.9);
  stroke-width: 4px;
  stroke-linejoin: round;
}

.map-terrain { fill: none; stroke: rgba(87, 74, 58, 0.5); stroke-width: 1.3; }
.map-river { fill: none; stroke: rgba(90, 120, 140, 0.55); stroke-width: 2.2; }
.terrain-canal { stroke: rgba(104, 132, 116, 0.65); stroke-width: 2.4; }
.terrain-desert { stroke: rgba(176, 135, 68, 0.5); stroke-dasharray: 6 6; }
.map-label { font-family: var(--font-brush); font-size: 15px; fill: rgba(87, 74, 58, 0.65); }

/* 절차적 배경 지형(산·언덕·지류) — 지도 느낌을 위한 연한 뒤 레이어 */
.map-terrain-bg { pointer-events: none; }
.map-terrain-bg .decor-mountain { fill: none; stroke: rgba(96, 82, 62, 0.30); stroke-width: 1; stroke-linejoin: round; stroke-linecap: round; }
.map-terrain-bg .decor-hill { fill: none; stroke: rgba(110, 96, 70, 0.24); stroke-width: 1; stroke-linecap: round; }
.map-terrain-bg .decor-stream { fill: none; stroke: rgba(96, 124, 142, 0.28); stroke-width: 1.1; stroke-linecap: round; }

/* 연결선(물류 노선) — 배경 레이어로 연하게 뒤로 */
.map-routes-layer { opacity: 0.5; pointer-events: none; }
.map-route {
  stroke: rgba(43, 36, 29, 0.36);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.route-river { stroke: rgba(68, 114, 142, 0.56); stroke-width: 2.6; }
.route-canal { stroke: rgba(78, 110, 88, 0.58); stroke-width: 2.4; }
.route-mountain, .route-pass { stroke: rgba(126, 44, 34, 0.48); }
.route-silkroad { stroke: rgba(138, 109, 59, 0.64); stroke-width: 2.2; }
.route-sea { stroke: rgba(44, 94, 150, 0.58); stroke-width: 2.3; stroke-dasharray: 5 4; }

/* 도시 상세 */
.city-detail .city-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; }
.city-detail .city-head h3 { font-size: 2.1rem; }
.city-summary-card .city-head {
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}
.city-tag-row, .city-specialties {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.city-note {
  margin-top: 8px;
  line-height: 1.55;
}
.city-summary-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 14px;
}
.city-summary-section {
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,253,246,0.46);
  padding: 11px 12px;
}
.city-summary-section h4 {
  font-family: var(--font-brush);
  font-weight: 400;
  font-size: 1.35rem;
  margin-bottom: 7px;
}
.city-stat-list, .sect-status-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.city-stat {
  border-bottom: 1px dashed var(--line-soft);
  padding-bottom: 4px;
  min-width: 0;
}
.city-stat span, .city-stat strong { display: block; }
.city-stat strong {
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}
.merchant-mini-list, .influence-legend {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.merchant-mini-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  border-bottom: 1px dashed var(--line-soft);
  padding-bottom: 5px;
}
.merchant-mini-list li:last-child { border-bottom: none; }
.influence-pie-wrap {
  display: grid;
  grid-template-columns: 118px 1fr;
  gap: 12px;
  align-items: center;
}
.influence-pie {
  width: 112px;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid var(--line);
  box-shadow: inset 0 0 0 10px rgba(247,241,225,0.45), var(--shadow);
}
.influence-legend li {
  display: grid;
  grid-template-columns: 12px minmax(0, 1fr) auto auto;
  gap: 7px;
  align-items: center;
  font-size: 0.84rem;
}
.influence-legend i {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(43,36,29,0.22);
}
.influence-legend span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.route-details summary {
  list-style: none;
}
.route-details summary::-webkit-details-marker { display: none; }
.route-summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  font-family: var(--font-brush);
  font-size: 1.55rem;
}
.route-summary::after {
  content: "펼침";
  font-family: var(--font-body);
  font-size: 0.78rem;
  color: var(--ink-faint);
}
.route-details[open] .route-summary::after { content: "접힘"; }
.player-sect-card .sub-list { margin-top: 10px; }

.influence-bar {
  display: flex;
  height: 16px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--line);
  margin: 6px 0 4px;
}
.influence-bar > i { display: block; height: 100%; }
.inf-orthodox { background: #5c7d9a; }
.inf-unorthodox { background: #9a5c5c; }
.inf-government { background: #8a6d3b; }
.inf-sect { background: var(--seal); }
.inf-etc { background: #7a7d6e; }

.legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 0.78rem; color: var(--ink-soft); }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: baseline; }

.sub-list { list-style: none; margin-top: 6px; }
.sub-list li {
  padding: 7px 4px;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 0.92rem;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.sub-list li:last-child { border-bottom: none; }

/* ============================================================
   도장 탭
   ============================================================ */
.dojo-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.dojo-layout-plan { grid-template-columns: minmax(560px, 1.45fr) minmax(360px, 0.9fr); }
@media (max-width: 900px) { .dojo-layout { grid-template-columns: 1fr; } }

.facility-infrastructure-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(110px, 1fr)) minmax(180px, auto);
  gap: 8px;
  align-items: stretch;
  padding: 8px 0 10px;
  border-bottom: 1px solid var(--line-soft);
}
.facility-infrastructure-summary.warning { border-bottom-color: var(--seal); }
.facility-summary-stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 42px;
  padding: 5px 8px;
  border-left: 3px solid var(--jade);
  background: rgba(31, 91, 58, 0.05);
}
.facility-summary-action {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
.facility-infrastructure-summary.warning .facility-summary-action > span { color: var(--seal); font-weight: 700; }

.facility-tech-tree {
  margin: 12px 0 16px;
  padding: 10px 0 12px;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.facility-tech-head,
.facility-tech-tier-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}
.facility-tech-head { padding: 0 2px 8px; }
.facility-tech-head h3,
.facility-tech-head p { margin: 0; }
.facility-tech-columns {
  display: grid;
  grid-template-columns: repeat(5, minmax(165px, 1fr));
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.facility-tech-tier {
  min-width: 165px;
  padding: 7px;
  border-left: 2px solid var(--line);
  background: rgba(43, 36, 29, 0.025);
}
.facility-tech-tier.current {
  border-left-color: var(--seal);
  background: rgba(161, 60, 47, 0.045);
}
.facility-tech-tier-head { min-height: 28px; margin-bottom: 6px; }
.facility-tech-node-list { display: flex; flex-direction: column; gap: 5px; }
.facility-tech-node {
  width: 100%;
  min-height: 82px;
  padding: 6px 7px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: var(--paper-card);
  color: var(--ink);
  text-align: left;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  cursor: pointer;
}
.facility-tech-node:hover { border-color: var(--ink-soft); }
.facility-tech-node.built { border-left: 4px solid var(--jade); background: rgba(46, 204, 113, 0.05) !important; }
.facility-tech-node.available { border-left: 4px solid #b5872f; background: rgba(241, 196, 15, 0.06) !important; }
.facility-tech-node.locked { border-left: 4px solid var(--line); opacity: 0.68; background: rgba(0, 0, 0, 0.02) !important; }
.facility-tech-branch { font-size: 0.66rem; color: var(--ink-faint); }
.facility-tech-status { margin-top: auto; font-size: 0.68rem; color: var(--ink-soft); line-height: 1.25; }

.dojo-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.dojo-toolbar-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.dojo-plan {
  position: relative;
  width: 100%;
  max-width: 540px;
  margin: 0 auto;
  aspect-ratio: var(--grid-w) / var(--grid-h);
  border: 1.5px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
  background-color: rgba(255,253,246,0.56);
  background-image:
    linear-gradient(to right, rgba(43,36,29,0.08) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(43,36,29,0.08) 1px, transparent 1px);
  background-size: calc(100% / var(--grid-w)) calc(100% / var(--grid-h));
}
.dojo-plan.editing {
  box-shadow: inset 0 0 0 2px rgba(161,60,47,0.28);
}
.dojo-lot {
  position: absolute;
  border: 1.5px dashed rgba(78,110,88,0.42);
  background: rgba(78,110,88,0.08);
}
.dojo-lot-buyable {
  position: absolute;
  border: 1.5px dashed rgba(161,60,47,0.3);
  background: rgba(161,60,47,0.02);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  padding: 4px;
  box-sizing: border-box;
}
.dojo-lot-buyable:hover {
  background: rgba(161,60,47,0.1);
  border-color: rgba(161,60,47,0.8);
}
.dojo-lot-buyable .buy-plus {
  font-size: 1.5rem;
  color: var(--seal);
  font-weight: bold;
}
.dojo-lot-buyable .buy-price {
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 2px;
}
.dojo-module {
  position: absolute;
  border: 1.5px solid rgba(43,36,29,0.42);
  border-radius: 6px;
  background: rgba(247,241,225,0.94);
  color: var(--ink);
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  justify-items: center;
  padding: 6px 7px;
  box-shadow: 0 3px 10px rgba(43,36,29,0.12);
  transition: box-shadow 0.12s ease, transform 0.12s ease, border-color 0.12s ease;
  overflow: hidden;
  touch-action: none;
}
.dojo-module:hover { transform: translateY(-1px); box-shadow: 0 5px 14px rgba(43,36,29,0.18); }
.dojo-module.selected { border-color: var(--seal); box-shadow: 0 0 0 2px rgba(161,60,47,0.22), var(--shadow); }
.dojo-module.draggable { cursor: grab; }
.dojo-module.draggable:active { cursor: grabbing; }
.dojo-module.invalid { border-color: var(--seal); background: rgba(161,60,47,0.16); }
.dojo-module .module-mark {
  font-family: var(--font-brush);
  font-size: 1.8rem;
  line-height: 1;
  color: var(--seal);
}
.dojo-module .module-name {
  font-family: var(--font-brush);
  font-size: 1.28rem;
  line-height: 1.05;
  white-space: nowrap;
}
.dojo-module .module-meta {
  font-size: 0.72rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.module-training { background: rgba(234,220,190,0.96); }
.module-clinic { background: rgba(222,235,222,0.96); }
.module-intel { background: rgba(224,228,238,0.96); }
.module-workshop { background: rgba(232,224,209,0.96); }
.module-library { background: rgba(239,232,206,0.96); }
.module-arena { background: rgba(238,219,211,0.96); }
.module-guest { background: rgba(226,235,229,0.96); }
.module-vault { background: rgba(221,216,207,0.96); }

.dojo-site-element {
  position: absolute;
  border: 1.5px solid rgba(43,36,29,0.5);
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  padding: 2px;
  color: var(--ink);
  overflow: hidden;
  touch-action: none;
  box-shadow: 0 2px 7px rgba(43,36,29,0.12);
}
.dojo-site-element.draggable { cursor: grab; }
.dojo-site-element.selected { border-color: var(--seal); box-shadow: 0 0 0 2px rgba(161,60,47,0.24), 0 2px 7px rgba(43,36,29,0.12); }
.dojo-site-element.invalid { border-color: var(--seal); background: rgba(161,60,47,0.16); }
.dojo-site-main { background: rgba(176, 150, 104, 0.88); }
.dojo-site-entrance { background: rgba(78, 110, 88, 0.82); color: #fffdf6; }
.dojo-site-illusion {
  background:
    repeating-linear-gradient(135deg, rgba(78,110,88,0.2) 0 6px, rgba(255,253,246,0.2) 6px 12px),
    rgba(65, 82, 91, 0.78);
  border-style: dashed;
}
.dojo-site-wall { background: rgba(72, 64, 56, 0.78); color: #fffdf6; }
.dojo-site-wall-outer { background: rgba(38, 34, 31, 0.9); border-color: rgba(24, 20, 18, 0.86); }
.dojo-site-wall-inner { background: rgba(91, 82, 71, 0.78); }
.dojo-site-trap { background: rgba(103, 45, 48, 0.82); color: #fffdf6; border-style: dotted; }
.dojo-site-element .site-label {
  font-family: var(--font-brush);
  font-size: 0.98rem;
  line-height: 1;
  white-space: nowrap;
}
.dojo-site-element .site-meta {
  font-size: 0.58rem;
  line-height: 1;
  white-space: nowrap;
}

.module-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
.module-detail h4 {
  font-family: var(--font-brush);
  font-size: 1.5rem;
  font-weight: 400;
}
.module-compact-lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 10px;
}
.module-compact-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(255,253,246,0.5);
  font-size: 0.86rem;
}
.module-stat-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 10px;
}
.facility-effect-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}
.facility-stat {
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  padding: 4px 6px;
  background: rgba(255,253,246,0.48);
}
.facility-stat span, .facility-stat strong { display: block; }
.facility-stat span { font-size: 0.72rem; }
.facility-stat strong { font-size: 0.88rem; }
.facility-effect-card h3 { margin-bottom: 8px; }
.facility-effect-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.facility-pill {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  border: 1px solid var(--line-soft);
  border-radius: 999px;
  padding: 4px 8px;
  background: rgba(255,253,246,0.52);
  white-space: nowrap;
}
.facility-pill strong { font-size: 0.88rem; }
.module-effect-line { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.module-subtitle { margin-top: 14px; }
.module-member-list { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.module-member {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) minmax(92px, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,253,246,0.5);
}
.module-member.over-capacity { opacity: 0.72; }

.building-card { display: flex; flex-direction: column; gap: 8px; }
.building-head { display: flex; justify-content: space-between; align-items: baseline; }
.building-head h4 { font-family: var(--font-brush); font-size: 1.5rem; font-weight: 400; }
.tier-dots { letter-spacing: 3px; color: var(--seal); font-size: 0.9rem; }
.tier-dots .empty { color: var(--line); }

.deco-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 2px; border-bottom: 1px dashed var(--line-soft); }
.deco-item:last-child { border-bottom: none; }

.land-plot-row { display: flex; gap: 6px; flex-wrap: wrap; margin: 10px 0; }
.land-plot {
  width: 44px; height: 44px;
  border: 1.5px solid var(--line);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-brush);
  font-size: 1.15rem;
  background: rgba(255,253,246,0.5);
  color: var(--ink-soft);
}
.land-plot.used { background: var(--ink); color: var(--paper-card); border-color: var(--ink); }
.land-plot.empty-lot { border-style: dashed; color: var(--ink-faint); }

/* ============================================================
   문도 탭
   ============================================================ */
.members-layout {
  display: grid;
  grid-template-columns: minmax(520px, 1.4fr) minmax(320px, 1fr);
  gap: 18px;
  align-items: stretch;
  height: calc(100vh - 200px);
  min-height: 520px;
  overflow: hidden;
}
.members-roster-pane,
.org-chart-pane {
  min-width: 0;
  height: 100%;
  overflow-y: auto;
  padding-right: 6px;
  box-sizing: border-box;
}
.member-detail-pane {
  display: none;
}

/* 부서 레이아웃 스타일 */
.org-dept-list {
  display: flex;
  flex-direction: row;
  gap: 16px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 12px;
}
.org-dept-section {
  flex: 0 0 240px;
  background: var(--paper-card);
  border: 1.5px solid var(--line);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, border-color 0.12s;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 6px;
  /* 문도가 많아 조직도가 길어지면 부서 카드 안에서 개별 세로 스크롤 */
  max-height: min(62vh, 540px);
}
.org-dept-section:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow);
  border-color: var(--ink-soft);
}
.org-dept-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px;
  margin-bottom: 8px;
}
.org-dept-title {
  font-family: var(--font-brush);
  font-size: 1.25rem;
  color: var(--ink);
  font-weight: bold;
}
.policy-tag {
  background: rgba(139, 26, 26, 0.08);
  color: var(--seal);
  font-weight: bold;
  border: 1px solid rgba(139, 26, 26, 0.2);
  margin-left: 6px;
}
.org-dept-effect {
  font-size: 0.8rem;
  color: var(--jade);
  margin-bottom: 10px;
  background: rgba(31, 91, 58, 0.04);
  padding: 4px 8px;
  border-radius: 4px;
  display: inline-block;
}
.org-dept-slots {
  display: flex;
  flex-direction: column;
  gap: 10px;
  /* 부서 카드 높이 상한 초과분은 슬롯 목록이 자체 스크롤로 처리 */
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding-right: 2px;
}
.org-slot {
  margin: 0 !important; /* 부서 내부 슬롯으로 밀접 배치 */
}

/* === 부대(대) 조직도 — 문관 행 + 부대들이 옆으로 퍼진다 === */
.org-staff-row,
.org-unit-row {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 12px;
  overflow-x: auto;
  padding-bottom: 10px;
  align-items: flex-start;
}
.org-staff-row { margin-bottom: 2px; }
.org-unit-card {
  flex: 0 0 224px;
  background: var(--paper-card);
  border: 1.5px solid var(--line);
  border-top: 3px solid var(--ink-soft);
  border-radius: 8px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  box-shadow: var(--shadow-sm);
  max-height: min(60vh, 520px);
  box-sizing: border-box;
}
.org-unit-card.locked {
  border-top-color: var(--line);
  background: rgba(43, 36, 29, 0.035);
  box-shadow: none;
}
.org-unit-card.locked .org-unit-title { color: var(--ink-faint); }
.org-slot.disabled {
  border-style: dashed;
  background: rgba(43, 36, 29, 0.025);
  cursor: not-allowed;
}
.org-slot.disabled .org-empty { color: var(--ink-faint); }
.org-infrastructure-status {
  display: grid;
  grid-template-columns: minmax(170px, auto) minmax(240px, 1fr) auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 7px 9px;
  border: 1px solid rgba(31, 91, 58, 0.3);
  border-left: 4px solid var(--jade);
  border-radius: 5px;
  background: rgba(31, 91, 58, 0.045);
}
.org-infrastructure-status > div { display: flex; flex-direction: column; }
.org-infrastructure-status.warning {
  border-color: rgba(161, 60, 47, 0.38);
  border-left-color: var(--seal);
  background: rgba(161, 60, 47, 0.055);
}
.org-staff-card { flex-basis: 168px; background: rgba(255, 253, 246, 0.6); }
.org-unit-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 6px;
}
.org-unit-title {
  font-family: var(--font-brush);
  font-size: 1.1rem;
  font-weight: bold;
  color: var(--ink);
  white-space: nowrap;
}
.org-unit-head .policy-btn {
  margin: 0;
  padding: 1px 6px;
  font-size: 0.66rem;
  flex: 0 0 auto;
}
.org-unit-foot {
  border-top: 1px dashed var(--line);
  padding-top: 5px;
  font-size: 0.68rem;
}
.org-unit-card .org-slot { flex: 0 0 auto; }
.org-unit-card .org-slot-members { flex-wrap: wrap; }
/* 대장 슬롯 강조 */
.org-role-chief {
  background: rgba(139, 26, 26, 0.05);
  border-color: rgba(139, 26, 26, 0.28) !important;
}
.org-role-chief .org-slot-head h4 { color: var(--seal); }
.org-role-member .org-slot-head h4 { color: var(--ink-soft); }
/* 부대 종류별 상단 색 띠 */
.org-unit-card.unit-attack   { border-top-color: #a13c2f; }
.org-unit-card.unit-dispatch { border-top-color: #b5872f; }
.org-unit-card.unit-defense  { border-top-color: #3a6b4f; }
.org-unit-card.unit-intel    { border-top-color: #40618f; }
.org-unit-card.unit-guard    { border-top-color: #6d4f7a; }
.org-unit-card.unit-clinic   { border-top-color: #4f8a7a; }
.org-unit-card.org-staff-card { border-top-color: #b48a46; }

.members-pane-head,
.member-detail-head,
.org-slot-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.members-pane-head { margin-bottom: 10px; }
.members-pane-head h3,
.org-slot-head h4,
.member-detail-head h3 {
  margin: 0;
}
.members-pane-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
.member-compact-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-height: 610px;
  overflow-y: auto;
  padding-right: 6px;
}
.member-row {
  width: 100%;
  display: grid;
  gap: 3px;
  text-align: left;
  padding: 9px 11px;
  border: 1px solid var(--line-soft);
  border-radius: 7px;
  background: rgba(255,253,246,0.62);
  color: var(--ink);
  box-shadow: none;
}
.member-row:not(.fixed) { cursor: grab; }
.member-row:hover,
.member-row.selected {
  border-color: var(--seal);
  background: rgba(255,253,246,0.92);
}
.member-row.fixed { cursor: pointer; }
.member-row-top {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) auto auto;
  gap: 8px;
  align-items: center;
}
.member-row-line {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.member-detail {
  display: grid;
  gap: 12px;
}
.member-detail-head h3 {
  font-size: 1.65rem;
}
.member-trait-box {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 7px;
  background: rgba(255,253,246,0.48);
}
.member-trait-box p {
  margin: 0;
  font-size: 0.91rem;
  color: var(--ink-soft);
}
/* ---------- 문도 능력치: 평준화(막대) + 성장인자(수치) ---------- */
.member-stats-compact {
  display: grid;
  gap: 8px;
}
.member-stat-categories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
.member-stat-category {
  min-width: 0;
  display: grid;
  gap: 2px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,253,246,0.46);
}
.member-stat-category strong {
  min-width: 0;
  overflow-wrap: anywhere;
  font-size: 0.87rem;
  color: var(--ink);
}
/* 평준화 능력치 — 막대, 간격 최소화 */
.stat-bars {
  display: grid;
  gap: 3px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,253,246,0.48);
}
.stat-bar-row {
  display: grid;
  grid-template-columns: 2.4em 1fr 1.7em;
  align-items: center;
  gap: 7px;
}
.stat-bar-label {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.stat-bar-track {
  height: 7px;
  background: rgba(43, 36, 29, 0.1);
  border-radius: 4px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
}
.stat-bar-fill {
  display: block;
  height: 100%;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--gold), var(--ink-soft));
}
.stat-bar-val {
  font-size: 0.82rem;
  font-weight: 700;
  text-align: right;
  color: var(--ink);
}
/* 성장인자 — 수치 강조 */
.stat-numbers {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.stat-num-chip {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 3px 4px;
  border: 1px solid var(--seal);
  border-radius: 4px;
  background: rgba(161, 60, 47, 0.04);
  text-align: center;
}
.stat-num-label {
  font-size: 0.65rem;
  color: var(--ink-soft);
  transform: scale(0.9);
  line-height: 1;
}
.stat-num-val {
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.1;
  color: var(--seal-dark);
}

/* ---------- 카드형 선택기 (운용 배치 · 수련 방향) ---------- */
.select-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}
.select-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 1px;
  padding: 3px 2px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(255,253,246,0.6);
  color: var(--ink);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.08s ease;
}
.select-card:hover {
  border-color: var(--gold);
  background: rgba(255,253,246,0.9);
}
.select-card.selected {
  border-color: var(--seal);
  background: rgba(161, 60, 47, 0.09);
  box-shadow: inset 0 0 0 1px var(--seal);
}
.select-card-name {
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}
.select-card.selected .select-card-name { color: var(--seal-dark); }
.select-card-hint {
  font-size: 0.58rem;
  line-height: 1.1;
  color: var(--ink-faint);
  transform: scale(0.95);
  white-space: nowrap;
}
.member-gauge-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.member-control-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
}
.member-control {
  display: grid;
  gap: 2px;
}
.salary-control {
  padding: 4px 6px;
  border: 1px dashed var(--line);
  border-radius: 5px;
  background: rgba(255,253,246,0.42);
}
.salary-control input[type="range"],
.payroll-slider-row input[type="range"] {
  width: 100%;
  accent-color: var(--seal);
  margin: 2px 0;
  height: 14px;
}
.salary-control-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  font-size: 0.8rem;
}
.salary-control-summary {
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 2px 6px;
  font-size: 0.75rem;
}
.salary-control-summary .muted {
  min-width: 0;
  overflow-wrap: anywhere;
}
.member-control select {
  font-family: var(--font-body);
  font-size: 0.92rem;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255,253,246,0.8);
  color: var(--ink);
  width: 100%;
}
.m-flags { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.org-chart {
  display: grid;
  gap: 12px;
}
.org-leader-card {
  display: grid;
  gap: 2px;
  padding: 13px 16px;
  border: 2px solid var(--seal);
  border-radius: 8px;
  background: rgba(255,253,246,0.82);
  box-shadow: var(--shadow);
}
.org-leader-card strong {
  font-family: var(--font-brush);
  font-size: 1.7rem;
  font-weight: 400;
  color: var(--seal-dark);
}
.org-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.org-slot {
  min-height: 80px;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 4px;
  padding: 4px 6px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: rgba(255,253,246,0.55);
  transition: border-color 0.12s ease, background 0.12s ease, transform 0.12s ease;
}
.org-slot.drag-over {
  border-color: var(--seal);
  background: rgba(161, 60, 47, 0.08);
  transform: translateY(-1px);
}
.org-slot.full .org-slot-head h4 { color: var(--seal-dark); }
.org-slot.unassigned {
  border-style: dashed;
  background: rgba(255,253,246,0.36);
}
.org-slot-note {
  min-height: 20px;
  margin: 0;
  font-size: 0.72rem;
  color: var(--ink-soft);
  line-height: 1.25;
}
.org-slot-members {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.org-member-chip {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 80px;
  max-width: 100%;
  padding: 3px 5px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(255,253,246,0.8);
  color: var(--ink);
  text-align: left;
  cursor: grab;
}
.org-member-chip-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2px;
  font-size: 0.74rem;
}
.org-member-chip-top strong {
  font-weight: 700;
}
.org-member-chip-top .muted {
  font-size: 0.65rem;
}
.org-member-chip-stats {
  font-size: 0.62rem;
  color: var(--ink-soft);
  border-top: 1px solid rgba(0, 0, 0, 0.04);
  margin-top: 1px;
  padding-top: 1px;
  white-space: nowrap;
}
.org-member-chip:hover,
.org-member-chip.selected {
  border-color: var(--seal);
  background: rgba(255,253,246,0.96);
}
.org-empty {
  align-self: center;
  color: var(--ink-faint);
  font-size: 0.88rem;
}
.assignment-effects { margin-top: 18px; }
.recruitment-modal {
  max-width: 820px;
  text-align: left;
  max-height: min(86vh, 820px);
  overflow-y: auto;
}
.recruitment-head,
.recruitment-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.recruitment-mode-actions {
  display: flex;
  justify-content: flex-end;
  gap: 7px;
  flex-wrap: wrap;
}
.recruitment-result {
  margin: 0 0 12px;
  padding: 8px 10px;
  border: 1px dashed var(--line);
  border-radius: 6px;
  background: rgba(255,253,246,0.56);
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.recruitment-list {
  display: grid;
  gap: 9px;
}
.recruitment-card {
  display: grid;
  gap: 8px;
  padding: 11px 12px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,253,246,0.58);
}
.recruitment-card.general {
  border-color: rgba(78, 110, 88, 0.38);
  background: rgba(244, 250, 241, 0.34);
}
.recruitment-card-head strong {
  display: block;
  font-size: 1.08rem;
}
.recruitment-meta {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.recruitment-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}
.recruitment-actions {
  display: flex;
  gap: 7px;
  flex-wrap: wrap;
}

@media (max-width: 980px) {
  .members-layout { grid-template-columns: 1fr; height: auto; min-height: 0; overflow: visible; }
  .members-roster-pane,
  .org-chart-pane { height: auto; overflow: visible; }
  .member-compact-list { max-height: none; }
}

@media (max-width: 640px) {
  .member-row-top { grid-template-columns: minmax(70px, 1fr) auto; }
  .member-row-top .muted.small { grid-column: 1 / -1; }
  .member-control-grid,
  .member-gauge-row,
  .org-slot-grid {
    grid-template-columns: 1fr;
  }
  .members-pane-head,
  .recruitment-head,
  .recruitment-card-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .members-pane-actions { justify-content: flex-start; }
  .recruitment-mode-actions { justify-content: flex-start; }
  .salary-control-summary,
  .recruitment-meta {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   외교 탭
   ============================================================ */
.diplomacy-sections { display: grid; gap: 14px; }
.diplomacy-section { padding: 12px 14px; }
.diplomacy-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 4px;
}
.diplomacy-section-head h3 { margin: 0; }
.faction-row { display: flex; align-items: center; gap: 14px; padding: 10px 6px; border-bottom: 1px dashed var(--line-soft); flex-wrap: wrap; }
.faction-row:last-child { border-bottom: none; }
.faction-name { font-family: var(--font-brush); font-size: 1.45rem; min-width: 120px; }
.faction-meta { flex: 1; min-width: 180px; }
.relation-scale { display: flex; align-items: center; gap: 8px; min-width: 190px; }
.relation-scale .gauge { flex: 1; }
.relation-num { min-width: 38px; text-align: right; font-weight: 700; }
.faction-actions { display: flex; gap: 6px; }
.merchant-row { align-items: center; }
.merchant-contract-box {
  display: grid;
  gap: 2px;
  min-width: 150px;
  padding: 6px 8px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(185, 133, 47, 0.08);
}
.merchant-contract-box strong { font-size: 0.9rem; color: var(--ink); }

.letter-log { max-height: 300px; overflow-y: auto; }
.letter-log .letter {
  padding: 9px 4px;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 0.9rem;
}
.letter .letter-head { color: var(--ink-faint); font-size: 0.78rem; }

/* ============================================================
   임무 탭
   ============================================================ */
.mission-layout { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
@media (max-width: 900px) { .mission-layout { grid-template-columns: 1fr; } }

.mission-card { cursor: pointer; transition: box-shadow 0.12s ease, transform 0.12s ease; position: relative; padding: 12px 14px; }
.mission-card:hover { transform: translateY(-2px); }
.mission-card.selected { box-shadow: 0 0 0 2px var(--seal), var(--shadow); }
.mission-card--locked {
  cursor: not-allowed;
  opacity: 0.68;
  filter: grayscale(0.18);
}
.mission-card--locked:hover { transform: none; }
.mission-card-row { display: flex; justify-content: space-between; gap: 12px; align-items: center; min-width: 0; }
.mission-card-top { margin-bottom: 6px; }
.mission-title-row { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mission-title-row h3 { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.mission-badges, .mission-card .m-rewards { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.mission-badges .tag { margin-left: 0 !important; }
.mission-card-bottom { align-items: flex-start; }
.mission-desc { flex: 1 1 auto; margin: 0; min-width: 0; line-height: 1.35; }
.mission-card-meta { flex: 0 0 220px; display: flex; flex-direction: column; gap: 5px; align-items: flex-end; text-align: right; }
.mission-card .m-rewards { margin-top: 0; }

/* 상단 일반 의뢰 — 은은한 황토 좌측 강조 */
.mission-card--merchant { border-left: 4px solid var(--gold); }
/* 계약 상단 의뢰 — 옥색 계열, 상시 계약 표시 */
.mission-card--contract {
  border-left: 4px solid #2f6d54;
  background:
    linear-gradient(0deg, rgba(47, 109, 84, 0.06), rgba(47, 109, 84, 0.06)),
    var(--paper-card);
}
/* 사파·악명 연계 임무 — 어두운 자주빛 그림자 배경 */
.mission-card--shadow {
  border-left: 4px solid #7c3a63;
  background:
    linear-gradient(0deg, rgba(60, 30, 48, 0.12), rgba(60, 30, 48, 0.12)),
    var(--paper-card);
}
.mission-card--shadow h3 { color: #6d2f57; }

/* 보수 표시 행 (계약/협의) */
.fee-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 10px;
  margin-top: 8px;
  border-radius: 6px;
  border: 1px solid var(--line-soft);
}
.fee-row.contract { background: rgba(47, 109, 84, 0.08); border-color: #2f6d54; }
.fee-row.negotiate { background: rgba(185, 133, 47, 0.1); border-color: #b9852f; }
.fee-row strong { font-size: 1.05rem; }

.assign-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; }
.assign-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,253,246,0.55);
  cursor: pointer;
  font-size: 0.94rem;
}
.assign-item input { accent-color: var(--seal); }
.assign-item.injured { opacity: 0.75; }
.assign-item.committed {
  opacity: 0.55;
  background: rgba(43, 36, 29, 0.05);
  cursor: not-allowed;
}
.assign-item.committed .tag { border-color: var(--ink-faint); color: var(--ink-faint); }
.assign-item.partial {
  border-color: rgba(185, 133, 47, 0.45);
  background: rgba(185, 133, 47, 0.08);
}
.mission-odds {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,253,246,0.5);
  margin-top: 8px;
}

.turn-result { margin-top: 14px; }
.turn-result .result-stamp {
  font-family: var(--font-brush);
  font-size: 2.6rem;
  display: inline-block;
  transform: rotate(-5deg);
  border: 3px solid;
  border-radius: 10px;
  padding: 0 16px 6px;
  margin-bottom: 10px;
}
.result-stamp.ok { color: var(--jade); border-color: var(--jade); }
.result-stamp.fail { color: var(--seal); border-color: var(--seal); }
.turn-result ul { list-style: none; }
.turn-result li { padding: 4px 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.92rem; }

/* ---------- 이번 달 임무 기록 ---------- */
.month-mission-list { list-style: none; margin: 8px 0 0; }
.month-mission-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 0.92rem;
}
.month-mission-list .result-stamp {
  font-family: var(--font-brush);
  font-size: 1.4rem;
  line-height: 1;
  min-width: 1.4em;
  text-align: center;
}
.month-mission-list .result-stamp.ok { color: var(--jade); }
.month-mission-list .result-stamp.fail { color: var(--seal); }
.last-month-summary { border-top: 1px solid var(--line-soft); padding-top: 8px; }

/* ============================================================
   금고 탭
   ============================================================ */
.fin-summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin-bottom: 12px; }
.fin-box { text-align: center; padding: 8px 6px; }
.fin-box .fin-key { font-family: var(--font-brush); font-size: 0.95rem; color: var(--ink-soft); display: block; }
.fin-box .fin-val { font-size: 1.15rem; font-weight: 800; font-family: 'Nanum Myeongjo', serif; }
.fin-box .fin-val.bad { color: var(--seal); }
.fin-box .fin-val.good { color: var(--ink, #1f1f1f); }
.payroll-card {
  display: grid;
  gap: 10px;
  margin-bottom: 16px;
}
.payroll-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.payroll-head h3 { margin: 0; }
.payroll-slider-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}
.payroll-breakdown {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}
.payroll-line {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 6px;
  background: rgba(255,253,246,0.46);
}
.payroll-line strong {
  font-size: 1.1rem;
  color: var(--ink);
}

.ledger-amount.plus { color: var(--jade); font-weight: 700; }
.ledger-amount.minus { color: var(--seal); font-weight: 700; }

@media (max-width: 640px) {
  .payroll-head {
    align-items: flex-start;
    flex-direction: column;
  }
  .payroll-breakdown {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   비무 탭
   ============================================================ */
.battle-modes { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin-bottom: 22px; }
.battle-mode-card { text-align: center; padding: 22px 16px; cursor: pointer; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.battle-mode-card:hover { transform: translateY(-2px); }
.battle-mode-card.selected { box-shadow: 0 0 0 2px var(--seal), var(--shadow); }
.battle-mode-card.disabled { opacity: 0.6; cursor: default; }
.battle-mode-card.disabled:hover { transform: none; }
.battle-mode-card h3 { font-size: 2rem; }
.battle-mode-card .mode-scale { color: var(--seal); font-family: var(--font-brush); font-size: 1.2rem; }

/* 비무/결투 선택 토글 */
.duel-kind { display: flex; gap: 10px; margin: 10px 0 12px; flex-wrap: wrap; }
.duel-kind-btn { flex: 1; min-width: 210px; text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 14px; border: 1.5px solid var(--line); border-radius: 8px; background: var(--paper); cursor: pointer; }
.duel-kind-btn strong { font-family: var(--font-brush); font-size: 1.35rem; }
.duel-kind-btn.selected { border-color: var(--seal); box-shadow: inset 0 0 0 1px var(--seal); background: rgba(161,60,47,.05); }
.duel-target-row { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }

.duel-arena { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; margin: 14px 0; }
.duel-side { text-align: center; display: flex; flex-direction: column; justify-content: center; gap: 4px; }
/* 이름/드롭박스 + i 정보 버튼을 한 줄로 — 양쪽 카드가 같은 구조·크기를 유지한다 */
.duel-pick-row { display: flex; align-items: center; justify-content: center; gap: 6px; min-width: 0; }
.duel-pick-row .duel-select { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.duel-foe-name { font-family: var(--font-brush); font-size: 1.35rem; line-height: 1.15; }
.duel-info-btn {
  flex: 0 0 auto; width: 20px; height: 20px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--paper); color: var(--ink-soft);
  font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 0.82rem;
  line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.duel-info-btn:hover { border-color: var(--seal); color: var(--seal); }
.duel-vs {
  font-family: var(--font-brush);
  font-size: 3rem;
  color: var(--seal);
  align-self: center;
}
.duel-log { margin-top: 12px; }
.duel-log li { list-style: none; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); font-size: 0.93rem; }
.tournament-pane { display: grid; gap: 12px; }
.tournament-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.tournament-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; }
.tournament-card {
  display: grid;
  gap: 5px;
  text-align: left;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: rgba(255,253,246,.78);
  color: var(--ink);
  font-family: var(--font-body);
  cursor: pointer;
}
.tournament-card.selected { border-color: var(--seal); box-shadow: inset 0 0 0 1px var(--seal); }
.tournament-summary { display: grid; gap: 4px; padding: 8px 0; border-top: 1px dashed var(--line-soft); border-bottom: 1px dashed var(--line-soft); }
.tournament-entrants { display: grid; gap: 6px; max-height: 300px; overflow: auto; padding-right: 4px; }
.entrant-row {
  display: grid;
  grid-template-columns: auto minmax(72px, 1fr) minmax(130px, 1.2fr) minmax(150px, 1.2fr);
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: 8px;
  background: rgba(255,253,246,.62);
}
.entrant-row.selected { border-color: var(--seal); background: rgba(150, 52, 39, .06); }
.tournament-log { margin-top: 10px; padding: 0; }
.tournament-log li { list-style: none; padding: 5px 0; border-bottom: 1px dashed var(--line-soft); font-size: .92rem; }

@media (max-width: 720px) {
  .entrant-row { grid-template-columns: auto 1fr; }
  .entrant-row .small { grid-column: 2; }
}

/* ============================================================
   하단 소식 티커 / 토스트
   ============================================================ */
.event-ticker {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 8px 22px;
  border-top: 1.5px solid var(--line);
  background: rgba(43, 36, 29, 0.04);
  font-size: 0.88rem;
  color: var(--ink-soft);
}
.ticker-label {
  font-family: var(--font-brush);
  font-size: 1.2rem;
  color: var(--seal);
  white-space: nowrap;
}
#ticker-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

#toast-root {
  position: fixed;
  bottom: 56px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 999;
  align-items: center;
}
.toast {
  background: var(--ink);
  color: var(--paper-card);
  padding: 10px 22px;
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.3);
  font-size: 0.95rem;
  animation: toast-in 0.25s ease;
}
.toast.seal { background: var(--seal); }
.toast.warn { background: #8b6010; color: #fdebc0; }
.toast.error { background: #8b1a1a; color: #fde8e8; }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 모바일 보정 */
@media (max-width: 640px) {
  .intro-scroll { padding: 32px 22px 40px; }
  .intro-title { font-size: 3rem; }
  .alignment-choice { grid-template-columns: 1fr; }
  .tab-content { padding: 16px 14px 24px; }
  .hud { gap: 9px; }
  .sect-title h1 { font-size: 1.8rem; }
  .dojo-plan { min-height: 300px; }
  .module-stat-grid, .facility-effect-grid { grid-template-columns: 1fr; }
  .module-member { grid-template-columns: 1fr; }
  .mission-card-row { align-items: flex-start; }
  .mission-card-bottom { flex-direction: column; }
  .mission-card-meta { flex-basis: auto; align-items: flex-start; text-align: left; width: 100%; }
  .mission-badges, .mission-card .m-rewards { justify-content: flex-start; }
  .city-stat-list, .sect-status-grid { grid-template-columns: 1fr; }
  .influence-pie-wrap { grid-template-columns: 1fr; justify-items: center; }
  .influence-legend { width: 100%; }
}

/* ============================================================
   비무 횡스크롤 무대 (combat/duel_stage.js) — 고도화
   ============================================================ */
.duel-stage-root { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--paper-card); box-shadow: var(--shadow); }
.ds-hud { display: flex; align-items: center; gap: 10px; padding: 12px 14px 8px; }
.ds-fighter-hud { flex: 1; min-width: 0; }
.ds-fn { font-family: var(--font-brush); font-size: 1.5rem; white-space: nowrap; }
.ds-fighter-hud.right { text-align: right; }
.ds-fn .ds-art { font-family: var(--font-body); font-size: 0.72rem; color: var(--ink-soft); }
/* 체력·기력·내력 3분할 게이지 — 각 막대는 100%에서 줄고, 합 사이엔 조금 차오른다 */
.ds-gauge { display: flex; align-items: center; gap: 5px; margin-top: 3px; }
.ds-gauge.rt { flex-direction: row; }
.ds-gl { flex: 0 0 auto; width: 12px; text-align: center; font-size: .64rem; color: var(--ink-soft); }
.ds-bar { flex: 1; height: 11px; background: rgba(43,36,29,.14); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.ds-bar.stam, .ds-bar.qi { height: 7px; }
.ds-bar i { display: block; height: 100%; width: 100%; border-radius: 5px; transition: width .38s ease; }
.ds-bar.rt i { margin-left: auto; }               /* 우측 진영: 오른쪽에 채워 왼쪽부터 줄어든다 */
.ds-bar.hp i   { background: linear-gradient(90deg, var(--jade), #6b8b6f); }
.ds-bar.stam i { background: linear-gradient(90deg, var(--gold), #d9a441); }
.ds-bar.qi i   { background: linear-gradient(90deg, #5c7d9a, #7f9ec0); }
.ds-bar.rt.hp i   { background: linear-gradient(90deg, #6b8b6f, var(--jade)); }
.ds-bar.rt.stam i { background: linear-gradient(90deg, #d9a441, var(--gold)); }
.ds-bar.rt.qi i   { background: linear-gradient(90deg, #7f9ec0, #5c7d9a); }
.ds-round { font-family: var(--font-brush); font-size: 1.6rem; color: var(--seal); white-space: nowrap; min-width: 92px; text-align: center; }

.ds-stage { position: relative; height: 250px; overflow: hidden;
  transition: transform 300ms cubic-bezier(.4,0,.3,1); will-change: transform;
  background: radial-gradient(ellipse at 50% 118%, rgba(160,140,100,.22), transparent 60%),
    repeating-linear-gradient(91deg, rgba(160,140,100,.05) 0 3px, transparent 3px 9px), var(--paper-warm); }
.ds-ground { position: absolute; left: 0; right: 0; bottom: 40px; height: 2px; background: rgba(43,36,29,.32); }
.ds-ground::after { content: ""; position: absolute; left: 0; right: 0; top: 6px; height: 30px; background: repeating-linear-gradient(90deg, rgba(43,36,29,.05) 0 2px, transparent 2px 22px); }
.ds-proj-layer { position: absolute; inset: 0; pointer-events: none; }

/* 파이터: left/right(%)로 거리 이동(접근/이탈), transform으로 넉백/자세 */
.ds-fighter { position: absolute; bottom: 34px; transition: left .22s cubic-bezier(.35,0,.25,1), right .22s cubic-bezier(.35,0,.25,1), transform .18s ease; }
.ds-fighter .ds-body-svg { display: block; }
.ds-fighter.B .ds-body-svg { transform: scaleX(-1); }   /* B는 좌향으로 마주봄 */
.ds-fighter .ink { fill: var(--ink); }
.ds-fighter.B .ink { fill: #3a2f26; }
.ds-limb { stroke: var(--ink); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ds-fighter.B .ds-limb { stroke: #3a2f26; }
/* 관절 인체 디테일 — 손·발끝, 도복 깃/자락 주름, 허리띠 */
.ds-body-svg .ds-hand { fill: var(--ink); }
.ds-fighter.B .ds-hand { fill: #3a2f26; }
.ds-body-svg .ds-foot { stroke: var(--ink); stroke-width: 4.4; stroke-linecap: round; fill: none; }
.ds-fighter.B .ds-foot { stroke: #3a2f26; }
.ds-body-svg .ds-gi-line { stroke: rgba(245, 239, 226, 0.9); stroke-width: 1.5; stroke-linecap: round; fill: none; }
.ds-body-svg .ds-belt { stroke: #8a2f2c; stroke-width: 2.6; stroke-linecap: round; }
.ds-body-svg .ds-belt-tail { stroke: #8a2f2c; stroke-width: 1.7; stroke-linecap: round; fill: none; }
/* 무기 부품별 스타일 — 검신은 금속빛, 자루·자루끝은 먹색 */
.ds-weapon { stroke-linecap: round; stroke-linejoin: round; }
.wp-blade { fill: #cfc7b4; stroke: #6a6357; stroke-width: 0.8; }        /* 검신(금속) */
.wp-blade.blade-heavy { fill: #bcb3a1; stroke: #59524733; }             /* 도신(넓은 외날) */
.wp-hilt { stroke: #4a3d2e; stroke-width: 2.6; fill: none; }            /* 자루 */
.wp-shaft { stroke: #5b4a33; stroke-width: 2.6; fill: none; }           /* 창 자루 */
.wp-shaft.staff { stroke: #6b5636; stroke-width: 3.4; }                 /* 봉 */
.wp-guard { stroke: #6b5636; stroke-width: 2; fill: none; }             /* 검코/호수 */
.wp-pommel { fill: #4a3d2e; }                                           /* 검파두 */
.wp-fist { fill: var(--seal); opacity: .85; }                          /* 권 */
.wp-dartset { stroke: #3a2f26; stroke-width: 2; fill: none; stroke-linecap: round; } /* 암기 */
.ds-fighter.B .wp-blade { fill: #c4bba8; }
.ds-fistmark { fill: var(--seal); opacity: .8; }
.ds-arm { transform-box: fill-box; transform-origin: 0% 60%; }
/* 분절 팔다리 — 뒷팔 스윙, 다리 스텝, 유휴 호흡 */
.ds-arm-rear { transform-box: fill-box; transform-origin: 90% 8%; }
.ds-legs { transform-box: fill-box; }
.ds-leg { transform-box: fill-box; }
.leg-rear { transform-origin: 100% 0%; }
.leg-front { transform-origin: 0% 0%; }
.ds-body { transform-box: fill-box; transform-origin: 50% 100%; animation: ds-idle 2.6s ease-in-out infinite; }
@keyframes ds-idle { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.6px); } }
.ds-fighter.down .ds-body, .ds-fighter.win .ds-body, .ds-fighter.lose .ds-body { animation: none; }
/* 공격 순간: 다리 스텝(돌진 구동) + 뒷팔 반동 */
.ds-fighter.attacking .ds-legs { animation: ds-step .46s ease; }
@keyframes ds-step { 0% { transform: translateX(0); } 35% { transform: translateX(7px); } 100% { transform: translateX(0); } }
.ds-fighter.attacking .leg-rear { animation: ds-legdrive .46s ease; }
@keyframes ds-legdrive { 0% { transform: rotate(0); } 42% { transform: rotate(-17deg); } 100% { transform: rotate(0); } }
.ds-fighter.attacking .leg-front { animation: ds-legplant .46s ease; }
@keyframes ds-legplant { 0% { transform: rotate(0); } 42% { transform: rotate(11deg); } 100% { transform: rotate(0); } }
.ds-fighter.attacking .ds-arm-rear { animation: ds-armswing .46s ease; }
@keyframes ds-armswing { 0% { transform: rotate(0); } 45% { transform: rotate(30deg); } 100% { transform: rotate(0); } }

.ds-fighter.hit { animation: ds-recoil .32s ease; }
@keyframes ds-recoil { 0% { transform: translateX(0); } 30% { transform: translateX(var(--kb, 10px)) rotate(3deg); } 100% { transform: translateX(0); } }
.ds-fighter.guard { transform: translateY(-2px) scaleX(.94); }
.ds-fighter.guard .ds-arm { transform: rotate(-52deg) translateX(-3px); }
.ds-fighter.stumble { transform: rotate(-9deg) translateY(4px); opacity: .85; }
.ds-fighter.down { transform: rotate(-15deg) translateY(12px); opacity: .68; }
.ds-fighter.cast .ds-arm { animation: ds-cast .46s ease; }
@keyframes ds-cast { 0% { transform: rotate(0); } 40% { transform: rotate(-38deg) translateX(-4px); } 100% { transform: rotate(6deg) translateX(2px); } }
.ds-fighter.win { transform: translateY(-4px) scaleY(1.05); }
.ds-fighter.lose { opacity: .5; transform: rotate(-7deg) translateY(6px); }

/* 무기별 공격 모션 (팔+무기 그룹 회전/이동) */
.atk-thrust .ds-arm { animation: ds-thrust .42s ease; }
@keyframes ds-thrust { 0% { transform: translateX(-4px); } 45% { transform: translateX(16px); } 100% { transform: translateX(0); } }
.atk-thrustLong .ds-arm { animation: ds-thrustlong .42s ease; }
@keyframes ds-thrustlong { 0% { transform: translateX(-6px); } 45% { transform: translateX(26px); } 100% { transform: translateX(0); } }
.atk-slash .ds-arm { animation: ds-slash .42s ease; }
@keyframes ds-slash { 0% { transform: rotate(-62deg); } 45% { transform: rotate(40deg); } 100% { transform: rotate(0); } }
.atk-sweep .ds-arm { animation: ds-sweep .44s ease; }
@keyframes ds-sweep { 0% { transform: rotate(38deg); } 50% { transform: rotate(-46deg); } 100% { transform: rotate(0); } }
.atk-punch .ds-arm { animation: ds-punch .30s ease; }
@keyframes ds-punch { 0% { transform: translateX(-3px); } 40% { transform: translateX(18px) scaleX(1.12); } 100% { transform: translateX(0); } }
.atk-jab .ds-arm { animation: ds-jab .26s ease; }
@keyframes ds-jab { 0% { transform: translateX(-2px); } 45% { transform: translateX(12px); } 100% { transform: translateX(0); } }
.atk-throw .ds-arm { animation: ds-throw .32s ease; }
@keyframes ds-throw { 0% { transform: rotate(-40deg); } 55% { transform: rotate(28deg) translateX(6px); } 100% { transform: rotate(0); } }
/* 추가 변형 모션 — 내려베기(chop)·낮은 찌르기(thrustLow)·훅(hook)·회전 후리기(spinsweep) */
.atk-chop .ds-arm { animation: ds-chop .44s ease; }
@keyframes ds-chop { 0% { transform: rotate(-78deg) translateY(-4px); } 50% { transform: rotate(46deg) translateY(2px); } 100% { transform: rotate(0); } }
.atk-thrustLow .ds-arm { animation: ds-thrustlow .40s ease; }
@keyframes ds-thrustlow { 0% { transform: translate(-4px,4px) rotate(14deg); } 45% { transform: translate(18px,6px) rotate(16deg); } 100% { transform: rotate(0); } }
.atk-hook .ds-arm { animation: ds-hook .32s ease; }
@keyframes ds-hook { 0% { transform: rotate(-30deg) translateX(-3px); } 45% { transform: rotate(18deg) translateX(15px); } 100% { transform: rotate(0); } }
.atk-spinsweep .ds-arm { animation: ds-spinsweep .5s ease; }
@keyframes ds-spinsweep { 0% { transform: rotate(60deg); } 45% { transform: rotate(-70deg) translateX(4px); } 75% { transform: rotate(20deg); } 100% { transform: rotate(0); } }
/* 회전 후리기는 몸통도 살짝 돈다 */
.atk-spinsweep .ds-body { animation: ds-spin .5s ease; }
@keyframes ds-spin { 0% { transform: rotate(0); } 45% { transform: rotate(-10deg); } 100% { transform: rotate(0); } }

/* 점프해서 피하기 — 수비자가 몸을 날려 회피 */
.ds-fighter.evade { animation: ds-evade .5s cubic-bezier(.3,.7,.3,1); }
@keyframes ds-evade {
  0% { transform: translateY(0) rotate(0); }
  35% { transform: translateY(-26px) rotate(-8deg); }
  60% { transform: translateY(-20px) rotate(-6deg); }
  100% { transform: translateY(0) rotate(0); }
}

/* 무공 성질 콜아웃 */
.ds-callout { position: absolute; bottom: 108px; left: 50%; transform: translateX(-50%); font-family: var(--font-brush); font-size: 2.1rem; font-weight: 700; opacity: 0; white-space: nowrap; pointer-events: none; }
.ds-callout.show { opacity: 1; animation: ds-pop .5s ease; }
.ds-callout.geok { color: var(--ink); }
.ds-callout.pa { color: var(--seal); }
.ds-callout.su { color: var(--gold); }
.ds-callout.ban { color: var(--jade); }
.ds-callout.nan { color: #7a5ba1; }

/* 기합·무공명·성격 대사 말풍선 — 캐릭터 머리 위에서 팝업 */
.ds-shout {
  position: absolute; bottom: 136px; left: 50%;
  transform: translateX(-50%) scale(.6);
  max-width: 160px; padding: 3px 9px;
  background: var(--paper-card); border: 2px solid var(--seal); border-radius: 12px;
  font-family: var(--font-brush); font-size: 1.02rem; line-height: 1.12; color: var(--seal);
  white-space: nowrap; opacity: 0; pointer-events: none; z-index: 6;
  box-shadow: 0 2px 5px rgba(0,0,0,.14);
}
.ds-shout::after {
  content: ""; position: absolute; left: 50%; bottom: -6px; width: 9px; height: 9px;
  background: inherit; border-right: 2px solid var(--seal); border-bottom: 2px solid var(--seal);
  transform: translateX(-50%) rotate(45deg);
}
.ds-shout.show { animation: ds-shout-pop 2200ms cubic-bezier(.3,1.5,.5,1) both; }
.ds-shout.big { font-size: 1.3rem; color: #fff; background: var(--seal); }
.ds-shout.kihap { color: var(--ink); border-color: var(--ink-soft); }
.ds-shout.kihap::after { border-color: var(--ink-soft); }
.ds-shout.line {
  font-family: var(--font-body); font-size: .84rem; color: var(--ink);
  border-color: var(--gold); white-space: normal; text-align: center;
}
.ds-shout.line::after { border-color: var(--gold); }
@keyframes ds-shout-pop {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(.5) rotate(-4deg); }
  7%   { opacity: 1; transform: translateX(-50%) translateY(-4px) scale(1.12) rotate(2deg); }
  14%  { opacity: 1; transform: translateX(-50%) translateY(-6px) scale(1) rotate(0); }
  80%  { opacity: 1; transform: translateX(-50%) translateY(-7px) scale(1); }   /* 읽는 동안 유지 */
  100% { opacity: 0; transform: translateX(-50%) translateY(-15px) scale(.98); }
}
@keyframes ds-pop { 0% { transform: translateX(-50%) scale(.6); } 40% { transform: translateX(-50%) scale(1.15); } 100% { transform: translateX(-50%) scale(1); } }

/* 발경 투사체 (검기·장풍·도기…) */
.ds-proj { position: absolute; transform: translate(-50%,-50%); transition: left .30s linear; }
.ds-proj svg { display: block; }
.ds-proj.to-left svg { transform: scaleX(-1); }
.ds-proj path, .ds-proj circle { fill: none; }
.p-sword path { stroke: #5a7d9a; stroke-width: 3; fill: rgba(90,125,154,.18); filter: drop-shadow(0 0 3px rgba(90,125,154,.5)); }
.p-blade path { stroke: #4a4038; stroke-width: 2; fill: rgba(74,64,56,.25); }
.p-spear path { stroke: #7a6a3a; stroke-width: 3; }
.p-staff circle { stroke: #6b5636; stroke-width: 3; opacity: .7; }
.p-palm circle { stroke: var(--seal); stroke-width: 2.5; opacity: .7; fill: rgba(161,60,47,.10); }
.p-dart path { fill: #3a2f26; stroke: none; }

.ds-clash { position: absolute; top: 42%; left: 50%; transform: translate(-50%,-50%) scale(0); font-family: var(--font-brush); font-size: 4rem; color: var(--seal); opacity: 0; pointer-events: none; }
.ds-clash.show { animation: ds-clash .45s ease; }
@keyframes ds-clash { 0% { transform: translate(-50%,-50%) scale(.2); opacity: 0; } 30% { transform: translate(-50%,-50%) scale(1.3); opacity: .9; } 100% { transform: translate(-50%,-50%) scale(2); opacity: 0; } }

.ds-dmg-num { position: absolute; font-weight: 800; font-size: 1.1rem; color: var(--seal); animation: ds-float 1s ease forwards; pointer-events: none; text-shadow: 0 1px 0 rgba(255,253,246,.6); }
.ds-dmg-num.big { font-size: 1.9rem; color: var(--seal-dark); }
@keyframes ds-float { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-40px); } }

/* 유효 타격 임팩트 별 — 작은 별(일반) / 큰 별 + 충격파 링(큰 데미지) */
.ds-impact { position: absolute; transform: translate(-50%,-50%); pointer-events: none; z-index: 5; }
.ds-impact svg { display: block; overflow: visible; }
.ds-impact-star { fill: #fff6d8; stroke: var(--gold); stroke-width: 2; transform-box: fill-box; transform-origin: center; animation: ds-impact-pop .42s ease forwards; }
.ds-impact.big .ds-impact-star { fill: #fff; stroke: var(--seal); stroke-width: 2.5; animation: ds-impact-pop .56s ease forwards; }
.ds-impact-spark { stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; transform-box: fill-box; transform-origin: center; animation: ds-impact-spark .42s ease forwards; }
.ds-impact.big .ds-impact-spark { stroke: var(--seal); animation: ds-impact-spark .56s ease forwards; }
.ds-impact-ring { fill: none; stroke: var(--seal); stroke-width: 3; opacity: .8; transform-box: fill-box; transform-origin: center; animation: ds-impact-ring .56s ease forwards; }
@keyframes ds-impact-pop {
  0% { transform: scale(.2) rotate(-20deg); opacity: 0; }
  35% { transform: scale(1.15) rotate(6deg); opacity: 1; }
  100% { transform: scale(.95) rotate(0); opacity: 0; }
}
@keyframes ds-impact-spark { 0% { transform: scale(.3); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }
@keyframes ds-impact-ring { 0% { transform: scale(.2); opacity: .85; } 100% { transform: scale(2.6); opacity: 0; } }

/* 모바일: 캐릭이 화면 대비 커서 겹치지 않도록 살짝 축소 */
body.mobile-layout .ds-body-svg { width: 64px; height: 70px; }

.ds-controls { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-top: 1px solid var(--line-soft); background: rgba(43,36,29,.03); }
.ds-feed { font-size: .84rem; color: var(--ink-soft); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 하단 전투 로그 4줄 */
.ds-log { height: 6.4em; overflow-y: auto; padding: 8px 14px 10px; border-top: 1px solid var(--line-soft); background: rgba(43,36,29,.05); font-size: .82rem; line-height: 1.55; scroll-behavior: smooth; }
.ds-log-line { display: flex; gap: 7px; align-items: baseline; color: var(--ink-soft); padding: 1px 0; }
.ds-log-mark { font-family: var(--font-brush); font-size: 1rem; width: 1.1em; text-align: center; flex-shrink: 0; color: var(--ink-faint); }
.ds-log-mark.neutral { color: var(--ink-faint); }
.ds-log-line.k-geok .ds-log-mark { color: var(--ink); }
.ds-log-line.k-pa .ds-log-mark { color: var(--seal); }
.ds-log-line.k-su .ds-log-mark { color: var(--gold); }
.ds-log-line.k-ban .ds-log-mark { color: var(--jade); }
.ds-log-line.k-nan .ds-log-mark { color: #7a5ba1; }
.duel-select { font-family: var(--font-body); font-size: 1rem; padding: 6px 10px; border: 1px solid var(--line); border-radius: 6px; background: rgba(255,253,246,.8); color: var(--ink); max-width: 280px; }

/* ============================================================
   로그인 및 슬롯 선택 화면 밋밋하고 깔끔한 현대식 디자인 오버라이드
   ============================================================ */
#auth-screen {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Malgun Gothic", sans-serif !important;
  background-color: #f3f4f6 !important; /* light neutral background */
  background-image: none !important; /* remove paper texture */
}

#auth-screen .intro-scroll {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03) !important;
  padding: 32px 40px 40px !important;
}

#auth-screen .intro-scroll::before,
#auth-screen .intro-scroll::after {
  display: none !important; /* remove scroll axes */
}

#auth-screen h1,
#auth-screen h2,
#auth-screen h3,
#auth-screen .intro-title,
#auth-screen .field-label,
#auth-screen .align-btn .align-name,
#auth-screen button,
#auth-screen input,
#auth-screen select {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Malgun Gothic", sans-serif !important;
  letter-spacing: normal !important;
  text-indent: 0 !important;
}

#auth-screen .intro-title {
  font-size: 2.2rem !important;
  font-weight: 700 !important;
  color: #111827 !important;
  margin-bottom: 6px !important;
}

#auth-screen .intro-sub {
  font-size: 0.95rem !important;
  color: #4b5563 !important;
  margin-bottom: 28px !important;
}

#auth-screen .field-label {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 8px !important;
}

#auth-screen input[type="email"],
#auth-screen input[type="password"] {
  width: 100% !important;
  font-family: inherit !important;
  font-size: 0.95rem !important;
  padding: 10px 14px !important;
  color: #1f2937 !important;
  background: #f9fafb !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  outline: none !important;
  transition: border-color 0.15s ease !important;
}

#auth-screen input[type="email"]:focus,
#auth-screen input[type="password"]:focus {
  border-color: #3b82f6 !important;
  background: #ffffff !important;
}

/* align-btn overrides (slots, version selection) */
#auth-screen .align-btn {
  background: #ffffff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  padding: 14px 18px !important;
  transition: all 0.15s ease !important;
  box-shadow: none !important;
  cursor: pointer;
}

#auth-screen .align-btn:hover {
  border-color: #d1d5db !important;
  background: #f9fafb !important;
  transform: none !important;
}

#auth-screen .align-btn.selected {
  border-color: #2563eb !important;
  background: #eff6ff !important;
  box-shadow: 0 0 0 1px #2563eb !important;
}

#auth-screen .align-btn .align-name {
  font-size: 1rem !important;
  font-weight: 600 !important;
  color: #1f2937 !important;
  margin-bottom: 4px !important;
}

#auth-screen .align-btn.selected .align-name {
  color: #1d4ed8 !important;
}

#auth-screen .align-btn .align-desc {
  font-size: 0.8rem !important;
  color: #4b5563 !important;
}

#auth-screen .sect-slot-list {
  display: grid;
  gap: 8px;
  width: 100%;
  max-height: min(42vh, 360px);
  overflow-y: auto;
}

#auth-screen .sect-access-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  align-items: stretch;
  width: 100%;
}

#auth-screen .sect-access-row .mode-btn {
  min-width: 0;
  text-align: left;
}

#auth-screen .release-sect-btn {
  align-self: stretch;
  min-width: 58px;
  padding: 0 12px;
  border: 1px solid #cbd5e1;
  border-radius: 6px;
  background: #f8fafc;
  color: #475569;
  font-weight: 700;
  cursor: pointer;
}

#auth-screen .release-sect-btn:hover {
  border-color: #ef4444;
  background: #fff7f7;
  color: #b91c1c;
}

#auth-screen .version-choice .align-btn {
  padding: 10px !important;
}

#auth-screen .version-choice .align-btn span {
  font-size: 0.9rem !important;
  font-weight: 600 !important;
}

/* brush-btn overrides for auth screen */
#auth-screen .brush-btn {
  border-radius: 6px !important;
  font-size: 0.95rem !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  letter-spacing: normal !important;
  box-shadow: none !important;
  cursor: pointer;
}

#auth-screen #btn-login,
#auth-screen #btn-enter-mode {
  background: #1f2937 !important; /* dark slate/gray */
  color: #ffffff !important;
}

#auth-screen #btn-login:hover,
#auth-screen #btn-enter-mode:hover {
  background: #374151 !important;
  transform: none !important;
}

#auth-screen .brush-btn.ghost {
  background: #ffffff !important;
  color: #374151 !important;
  border: 1px solid #d1d5db !important;
}

#auth-screen .brush-btn.ghost:hover {
  background: #f9fafb !important;
  border-color: #c4b5fd; /* mild color on hover */
  transform: none !important;
}

#auth-screen #btn-google-login {
  border: 1px solid #d1d5db !important;
  background: #ffffff !important;
  color: #374151 !important;
}
#auth-screen #btn-google-login:hover {
  background: #f9fafb !important;
  transform: none !important;
}

/* ============================================================
   전용 접속 주소 / 모드별 화면
   ============================================================ */
.mode-address-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.mode-address-strip a {
  color: #374151;
  background: #f9fafb;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 6px 9px;
  font-size: 0.78rem;
  font-weight: 600;
  text-decoration: none;
}

.mode-address-strip a:hover {
  color: #111827;
  border-color: #9ca3af;
  background: #fff;
}

body.quiet-layout {
  --paper: #f5f6f8;
  --paper-warm: #eceff3;
  --paper-card: #ffffff;
  --ink: #1f2937;
  --ink-soft: #4b5563;
  --ink-faint: #6b7280;
  --seal: #374151;
  --seal-dark: #111827;
  --gold: #6b7280;
  --jade: #25635a;
  --line: rgba(31, 41, 55, 0.24);
  --line-soft: rgba(31, 41, 55, 0.12);
  background: #f5f6f8;
  background-image: none;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Malgun Gothic", sans-serif;
}

body.quiet-layout h1,
body.quiet-layout h2,
body.quiet-layout h3,
body.quiet-layout .brush,
body.quiet-layout .tab-btn,
body.quiet-layout .field-label,
body.quiet-layout .sect-title h1,
body.quiet-layout .hud-month {
  font-family: inherit;
  letter-spacing: 0;
}

body.quiet-layout .topbar,
body.quiet-layout .utility-bar,
body.quiet-layout .tabbar,
body.quiet-layout .card,
body.quiet-layout .map-frame,
body.quiet-layout .placeholder {
  box-shadow: none;
}

body.quiet-layout .topbar {
  background: #ffffff;
  border-bottom: 1px solid #d1d5db;
}

body.quiet-layout .tabbar {
  background: #f9fafb;
  border-bottom: 1px solid #d1d5db;
}

body.quiet-layout .tab-btn {
  font-size: 0.96rem;
  font-weight: 700;
  padding: 11px 16px;
}

body.quiet-layout .sect-seal {
  border-radius: 6px;
  transform: none;
  font-family: inherit;
  font-weight: 800;
}

body.quiet-layout .event-ticker,
body.quiet-layout .end-turn-arrow {
  animation: none;
}

body.mobile-layout .utility-bar {
  position: static;
  flex-direction: column;
  align-items: stretch;
  gap: 3px;
  padding: 3px 4px;
}

body.mobile-layout .utility-left,
body.mobile-layout .utility-center,
body.mobile-layout .utility-right {
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 3px;
}

body.mobile-layout .util-btn {
  flex: 1 1 auto;
  justify-content: center;
  min-height: 28px;
  padding: 3px 5px;
  font-size: 0.72rem;
  border-radius: 3px;
}

body.mobile-layout .topbar {
  align-items: flex-start;
  gap: 5px;
  padding: 6px 6px 5px;
}

body.mobile-layout .sect-seal {
  width: 34px;
  height: 34px;
  font-size: 1.18rem;
}

body.mobile-layout .sect-title h1 {
  font-size: 1.22rem;
  line-height: 1.05;
}

body.mobile-layout .sect-title span {
  font-size: 0.76rem;
}

body.mobile-layout .hud {
  width: 100%;
  margin-left: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 3px;
}

body.mobile-layout .hud-item {
  min-width: 0;
  padding: 3px 2px;
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  background: rgba(255, 253, 246, 0.48);
}

body.mobile-layout .hud-item .hud-key {
  font-size: 0.78rem;
}

body.mobile-layout .hud-item .hud-val {
  font-size: 0.78rem;
}

body.mobile-layout .topbar-right {
  width: 100%;
  justify-content: space-between;
  gap: 6px;
}

body.mobile-layout .hud-month {
  font-size: 1.16rem;
  white-space: nowrap;
}

body.mobile-layout .end-turn-btn {
  min-height: 32px;
  padding: 5px 9px 4px;
  font-size: 1rem;
  border-radius: 4px;
}

body.mobile-layout .tabbar {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  padding: 0;
  overflow: hidden;
  border-top: 2px solid var(--ink);
}

body.mobile-layout .tab-btn {
  min-width: 0;
  width: 100%;
  font-family: var(--font-mobile-menu);
  font-size: clamp(0.8rem, 3.35vw, 1rem);
  line-height: 1;
  letter-spacing: 0;
  padding: 8px 1px 7px;
  border-bottom-width: 3px;
  text-align: center;
  overflow: hidden;
  text-overflow: clip;
}

body.mobile-layout .tab-content {
  padding: 7px 6px 12px;
}

body.mobile-layout .pane-title {
  font-size: 1.42rem;
  margin-bottom: 1px;
}

body.mobile-layout .pane-desc {
  margin-bottom: 7px;
  font-size: 0.78rem;
}

/* 모바일 강호도: 지도와 도시 상세를 짧고 조밀하게 */
body.mobile-layout .map-layout {
  gap: 6px;
}

body.mobile-layout .map-layout .map-frame {
  height: 310px !important;
  min-height: 0;
  padding: 4px;
}

body.mobile-layout .map-frame svg {
  width: 100%;
  height: 100%;
}

body.mobile-layout .city-detail .city-head {
  gap: 6px;
  margin-bottom: 3px;
}

body.mobile-layout .city-detail .city-head h3 {
  font-size: 1.15rem;
  line-height: 1.05;
}

body.mobile-layout .city-tag-row,
body.mobile-layout .city-specialties {
  gap: 3px;
  margin-top: 4px;
}

body.mobile-layout .city-note {
  margin-top: 4px;
  line-height: 1.32;
  font-size: 0.72rem;
}

body.mobile-layout .city-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 5px;
  gap: 4px;
}

body.mobile-layout .city-detail .city-summary-card {
  padding: 6px 7px;
}

body.mobile-layout .city-summary-card .city-summary-section {
  padding: 6px 7px;
}

body.mobile-layout .city-summary-card .city-summary-section h4 {
  font-size: 0.98rem;
  margin-bottom: 3px;
}

body.mobile-layout .city-stat-list,
body.mobile-layout .sect-status-grid {
  gap: 4px;
}

body.mobile-layout .city-stat {
  padding-bottom: 2px;
}

body.mobile-layout .city-stat strong,
body.mobile-layout .merchant-contract-box strong {
  font-size: 0.74rem;
}

body.mobile-layout .merchant-mini-list,
body.mobile-layout .influence-legend {
  gap: 3px;
}

body.mobile-layout .merchant-mini-list li,
body.mobile-layout .influence-legend li {
  font-size: 0.68rem;
  line-height: 1.18;
}

/* 모바일 임무: 네 분류를 좌우 레일로 넘기고 각 분류 안은 세로 스크롤 */
body.mobile-layout .mission-layout {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  overflow: hidden;
}

/* 임무 분류 레일: 데스크탑 및 모바일 공용 (세로/가로 스크롤 가능) */
.mission-mobile-rail {
  display: flex;
  gap: 10px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

.mission-mobile-section {
  flex: 0 0 310px; /* 데스크탑 기본 크기 */
  min-width: 0;
  scroll-snap-align: start;
  border: 1px solid var(--line-soft);
  border-radius: 5px;
  background: rgba(255,253,246,0.34);
  padding: 8px;
}

body.mobile-layout .mission-mobile-section {
  flex: 0 0 min(76vw, 290px); /* 모바일 크기 개별 조절 */
}

.mission-mobile-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  margin-bottom: 5px;
}

.mission-mobile-head h3 {
  margin: 0;
  font-size: 0.98rem;
  line-height: 1.05;
}

.mission-mobile-list {
  display: grid;
  gap: 5px;
  max-height: 520px; /* 데스크탑 세로 스크롤 기준 */
  overflow-y: auto;
  padding-right: 4px;
  -webkit-overflow-scrolling: touch;
}

body.mobile-layout .mission-mobile-list {
  max-height: 50vh; /* 모바일 세로 스크롤 기준 */
}

.mission-mobile-list .mission-card {
  padding: 7px;
  border-radius: 5px;
}

/* 레일 칸은 데스크탑에서도 310px로 좁다. 좌우 배치(설명 vs 220px 고정폭 메타)를
   그대로 쓰면 설명 칸이 몇십px로 짓눌려 여러 줄로 접히며 카드가 세로로 길어진다.
   메타를 설명 아래로 내려 카드 전체 폭을 쓰게 한다. */
.mission-mobile-section .mission-card-top,
.mission-mobile-section .mission-card-bottom {
  flex-direction: column;
  align-items: flex-start;
}
.mission-mobile-section .mission-card-top { margin-bottom: 4px; }
.mission-mobile-section .mission-title-row { width: 100%; }
.mission-mobile-section .mission-card-meta {
  flex: 0 1 auto;
  width: 100%;
  align-items: flex-start;
  text-align: left;
  gap: 3px;
}
.mission-mobile-section .mission-badges,
.mission-mobile-section .mission-card .m-rewards {
  justify-content: flex-start;
}

body.mobile-layout .mission-card:hover {
  transform: none;
}

body.mobile-layout .mission-card-row {
  gap: 5px;
}

body.mobile-layout .mission-card-top,
body.mobile-layout .mission-card-bottom {
  align-items: flex-start;
  flex-direction: column;
}

body.mobile-layout .mission-card-top {
  margin-bottom: 4px;
}

body.mobile-layout .mission-title-row {
  width: 100%;
  gap: 4px;
}

body.mobile-layout .mission-title-row h3 {
  font-size: 0.92rem;
  line-height: 1.12;
}

body.mobile-layout .mission-badges,
body.mobile-layout .mission-card .m-rewards {
  justify-content: flex-start;
}

body.mobile-layout .mission-desc {
  font-size: 0.68rem;
  line-height: 1.22;
}

body.mobile-layout .mission-card-meta {
  flex: 0 1 auto;
  width: 100%;
  align-items: flex-start;
  text-align: left;
  gap: 3px;
}

body.mobile-layout .mission-card-meta .small,
body.mobile-layout .mission-card .tag {
  font-size: 0.62rem;
  line-height: 1.08;
}

body.mobile-layout .month-log {
  margin-top: 7px !important;
}

body.mobile-layout .month-mission-list {
  max-height: 28vh;
  overflow-y: auto;
}

/* 모바일 비무: 양쪽 카드를 대칭·컴팩트하게 — 드롭박스는 이름만, 상세는 i 버튼으로 */
body.mobile-layout .duel-arena { gap: 8px; }
body.mobile-layout .duel-arena .duel-select {
  min-width: 0;
  max-width: 100%;
  font-size: 0.78rem;
  padding: 4px 6px;
}
body.mobile-layout .duel-foe-name { font-size: 1.05rem; }
body.mobile-layout .duel-pick-row { gap: 4px; }

/* 모바일 금고: 요약 카드는 9개가 두 줄에 보이도록 축소 */
body.mobile-layout .fin-summary.fin-summary {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 7px;
}

body.mobile-layout .fin-summary .fin-box {
  padding: 5px 2px;
  min-width: 0;
}

body.mobile-layout .fin-box .fin-key {
  font-size: 0.62rem;
  line-height: 1.05;
  white-space: nowrap;
}

body.mobile-layout .fin-box .fin-val {
  display: block;
  margin-top: 1px;
  font-size: 0.7rem;
  line-height: 1.05;
  white-space: nowrap;
}

body.mobile-layout .payroll-card {
  gap: 6px;
  margin-bottom: 8px;
}

body.mobile-layout .payroll-card > h3 {
  margin: 0 0 2px !important;
  font-size: 1rem;
}

body.mobile-layout .payroll-head {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 6px;
}

body.mobile-layout .payroll-head .small,
body.mobile-layout .payroll-head strong {
  font-size: 0.72rem;
  line-height: 1;
  white-space: nowrap;
}

body.mobile-layout .payroll-head strong {
  margin-left: auto;
}

body.mobile-layout .payroll-slider-row {
  gap: 5px;
  margin-bottom: 7px !important;
}

body.mobile-layout .payroll-slider-row .small {
  font-size: 0.62rem;
}

body.mobile-layout .payroll-card .payroll-breakdown {
  grid-template-columns: 1fr;
  gap: 3px;
  padding-top: 5px !important;
}

body.mobile-layout .payroll-card .payroll-line {
  grid-template-columns: minmax(52px, 0.82fr) auto minmax(0, 1.35fr);
  align-items: center;
  gap: 4px;
  padding: 4px 5px;
  border-radius: 4px;
}

body.mobile-layout .payroll-line span:first-child,
body.mobile-layout .payroll-line strong,
body.mobile-layout .payroll-line .small {
  font-size: 0.62rem;
  line-height: 1.05;
  white-space: nowrap;
}

body.mobile-layout .payroll-line strong {
  font-size: 0.64rem;
}

body.mobile-layout .payroll-line .small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile-layout .grid,
body.mobile-layout .fin-summary,
body.mobile-layout .payroll-breakdown,
body.mobile-layout .city-summary-grid {
  gap: 6px;
}

body.mobile-layout .card,
body.mobile-layout .map-frame,
body.mobile-layout .city-summary-section,
body.mobile-layout .placeholder {
  padding: 8px 9px;
  border-radius: 5px;
}

body.mobile-layout .card h3 {
  font-size: 1.08rem;
  margin-bottom: 4px;
}

body.mobile-layout .grid.cols-2,
body.mobile-layout .grid.cols-3,
body.mobile-layout .members-layout,
body.mobile-layout .dojo-layout,
body.mobile-layout .map-layout {
  grid-template-columns: 1fr;
}

body.mobile-layout .members-layout {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: auto;
  min-height: 0;
  overflow: visible;
}

/* 모바일 조직 탭: 위는 조직도 캔버스, 아래는 문도 카드 레일 */
body.mobile-layout .org-chart-pane,
body.mobile-layout .members-roster-pane {
  height: auto;
  min-height: 0;
  padding-right: 0;
  overflow: hidden;
}

body.mobile-layout .org-chart-pane {
  /* 조직도를 세로로 약 50pt 더 길게 + 상하 스크롤 허용(좌우도 유지) */
  max-height: calc(42vh + 50px);
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  border-bottom: 1px solid var(--line-soft);
  padding-bottom: 3px;
}

body.mobile-layout .org-chart {
  min-width: 760px;
  gap: 3px;
}

body.mobile-layout .org-infrastructure-status {
  position: sticky;
  left: 0;
  z-index: 2;
  width: min(100vw - 18px, 390px);
  grid-template-columns: minmax(120px, 1fr) auto;
  gap: 4px 7px;
  padding: 4px 6px;
  box-sizing: border-box;
}
body.mobile-layout .org-infrastructure-status > span { grid-column: 1 / -1; font-size: 0.64rem; }
body.mobile-layout .org-infrastructure-status .brush-btn { grid-column: 2; grid-row: 1; }

body.mobile-layout .org-chart .members-pane-head,
body.mobile-layout .members-roster-pane .members-pane-head {
  position: sticky;
  left: 0;
  z-index: 2;
  width: min(100vw - 12px, 390px);
  margin-bottom: 3px;
  padding: 0 2px;
  background: var(--paper);
  align-items: baseline;
  flex-direction: row !important;
  justify-content: flex-start;
  gap: 8px;
}

body.mobile-layout .members-pane-head h3 {
  font-size: 0.92rem;
  line-height: 1.05;
  white-space: nowrap;
}

body.mobile-layout .org-chart .members-pane-head .small {
  font-size: 0.72rem;
  line-height: 1.1;
  white-space: nowrap;
}

body.mobile-layout .members-pane-actions {
  gap: 4px;
}

body.mobile-layout .members-pane-actions .small {
  font-size: 0.68rem;
}

body.mobile-layout .members-pane-actions .brush-btn {
  padding: 3px 7px;
  font-size: 0.78rem;
}

body.mobile-layout .org-leader-card {
  display: inline-flex;
  align-items: baseline;
  gap: 7px;
  min-width: 265px;
  padding: 5px 8px 4px;
  border-width: 1.5px;
  border-radius: 5px;
  box-shadow: none;
}

body.mobile-layout .org-leader-card strong {
  order: 1;
  font-family: var(--font-mobile-menu);
  font-size: 0.98rem;
  line-height: 1;
  white-space: nowrap;
}

body.mobile-layout .org-leader-card span:first-child {
  order: 2;
  font-size: 0.68rem;
  white-space: nowrap;
}

body.mobile-layout .org-leader-card span:last-child {
  order: 3;
  font-size: 0.68rem;
  white-space: nowrap;
}

body.mobile-layout .org-dept-list {
  gap: 5px;
  margin-top: 5px;
  padding-bottom: 4px;
  overflow-x: visible;
}

body.mobile-layout .org-dept-section {
  flex: 0 0 142px;
  gap: 3px;
  max-height: 255px;
  padding: 4px;
  border-radius: 5px;
  box-shadow: none;
  overflow: hidden;
}

body.mobile-layout .org-dept-header {
  gap: 4px;
  padding-bottom: 3px;
  margin-bottom: 3px;
}

body.mobile-layout .org-dept-title {
  font-family: var(--font-mobile-menu);
  font-size: 0.82rem !important;
  letter-spacing: 0;
}

body.mobile-layout .policy-tag {
  font-size: 0.58rem !important;
  padding: 1px 3px !important;
}

body.mobile-layout .org-dept-header .brush-btn {
  padding: 1px 3px !important;
  font-size: 0.58rem !important;
}

body.mobile-layout .org-dept-effect {
  margin-bottom: 2px !important;
  padding: 1px 3px !important;
  font-size: 0.6rem !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile-layout .org-dept-slots {
  gap: 3px;
}

body.mobile-layout .org-slot {
  min-height: 42px;
  gap: 2px;
  padding: 3px;
  border-radius: 4px;
}

body.mobile-layout .org-slot.unassigned {
  min-height: 42px !important;
  max-height: 205px;
  overflow-y: auto;
}

body.mobile-layout .org-slot-head {
  gap: 4px;
}

body.mobile-layout .org-slot-head h4 {
  font-size: 0.72rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile-layout .org-slot-head .small {
  font-size: 0.62rem;
}

body.mobile-layout .org-slot-members {
  gap: 2px;
}

body.mobile-layout .org-member-chip {
  min-width: 0;
  padding: 2px 3px;
  border-radius: 3px;
}

body.mobile-layout .org-member-chip-top {
  font-size: 0.62rem;
}

body.mobile-layout .org-member-chip-stats {
  font-size: 0.54rem;
  overflow: hidden;
  text-overflow: ellipsis;
}

body.mobile-layout .member-compact-list {
  display: flex;
  flex-direction: row;
  gap: 6px;
  max-height: none;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 2px 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

body.mobile-layout .member-row {
  /* 문도 상황 캐릭 카드 좌우 폭을 기존 138px의 75%(≈104px)로 컴팩트하게 */
  flex: 0 0 104px;
  width: 104px;
  min-height: 222px;
  align-content: start;
  gap: 4px;
  padding: 7px;
  border-radius: 6px;
  scroll-snap-align: start;
  overflow: hidden;
}

body.mobile-layout .member-row * {
  min-width: 0;
}

body.mobile-layout .member-row-top {
  display: grid;
  grid-template-columns: 1fr;
  gap: 3px;
}

body.mobile-layout .member-row-top strong {
  font-size: 0.94rem;
  line-height: 1.1;
  overflow-wrap: anywhere;
}

body.mobile-layout .member-row-top .tag,
body.mobile-layout .member-row-top .muted {
  width: max-content;
  max-width: 100%;
  font-size: 0.62rem;
}

body.mobile-layout .member-row-stats-fixed {
  font-size: 0.62rem !important;
  line-height: 1.28;
  white-space: normal;
  overflow-wrap: anywhere;
}

body.mobile-layout .member-row > div[style*="grid-template-columns"] {
  grid-template-columns: 1fr !important;
  gap: 2px !important;
  font-size: 0.62rem !important;
}

body.mobile-layout .member-row-line {
  font-size: 0.64rem;
  line-height: 1.2;
  max-width: 100%;
}

body.mobile-layout .assignment-effects {
  display: none;
}

body.mobile-layout .member-detail-modal {
  width: calc(100vw - 12px) !important;
  max-width: 390px !important;
  max-height: 98vh !important;
  padding: 4px 5px !important;
  border-radius: 7px !important;
  overflow-y: auto !important;
  position: relative;
}

body.mobile-layout .member-detail-modal .modal-actions {
  position: absolute;
  top: 3px;
  right: 5px;
  z-index: 3;
  margin-top: 0 !important;
}

body.mobile-layout .member-detail-modal .modal-actions .brush-btn {
  padding: 2px 7px;
  font-size: 0.68rem;
  border-radius: 5px;
}

body.mobile-layout .member-detail {
  gap: 4px;
  padding: 6px;
  border-radius: 6px;
  box-shadow: none;
}

body.mobile-layout .member-detail-head {
  gap: 6px;
  align-items: flex-start;
}

body.mobile-layout .member-detail-head h3 {
  font-size: 1.06rem;
  line-height: 1;
}

body.mobile-layout .member-detail-head p,
body.mobile-layout .member-detail .small,
body.mobile-layout .member-detail .muted {
  font-size: 0.64rem;
  line-height: 1.18;
}

body.mobile-layout .m-flags {
  gap: 2px;
  margin-top: 0;
}

body.mobile-layout .member-detail .tag {
  font-size: 0.58rem;
  padding: 0 5px 1px;
}

body.mobile-layout .member-trait-box {
  gap: 1px;
  padding: 4px 5px;
  border-radius: 4px;
}

body.mobile-layout .member-trait-box p {
  font-size: 0.66rem;
  line-height: 1.18;
}

body.mobile-layout .member-stats-compact {
  gap: 4px;
}

body.mobile-layout .member-stat-categories {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 3px;
}

body.mobile-layout .member-stat-category {
  gap: 1px;
  padding: 3px 4px;
  border-radius: 4px;
}

body.mobile-layout .member-stat-category strong {
  font-size: 0.58rem;
  line-height: 1.16;
}

body.mobile-layout .stat-bars {
  gap: 2px;
  padding: 4px 5px;
  border-radius: 4px;
}

body.mobile-layout .stat-bar-row {
  grid-template-columns: 2em 1fr 1.4em;
  gap: 4px;
}

body.mobile-layout .stat-bar-label,
body.mobile-layout .stat-bar-val {
  font-size: 0.58rem;
}

body.mobile-layout .stat-bar-track {
  height: 5px;
}

body.mobile-layout .stat-numbers {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 2px;
}

body.mobile-layout .stat-num-chip {
  padding: 2px;
  border-radius: 3px;
}

body.mobile-layout .stat-num-label {
  font-size: 0.5rem;
}

body.mobile-layout .stat-num-val {
  font-size: 0.58rem;
}

body.mobile-layout .member-gauge-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
}

body.mobile-layout .member-gauge-row .gauge {
  height: 5px;
}

body.mobile-layout .member-control-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 3px;
}

body.mobile-layout .member-control {
  gap: 2px;
  padding: 3px;
  border-radius: 4px;
}

body.mobile-layout .member-control select,
body.mobile-layout .member-control input {
  min-height: 20px;
  font-size: 0.58rem;
}

body.mobile-layout .salary-control-head,
body.mobile-layout .salary-control-summary {
  gap: 2px;
  font-size: 0.58rem;
}

body.mobile-layout .select-card-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 2px !important;
}

body.mobile-layout .select-card {
  min-height: 22px;
  padding: 2px;
  border-radius: 3px;
}

body.mobile-layout .select-card-name {
  font-size: 0.58rem;
}

body.mobile-layout .select-card-hint {
  display: none;
}

/* 모바일 도장 탭: 위는 편집 캔버스, 아래는 모듈/배치 카드 레일 */
body.mobile-layout .dojo-layout-plan {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

body.mobile-layout .facility-infrastructure-summary {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  padding: 4px 0 6px;
}
body.mobile-layout .facility-summary-stat { min-height: 34px; padding: 3px 5px; }
body.mobile-layout .facility-summary-stat .small { font-size: 0.62rem; }
body.mobile-layout .facility-summary-stat strong { font-size: 0.76rem; }
body.mobile-layout .facility-summary-action {
  grid-column: 1 / -1;
  justify-content: space-between;
}
body.mobile-layout .facility-tech-tree { margin: 7px 0 9px; padding: 6px 0 7px; }
body.mobile-layout .facility-tech-head { padding-bottom: 5px; }
body.mobile-layout .facility-tech-head h3 { font-size: 0.9rem; }
body.mobile-layout .facility-tech-head p { display: none; }
body.mobile-layout .facility-tech-columns {
  display: flex;
  gap: 5px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}
body.mobile-layout .facility-tech-tier {
  flex: 0 0 154px;
  min-width: 154px;
  padding: 5px;
  scroll-snap-align: start;
}
body.mobile-layout .facility-tech-tier-head { min-height: 23px; margin-bottom: 4px; font-size: 0.76rem; }
body.mobile-layout .facility-tech-node { min-height: 70px; padding: 4px 5px; }
body.mobile-layout .facility-tech-node strong { font-size: 0.75rem; }
body.mobile-layout .facility-tech-node .small,
body.mobile-layout .facility-tech-status { font-size: 0.6rem; }

body.mobile-layout .dojo-layout-plan > div {
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.mobile-layout .dojo-plan-card {
  padding: 6px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

body.mobile-layout .dojo-toolbar {
  gap: 4px;
  margin-bottom: 5px;
}

body.mobile-layout .dojo-toolbar h3 {
  font-size: 0.96rem;
}

body.mobile-layout .dojo-toolbar p,
body.mobile-layout .dojo-plan-card > p {
  display: none;
}

body.mobile-layout .dojo-toolbar-actions {
  gap: 3px;
  width: 100%;
  overflow-x: auto;
  flex-wrap: nowrap;
  padding-bottom: 2px;
}

body.mobile-layout .dojo-toolbar-actions .brush-btn {
  flex: 0 0 auto;
  padding: 3px 6px !important;
  font-size: 0.68rem !important;
  white-space: nowrap;
}

body.mobile-layout .dojo-plan-wrapper {
  max-height: 42vh;
  padding: 4px !important;
  border-radius: 5px !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

body.mobile-layout .dojo-plan {
  min-width: 360px;
  min-height: 230px;
}

body.mobile-layout .dojo-module {
  padding: 3px;
  border-radius: 4px;
}

body.mobile-layout .dojo-module .module-mark {
  font-size: 1.08rem;
}

body.mobile-layout .dojo-module .module-name {
  font-size: 0.78rem;
}

body.mobile-layout .dojo-module .module-meta {
  font-size: 0.55rem;
}

body.mobile-layout .dojo-layout-plan > div:nth-child(2) {
  display: flex;
  gap: 6px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

body.mobile-layout .dojo-layout-plan > div:nth-child(2) > .card {
  flex: 0 0 235px;
  width: 235px;
  max-height: 285px;
  overflow-y: auto;
  margin-top: 0 !important;
  scroll-snap-align: start;
}

body.mobile-layout .module-detail h3,
body.mobile-layout .facility-effect-card h3 {
  font-size: 1rem;
}

body.mobile-layout .module-detail-head h4 {
  font-size: 0.96rem;
}

body.mobile-layout .module-compact-lines,
body.mobile-layout .facility-effect-strip,
body.mobile-layout .module-member-list {
  gap: 4px;
}

body.mobile-layout .module-compact-line,
body.mobile-layout .facility-pill,
body.mobile-layout .module-member,
body.mobile-layout .deco-item {
  padding: 4px 5px;
  font-size: 0.7rem;
}

body.mobile-layout .module-member {
  grid-template-columns: 1fr;
}

/* 모바일 외교 탭: 정파/사파/상단을 병렬 가로 레일로 표시 */
body.mobile-layout .diplomacy-sections {
  display: flex;
  gap: 7px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 8px;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
}

body.mobile-layout .diplomacy-section {
  flex: 0 0 175px;
  width: 175px;
  max-height: 55vh;
  overflow-y: auto;
  padding: 7px;
  scroll-snap-align: start;
}

body.mobile-layout .diplomacy-section-head {
  display: grid;
  align-items: start;
  gap: 2px;
  margin-bottom: 5px;
}

body.mobile-layout .diplomacy-section-head h3 {
  font-size: 1rem;
}

body.mobile-layout .faction-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 5px;
  align-items: stretch;
  padding: 7px 2px;
}

body.mobile-layout .faction-name {
  min-width: 0;
  font-family: var(--font-mobile-menu);
  font-size: 0.98rem;
  line-height: 1.1;
}

body.mobile-layout .faction-meta {
  min-width: 0;
  font-size: 0.7rem;
}

body.mobile-layout .faction-meta .small,
body.mobile-layout .faction-meta .muted {
  font-size: 0.66rem;
}

body.mobile-layout .relation-scale {
  min-width: 0;
  gap: 5px;
}

body.mobile-layout .relation-scale .gauge {
  height: 7px;
}

body.mobile-layout .relation-num {
  min-width: 28px;
  font-size: 0.72rem;
}

body.mobile-layout .merchant-contract-box {
  min-width: 0;
  padding: 4px 5px;
  border-radius: 4px;
}

body.mobile-layout .merchant-contract-box strong {
  font-size: 0.72rem;
}

body.mobile-layout .faction-actions {
  gap: 4px;
  overflow-x: auto;
  flex-wrap: nowrap;
}

body.mobile-layout .faction-actions .brush-btn {
  flex: 0 0 auto;
  padding: 4px 7px;
  font-size: 0.72rem;
  white-space: nowrap;
}

body.mobile-layout .mission-layout {
  gap: 8px;
}

/* 모바일 무공 상세: 계보 아래에서 세로 공간을 과도하게 차지하지 않도록 압축 */
body.mobile-layout .martial-detail {
  padding: 8px 10px;
}

body.mobile-layout .martial-detail-head {
  gap: 6px;
  padding-bottom: 5px;
}

body.mobile-layout .martial-detail-head h2 {
  margin-top: 2px;
  margin-bottom: 2px;
  font-size: 1.35rem;
}

body.mobile-layout .martial-detail-head-side {
  gap: 4px;
}

body.mobile-layout .martial-origin,
body.mobile-layout .martial-lore,
body.mobile-layout .martial-prerequisite,
body.mobile-layout .martial-relation,
body.mobile-layout .martial-empty-note {
  margin-top: 4px;
  margin-bottom: 4px;
}

body.mobile-layout .martial-lore {
  padding-left: 7px;
}

body.mobile-layout .martial-training-strip {
  gap: 3px 8px;
  padding: 4px 0;
}

body.mobile-layout .martial-detail-section {
  margin-top: 7px;
}

body.mobile-layout .martial-detail-section h3 {
  margin-top: 0;
  margin-bottom: 2px;
  font-size: 1rem;
}

body.mobile-layout .martial-detail-section ul {
  margin-top: 2px;
  margin-bottom: 2px;
}

body.mobile-layout .martial-detail-section li + li {
  margin-top: 1px;
}

body.mobile-layout .martial-techniques {
  gap: 2px;
}

body.mobile-layout .martial-technique-row {
  gap: 5px;
  padding: 3px 0;
}

/* ============================================================
   웹 관리자 모드
   ============================================================ */
.admin-dashboard {
  min-height: 100vh;
  padding: 22px;
  overflow-y: auto;
  background: #f3f4f6;
  color: #111827;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", "Malgun Gothic", sans-serif;
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 18px;
  padding-bottom: 16px;
  border-bottom: 1px solid #d1d5db;
  margin-bottom: 18px;
}

.admin-kicker {
  color: #6b7280;
  font-size: 0.82rem;
  font-weight: 700;
  margin-bottom: 3px;
}

.admin-header h1 {
  font-family: inherit;
  font-size: 1.75rem;
  font-weight: 800;
  letter-spacing: 0;
  margin: 0;
}

.admin-subtitle {
  margin-top: 5px;
  color: #4b5563;
  font-size: 0.86rem;
}

.admin-header-actions,
.admin-panel-actions,
.admin-slot-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.admin-action-btn,
.admin-slot-controls button {
  border: 1px solid #1f2937;
  border-radius: 6px;
  background: #1f2937;
  color: #fff;
  padding: 8px 12px;
  font-size: 0.88rem;
  font-weight: 700;
}

.admin-action-btn.secondary {
  background: #fff;
  color: #1f2937;
  border-color: #d1d5db;
}

.admin-action-btn.danger,
.admin-slot-controls .admin-delete-slot-btn {
  background: #b91c1c;
  border-color: #b91c1c;
}

.admin-slot-controls .admin-save-slot-btn {
  background: #1d4ed8;
  border-color: #1d4ed8;
}

.admin-metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.admin-metric,
.admin-panel {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.admin-metric {
  padding: 14px 16px;
}

.admin-metric span {
  display: block;
  color: #6b7280;
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.admin-metric strong {
  display: block;
  color: #111827;
  font-size: 1.25rem;
  overflow-wrap: anywhere;
}

.admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(280px, 0.7fr);
  gap: 14px;
  margin-bottom: 14px;
}

.admin-panel {
  padding: 16px;
}

.admin-panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}

.admin-panel-head h2 {
  font-family: inherit;
  font-size: 1.08rem;
  font-weight: 800;
  margin: 0;
}

.admin-chip {
  border: 1px solid #bbf7d0;
  border-radius: 999px;
  background: #f0fdf4;
  color: #166534;
  padding: 3px 8px;
  font-size: 0.74rem;
  font-weight: 800;
}

.admin-chip.neutral {
  border-color: #e5e7eb;
  background: #f9fafb;
  color: #4b5563;
}

.admin-form-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.admin-form-grid label,
.admin-slot-controls label {
  display: grid;
  gap: 5px;
  color: #4b5563;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-form-grid input,
.admin-panel textarea,
.admin-panel-head input,
.admin-slot-controls input {
  width: 100%;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #fff;
  color: #111827;
  font: inherit;
  padding: 9px 10px;
}

.admin-panel textarea {
  min-height: 138px;
  resize: vertical;
}

.admin-panel-actions {
  justify-content: flex-end;
  margin-top: 12px;
}

.admin-users-panel {
  padding: 0;
  overflow: hidden;
}

.admin-users-panel .admin-panel-head {
  padding: 16px;
  margin-bottom: 0;
  border-bottom: 1px solid #e5e7eb;
}

.admin-users-panel .admin-panel-head input {
  max-width: 320px;
}

.admin-table-wrap {
  overflow-x: auto;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.admin-table th,
.admin-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 13px 14px;
  text-align: left;
  vertical-align: top;
}

.admin-table th {
  background: #f9fafb;
  color: #374151;
  font-size: 0.78rem;
  font-weight: 800;
}

.admin-table td:first-child {
  min-width: 210px;
}

.admin-table td:first-child span {
  display: block;
  margin-top: 4px;
  color: #6b7280;
  font-size: 0.76rem;
  overflow-wrap: anywhere;
}

.admin-slot-list {
  display: grid;
  gap: 9px;
  min-width: 520px;
}

.admin-slot-card {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
  padding: 10px 12px;
}

.admin-slot-card.empty {
  display: block;
  color: #9ca3af;
}

.admin-slot-summary {
  display: grid;
  gap: 3px;
}

.admin-slot-summary strong {
  color: #111827;
}

.admin-slot-summary span {
  color: #4b5563;
  font-size: 0.8rem;
}

.admin-slot-controls input {
  width: 82px;
  padding: 6px 7px;
}

.admin-empty {
  padding: 28px;
  text-align: center;
  color: #9ca3af;
}

.admin-empty.error {
  color: #b91c1c;
}

.admin-char-tabs {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--line);
  margin: 8px 0 14px;
  overflow-x: auto;
}

.admin-char-tab {
  appearance: none;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--ink-faint);
  padding: 9px 2px;
  font: inherit;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.admin-char-tab.active {
  color: var(--ink);
  border-bottom-color: var(--seal);
}

.admin-char-toolbar,
.admin-panel-actions {
  display: flex;
  align-items: end;
  gap: 8px;
  flex-wrap: wrap;
}

.admin-char-toolbar {
  margin-bottom: 10px;
}

.admin-char-toolbar input {
  min-width: 280px;
  flex: 1;
}

.admin-generation-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}

.admin-generation-grid label {
  display: grid;
  gap: 5px;
  font-size: 12px;
  font-weight: 700;
}

.admin-generation-grid input,
.admin-generation-grid select {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  box-sizing: border-box;
}

.admin-generation-profiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}

.admin-generation-profile {
  padding: 10px;
  border-right: 1px solid var(--line);
  min-width: 0;
}

.admin-generation-profile:last-child {
  border-right: 0;
}

.admin-generation-profile strong,
.admin-generation-profile span {
  display: block;
}

.admin-generation-profile span {
  margin-top: 3px;
  font-size: 11px;
  color: var(--ink-faint);
}

.admin-generation-profile.active {
  background: var(--paper-warm);
  box-shadow: inset 0 -2px 0 var(--seal);
}

.admin-integrity-output {
  min-height: 220px;
  max-height: 460px;
  overflow: auto;
  padding: 12px;
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  white-space: pre-wrap;
  font-size: 12px;
}

@media (max-width: 920px) {
  .admin-dashboard {
    padding: 12px;
  }

  .admin-header,
  .admin-layout,
  .admin-slot-card {
    grid-template-columns: 1fr;
  }

  .admin-header {
    display: grid;
  }

  .admin-metric-grid,
  .admin-form-grid {
    grid-template-columns: 1fr;
  }

  .admin-slot-list {
    min-width: 0;
  }

  .admin-users-panel .admin-panel-head {
    display: grid;
  }

  .admin-users-panel .admin-panel-head input {
    max-width: none;
  }

  .admin-generation-grid,
  .admin-generation-profiles {
    grid-template-columns: 1fr;
  }

  .admin-generation-profile {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

/* ============================================================
   무공 탭 — 문파 전승 테크 트리
   ============================================================ */
.martial-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}

.martial-heading h1 {
  font-size: 2rem;
  line-height: 1.2;
  letter-spacing: 0;
}

.martial-heading > div:first-child > p:last-child,
.martial-tier header p,
.martial-origin,
.martial-empty-note {
  color: var(--ink-faint);
}

.martial-eyebrow {
  color: var(--seal);
  font-weight: 700;
}

.martial-focus {
  min-width: 240px;
  text-align: right;
}

.martial-focus > span {
  display: block;
  color: var(--ink-faint);
  font-size: 0.8rem;
}

.martial-focus > strong {
  display: block;
  margin: 2px 0 7px;
}

.martial-legend {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  font-size: 0.78rem;
}

.martial-legend span::before {
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 5px;
  border-radius: 50%;
  background: var(--seal);
}

.martial-legend .common::before { background: var(--jade); }

.martial-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(320px, 0.8fr);
  gap: 16px;
  align-items: start;
}

.martial-tree-panel {
  padding: 12px;
  overflow-x: auto;
}

.martial-tree {
  display: grid;
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  min-width: 720px;
}

.martial-tier {
  position: relative;
  min-width: 0;
  padding: 0 9px;
}

.martial-tier + .martial-tier {
  border-left: 1px solid var(--line);
}

.martial-tier + .martial-tier::before {
  content: "›";
  position: absolute;
  top: 19px;
  left: -6px;
  width: 12px;
  color: var(--ink-faint);
  background: var(--paper-card);
  text-align: center;
  font-size: 1.2rem;
}

.martial-tier header {
  display: flex;
  gap: 8px;
  align-items: center;
  min-height: 54px;
  margin-bottom: 8px;
}

.martial-tier header h3 {
  font-size: 1.35rem;
  line-height: 1.1;
  letter-spacing: 0;
}

.martial-tier header p { font-size: 0.72rem; }

.martial-tier-index {
  font-family: 'Nanum Myeongjo', serif;
  color: var(--seal);
  font-size: 0.74rem;
}

.martial-tier-nodes {
  display: grid;
  gap: 7px;
}

.martial-node {
  position: relative;
  width: 100%;
  min-height: 112px;
  padding: 8px 8px 8px 11px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid var(--line-soft);
  border-left: 4px solid var(--seal);
  border-radius: 5px;
}

.martial-node.common { border-left-color: var(--jade); }
.martial-node:hover { background: rgba(43, 36, 29, 0.06); }
.martial-node.selected {
  color: var(--paper-card);
  background: var(--ink);
  border-color: var(--ink);
}

.martial-node strong,
.martial-node small {
  display: block;
  overflow-wrap: anywhere;
}

.martial-node strong {
  margin: 3px 0;
  line-height: 1.25;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.martial-node small { opacity: 0.72; }

.martial-node .martial-node-parent {
  margin-top: 5px;
  padding-top: 4px;
  border-top: 1px solid currentColor;
  opacity: 0.55;
  font-size: 0.68rem;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.martial-node .martial-node-parent.root { border-top: 0; }

.martial-node-grade {
  display: inline-block;
  font-size: 0.68rem;
  color: var(--seal);
}

.martial-node.common .martial-node-grade { color: var(--jade); }
.martial-node.selected .martial-node-grade { color: var(--paper-warm); }

.martial-detail {
  padding: 16px;
}

.martial-detail-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: start;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}

.martial-detail-head h2 {
  margin-top: 4px;
  font-size: 1.65rem;
  line-height: 1.25;
  letter-spacing: 0;
  overflow-wrap: anywhere;
}

.martial-kind,
.martial-category {
  display: inline-block;
  padding: 2px 7px;
  border: 1px solid var(--line);
  border-radius: 4px;
  font-size: 0.72rem;
  white-space: nowrap;
}

.martial-kind.specialized { color: var(--seal); border-color: var(--seal); }
.martial-kind.common { color: var(--jade); border-color: var(--jade); }

/* ── 무공 세부 편집 ── */
.martial-detail-head-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

.martial-edit-btn {
  padding: 3px 10px;
  border: 1px solid var(--seal);
  border-radius: 5px;
  background: transparent;
  color: var(--seal);
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}

.martial-edit-btn:hover { background: var(--seal); color: var(--paper-warm); }

.martial-detail-editor-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.martial-detail-editor-head h2 { font-size: 1.4rem; letter-spacing: 0; }

.martial-detail-edit-form { margin-top: 12px; display: grid; gap: 14px; }

.martial-edit-name { display: grid; gap: 4px; }
.martial-edit-name span { font-weight: 600; font-size: 0.82rem; }
.martial-edit-name input { padding: 6px 8px; border: 1px solid var(--line); border-radius: 5px; }

.martial-edit-section { display: grid; gap: 6px; }
.martial-edit-section > strong { font-size: 0.9rem; }

.martial-edit-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 6px 8px;
}

.martial-edit-stats label { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px; font-size: 0.78rem; }
.martial-edit-stats input { width: 48px; padding: 3px 5px; border: 1px solid var(--line); border-radius: 4px; text-align: right; }

.martial-edit-conditions { display: grid; gap: 6px; }
.martial-edit-conditions label { display: grid; grid-template-columns: 78px 1fr; align-items: center; gap: 6px; font-size: 0.8rem; }
.martial-edit-conditions input,
.martial-edit-conditions select { padding: 5px 7px; border: 1px solid var(--line); border-radius: 5px; }

.martial-lore {
  margin: 12px 0;
  padding-left: 10px;
  border-left: 2px solid var(--gold);
}

.martial-training-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 8px 0;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.martial-prerequisite,
.martial-relation {
  margin-top: 9px;
  color: var(--seal-dark);
  font-size: 0.82rem;
}

.martial-relation { color: var(--jade); }

.martial-detail-section {
  margin-top: 14px;
}

.martial-detail-section h3 {
  margin-bottom: 5px;
  font-size: 1.15rem;
  letter-spacing: 0;
}

.martial-detail-section ul {
  padding-left: 18px;
}

.martial-detail-section li + li { margin-top: 3px; }

.martial-techniques {
  display: grid;
  gap: 4px;
}

.martial-technique-row {
  display: grid;
  grid-template-columns: minmax(110px, 1.2fr) auto minmax(110px, 1fr);
  gap: 8px;
  align-items: baseline;
  padding: 5px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: 0.76rem;
}

.martial-technique-row span { color: var(--ink-faint); }

body.quiet-layout .martial-node,
body.quiet-layout .martial-tier + .martial-tier::before {
  background: #f9fafb;
}

body.quiet-layout .martial-node.selected {
  color: #ffffff;
  background: #111827;
}

@media (max-width: 1080px) {
  /* 1fr의 암묵 최소값(min-content)이 1536px 계보 캔버스를 그대로 전파해
     모바일 뷰포트를 옆으로 밀어버린다 — minmax(0,1fr)로 수축을 허용해야 한다 */
  .martial-layout { grid-template-columns: minmax(0, 1fr); }
  /* 모바일: 무공 트리를 먼저, 무공 세부사항을 그 아래로 배치 */
  .martial-tree-panel { order: 0; }
  .martial-detail { order: 1; }
}

@media (max-width: 700px) {
  .martial-heading {
    display: grid;
    align-items: start;
  }

  .martial-heading h1 { font-size: 1.55rem; }
  .martial-focus { min-width: 0; text-align: left; }
  .martial-legend { justify-content: flex-start; }
  .martial-tree-panel { overflow: visible; }
  .martial-tree { grid-template-columns: 1fr; min-width: 0; }
  .martial-tier { padding: 10px 0; }
  .martial-tier + .martial-tier { border-left: 0; border-top: 1px solid var(--line); }
  .martial-tier + .martial-tier::before { content: "⌄"; top: -11px; left: 50%; }
  .martial-tier-nodes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .martial-node { min-height: 116px; }
  .martial-detail-head { display: grid; }
  .martial-category { justify-self: start; }
  .martial-technique-row { grid-template-columns: minmax(0, 1fr) auto; }
  .martial-technique-row span:last-child { grid-column: 1 / -1; }
}

@media (max-width: 420px) {
  .martial-tier-nodes { grid-template-columns: 1fr; }
}

/* ============================================================
   조용한 모드 추가 스타일 (그림 제거, 직각 구성, 검정색 & 회색 3종류, 맑은고딕/기본폰트)
   ============================================================ */
body.quiet-layout,
body.quiet-layout *,
body.quiet-layout text,
body.quiet-layout button,
body.quiet-layout input,
body.quiet-layout select,
body.quiet-layout textarea {
  font-family: "Malgun Gothic", "맑은 고딕", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR", sans-serif !important;
}

/* 인주 도장/스탬프 등의 기울기 및 외형 단조롭게 수정 */
body.quiet-layout .sect-seal {
  border-radius: 6px !important;
  transform: none !important;
  font-family: inherit !important;
  font-weight: 800 !important;
  box-shadow: none !important;
  background: #333333 !important;
  color: #ffffff !important;
}

body.quiet-layout .placeholder .ph-stamp {
  transform: none !important;
  color: #333333 !important;
  border-color: #333333 !important;
  font-family: inherit !important;
  border-radius: 4px !important;
  opacity: 1 !important;
}

/* 1. 지도 영역 구성 단순화 (그림/장식 제거) */
body.quiet-layout .map-terrain-bg {
  display: none !important;
}

body.quiet-layout .map-paper {
  fill: #ffffff !important;
}

body.quiet-layout .map-frame {
  background: #ffffff !important;
  border: 1px solid #d1d5db !important;
  box-shadow: none !important;
}

/* 2. 지도 노드 직각화 (직사각형) */
body.quiet-layout .city-node rect,
body.quiet-layout .map-node rect {
  fill: #ffffff !important;
  stroke: #888888 !important; /* 회색 2 (중간 회색) */
  stroke-width: 1.5px !important;
  rx: 0px !important;
  ry: 0px !important;
}

body.quiet-layout .city-node:hover rect,
body.quiet-layout .map-node:hover rect {
  fill: #f3f4f6 !important; /* 회색 1 (밝은 회색) */
  stroke: #000000 !important; /* 검정색 */
  stroke-width: 2px !important;
}

body.quiet-layout .city-node.selected rect,
body.quiet-layout .map-node.selected rect {
  fill: #000000 !important; /* 검정색 */
  stroke: #000000 !important; /* 검정색 */
}

body.quiet-layout .city-node.home rect,
body.quiet-layout .map-node.home rect {
  stroke: #000000 !important; /* 검정색 */
  stroke-width: 2.5px !important;
}

/* 3. 지도 노선 (단순화 및 회색 지정) */
body.quiet-layout .map-route {
  stroke: #888888 !important; /* 회색 2 (중간 회색) */
  stroke-width: 1.5px !important;
  stroke-dasharray: none !important;
}

body.quiet-layout .route-river,
body.quiet-layout .route-canal,
body.quiet-layout .route-mountain,
body.quiet-layout .route-pass,
body.quiet-layout .route-silkroad,
body.quiet-layout .route-sea {
  stroke: #888888 !important; /* 회색 2 (중간 회색) */
  stroke-width: 1.5px !important;
  stroke-dasharray: none !important;
}

/* 4. 지형/강 줄기 Faint화 (아주 연한 회색) */
body.quiet-layout .map-terrain,
body.quiet-layout .map-river,
body.quiet-layout .terrain-canal,
body.quiet-layout .terrain-desert {
  stroke: #e5e7eb !important; /* 회색 1 (밝은 회색) */
  stroke-width: 1px !important;
  stroke-dasharray: none !important;
}

/* 5. 글자체 및 라벨 단순화 */
body.quiet-layout .city-label {
  fill: #333333 !important; /* 회색 3 (어두운 회색) */
  font-size: 14px !important;
  stroke: #ffffff !important;
  stroke-width: 3px !important;
  font-weight: bold !important;
}

body.quiet-layout .map-terrain-label,
body.quiet-layout .map-label {
  fill: #888888 !important; /* 회색 2 (중간 회색) */
  font-size: 11px !important;
  stroke: none !important;
}

/* ── 무공 탭 v2: 전수 계보 연결선 + 문도 무공 카드 (20260711-martial-v2) ── */
.martial-tree { position: relative; }
.martial-lines { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.martial-line { fill: none; stroke: #b8ad9c; stroke-width: 1.6; opacity: 0.75; }
.martial-line.common { stroke-dasharray: 5 4; opacity: 0.5; }
.martial-line.explicit { stroke: #a0522d; stroke-width: 2.4; opacity: 0.95; }
.martial-tier-nodes { position: relative; z-index: 1; }
.martial-node.member-known { outline: 2px solid #a0522d; outline-offset: 2px; box-shadow: 0 0 0 4px rgba(160, 82, 45, 0.12); }

.martial-members { margin-top: 18px; }
.martial-members-head h2 { margin: 0 0 2px; font-size: 17px; }
.martial-members-head p { margin: 0 0 10px; color: #7a7264; font-size: 12.5px; }
.member-arts-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.member-arts-card { background: #fffdf7; border: 1px solid #d9d0bf; border-radius: 10px; padding: 10px 12px; cursor: pointer; transition: background-color 0.2s, border-color 0.15s, box-shadow 0.15s; }
.member-arts-card:hover { border-color: #a0522d; }
.member-arts-card.selected { border-color: #a0522d; box-shadow: 0 0 0 3px rgba(160, 82, 45, 0.15); }
.member-arts-card.learned-art-highlight { background-color: #dce0d7; border-color: rgba(78, 110, 88, 0.4); }
.member-arts-card.eligible-art-highlight { background-color: #edefe7; border-color: rgba(78, 110, 88, 0.2); }
.member-arts-card header { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 6px; }
.member-arts-card header span { color: #8a8173; font-size: 11.5px; }
.member-art-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 4px 0; border-top: 1px dashed #e6ddcb; }
.member-art-name { display: flex; flex-direction: column; min-width: 0; }
.member-art-name strong { font-size: 12.5px; }
.member-art-master { color: #9a9080; font-size: 10.5px; }
.member-art-stars { display: flex; flex-direction: column; align-items: flex-end; }
.member-art-stars .stars { color: #c8912b; font-size: 10px; letter-spacing: 1px; }
.member-art-progress { color: #9a9080; font-size: 10px; }
.member-art-equip { border: 1px solid #a0522d; color: #a0522d; background: transparent; border-radius: 6px; padding: 2px 7px; font-size: 11px; cursor: pointer; white-space: nowrap; }
.member-art-equip:hover { background: #a0522d; color: #fff; }
.member-art-equipped { color: #a0522d; font-size: 10.5px; font-weight: 600; white-space: nowrap; }
.member-retire-btn { margin-top: 8px; width: 100%; border: 1px solid #8a8173; background: #f4efe4; border-radius: 6px; padding: 5px; font-size: 11.5px; cursor: pointer; }
.member-retire-btn:hover { border-color: #a0522d; color: #a0522d; }
.martial-learners { display: flex; flex-direction: column; gap: 4px; }
.martial-learner-row { display: flex; gap: 10px; align-items: baseline; font-size: 12.5px; }
.martial-learner-stars { color: #c8912b; font-weight: 700; }
.martial-learner-master { color: #9a9080; font-size: 11px; }

/* ── 무공 트리 v3: 직각 엘보 커넥터 + 넓은 스크롤 캔버스 (20260711-martial-v3) ── */
.martial-tree-scroll { overflow: auto; max-height: 600px; padding: 0; }
.martial-canvas { position: relative; }
.martial-canvas .martial-node { position: absolute; z-index: 1; margin: 0; text-align: left; }
.martial-col-head { position: absolute; top: 10px; display: flex; gap: 8px; align-items: baseline; z-index: 1; border-bottom: 2px solid #d9d0bf; padding-bottom: 6px; }
.martial-col-head h3 { margin: 0; font-size: 14px; }
.martial-col-head p { margin: 0; font-size: 10.5px; color: #8a8173; }
.martial-line { fill: none; stroke: #c3b8a3; stroke-width: 2; opacity: 0.9; }
.martial-line.common { stroke-dasharray: 6 4; opacity: 0.55; }
.martial-line.explicit { stroke: #a0522d; stroke-width: 2.6; }

/* ── 모드 스위처 버튼 디자인 및 상호 노출 규칙 ── */
.mode-shortcut-btn {
  padding: 4px 8px !important;
  font-size: 0.75rem !important;
  border: 1px solid var(--line) !important;
  border-radius: 6px !important;
  background: var(--paper-card) !important;
  color: var(--ink) !important;
  cursor: pointer !important;
  transition: all 0.12s ease !important;
  display: inline-flex !important;
  align-items: center;
  gap: 3px;
}

.mode-shortcut-btn:hover {
  background: var(--paper-warm) !important;
  border-color: var(--ink-soft) !important;
  transform: translateY(-1px);
}

/* 기본 상태 (데스크탑 모드): 데탑 숨김, 조용/모바일 노출 */
.mode-shortcut-btn.to-desktop { display: none !important; }
.mode-shortcut-btn.to-quiet { display: inline-flex !important; }
.mode-shortcut-btn.to-mobile { display: inline-flex !important; }

/* 모바일 모드 상태: 모바일 숨김, 데탑/조용 노출 */
body.mobile-layout .mode-shortcut-btn.to-desktop { display: inline-flex !important; }
body.mobile-layout .mode-shortcut-btn.to-quiet { display: inline-flex !important; }
body.mobile-layout .mode-shortcut-btn.to-mobile { display: none !important; }

/* 조용한 모드 상태: 조용 숨김, 데탑/모바일 노출 */
body.quiet-layout .mode-shortcut-btn.to-desktop { display: inline-flex !important; }
body.quiet-layout .mode-shortcut-btn.to-quiet { display: none !important; }
body.quiet-layout .mode-shortcut-btn.to-mobile { display: inline-flex !important; }

/* 입문(신규창설) 화면용 이름 입력 필드 그리드 모바일 반응형 */
@media (max-width: 600px) {
  .names-grid {
    grid-template-columns: 1fr !important;
  }
}

.sect-log-panel {
  background: #fffdf9;
  border: 1.5px solid #dfcfb7;
  border-radius: 6px;
  padding: 10px 14px;
  margin: 12px auto;
  max-width: 1200px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02);
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}
.sect-log-panel:hover {
  background-color: #fffaf0;
  border-color: #c8b396;
}