:root {
  color-scheme: light;
  --bg: #ffffff;
  --ink: #0f172a;
  --muted: #64748b;
  --line: #e2e8f0;
  --card: #ffffff;
  --surface: #f1f5f9;
  --accent: #1d4ed8;
  --boss: #b91c1c;
  --hp: #dc2626;
  --mp: #2563eb;
  --exp: #16a34a;
  --shadow: 0 1px 2px rgba(15, 23, 42, 0.06);
  --content-width: 1080px; /* PC에서 각 탭 내용 너비 */
}

html.dark {
  color-scheme: dark;
  --bg: rgb(24, 24, 27);
  --ink: #f4f4f5;
  --muted: #a1a1aa;
  --line: #3f3f46;
  --card: #27272a;
  --surface: #3f3f46;
  --accent: #3b82f6;
  --boss: #f87171;
  --hp: #f87171;
  --mp: #60a5fa;
  --exp: #4ade80;
  --shadow: none;
}

* { box-sizing: border-box; }

html, body { height: 100%; }
/* 세로 스크롤바가 생겼다 없어져도 페이지 폭이 바뀌지 않게 자리를 잡아 둔다 (폭이 줄며 가로 스크롤바까지 깜빡이던 문제) */
html { scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--ink);
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.top {
  display: flex;
  align-items: center;
  gap: 32px;
  padding: 14px 40px;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.tabs { display: flex; gap: 4px; align-items: stretch; }

.tabs a {
  color: var(--muted);
  text-decoration: none;
  font-weight: 700;
  padding: 10px 16px;
  border-radius: 8px;
}

.tabs a.active {
  color: var(--ink);
  background: var(--surface);
  box-shadow: inset 0 -2px 0 var(--accent);
}

.auth {
  margin-left: auto;
  display: flex;
  align-items: center;
  min-height: 36px;
}

.auth-cluster {
  display: flex;
  align-items: center;
  gap: 14px;
}

.main-char {
  display: inline-flex;
  align-items: center;
  max-width: 280px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--ink);
  text-decoration: none;
  font-weight: 800;
  font-size: 0.92rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.main-char:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.auth-user {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 220px;
  height: 28px;
  padding: 0 10px 0 8px;
  border: 0;
  border-radius: 999px;
  background: #5865f2;
  color: #fff;
  box-shadow: 0 1px 3px rgba(88, 101, 242, 0.35);
}

.auth-discord {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
}

.auth-name {
  min-width: 0;
  overflow: hidden;
  font-weight: 800;
  font-size: 0.84rem;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.auth-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--surface);
}

.auth-link,
.auth-button {
  color: var(--accent);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.9rem;
}

.auth-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
  padding: 9px 16px;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
}

.auth-button.secondary {
  background: transparent;
  color: var(--accent);
  border: 1px solid var(--accent);
}

.dev-login-list {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
}

.dev-login-label {
  margin-right: 4px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.9rem;
}

.dev-login-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  color: var(--accent);
  font-weight: 700;
  font-size: 0.85rem;
  text-decoration: none;
}

.dev-login-button:hover {
  background: var(--accent);
  color: #fff;
}

.char-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.auth-hint {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.char-page {
  width: min(var(--content-width), 100%);
  margin: 20px auto 0;
}

.char-page h1 {
  margin: 8px 0 6px;
  font-size: 1.75rem;
}

.page-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 8px;
}

.char-actions { margin-top: 18px; }

.notice {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 600;
}

.char-slots {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-top: 24px;
}

.char-slot {
  position: relative;
  min-height: 280px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--card);
  color: inherit;
  text-decoration: none;
  transition: border-color 120ms ease, background 120ms ease;
}

.char-slot.empty {
  color: var(--muted);
}

.char-slot-label {
  font-weight: 700;
}

.char-slot-create {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 88%, transparent);
  color: #fff;
  font-size: 1.2rem;
  font-weight: 800;
  opacity: 0;
  transition: opacity 120ms ease;
}

.char-slot.empty:hover,
.char-slot.empty:focus-visible {
  border-color: var(--accent);
  background: var(--surface);
}

.char-slot.empty:hover .char-slot-create,
.char-slot.empty:focus-visible .char-slot-create {
  opacity: 1;
}

.char-slot.filled {
  --job: #64748b;
  border-style: solid;
  border-color: color-mix(in srgb, var(--job) 35%, var(--line));
  align-items: stretch;
  justify-content: flex-start;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--job) 12%, var(--card)), var(--card) 42%);
  box-shadow: inset 3px 0 0 var(--job);
}

.char-slot.filled.main {
  border-color: var(--job);
  box-shadow: inset 3px 0 0 var(--job), 0 0 0 1px color-mix(in srgb, var(--job) 30%, transparent);
}

.char-slot.filled .main-badge {
  background: var(--job);
}

.char-slot-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.main-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 800;
}

.main-select {
  width: 100%;
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
}

.main-select:not(:disabled):hover {
  border-color: var(--accent);
  color: var(--accent);
}

.main-select:disabled {
  opacity: 0.7;
  cursor: default;
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: var(--accent);
  color: var(--accent);
}

.main-summary { margin-top: -4px; }

.char-job {
  color: var(--job, var(--accent));
  font-size: 0.82rem;
  font-weight: 800;
}

.char-title {
  margin-top: 4px;
  font-size: 1.15rem;
  font-weight: 800;
}

.char-level {
  margin-top: 4px;
  color: var(--muted);
  font-weight: 700;
}

.char-stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 0;
}

.char-stats div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
}

.char-stats dt {
  margin: 0;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.char-stats dd {
  margin: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.char-form {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.char-form.desktop-form {
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.char-form.desktop-form.three-col,
.char-form.desktop-form.four-col {
  grid-template-columns: minmax(160px, 0.45fr) max-content max-content minmax(220px, 1fr);
  gap: 16px;
  align-items: start;
}

.char-form.desktop-form.two-col {
  grid-template-columns: minmax(200px, 15%) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.form-col-identity,
.form-col-stats,
.form-col-skills,
.form-col-combat {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.form-col-combat {
  position: relative;
  gap: 12px;
}

.form-col-combat .attack-grid,
.form-col-combat .attack-grid-row {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
}

.char-form .weapon-select,
.weapon-select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  box-sizing: border-box;
}

.weapon-select:disabled {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  background: color-mix(in srgb, var(--ink) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
  cursor: not-allowed;
}

.page-head.char-form-head {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 4px;
  width: 100%;
}

.char-form-back {
  margin: 0;
}

.char-form-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  min-width: 0;
}

.char-form-title-row h1 {
  margin: 0;
  padding: 0;
  height: 40px;
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 40px;
}

.char-form-submit {
  flex: 0 0 auto;
  margin: 0 0 0 auto;
  min-width: 120px;
  height: 40px;
  padding: 0 18px;
  border: 0;
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 700;
  line-height: 40px;
  cursor: pointer;
}

.char-form-submit:disabled {
  opacity: 0.45;
  cursor: default;
}

.attack-field-item {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.char-form .attack-field-item input[type="number"] {
  width: 100%;
  max-width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 36px;
  box-sizing: border-box;
}

.char-form input[type="text"],
.char-form input[type="number"],
.char-form input:not([type]) {
  width: 3em;
  max-width: 100%;
  box-sizing: content-box;
}

.form-col {
  display: grid;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.form-col-identity {
  gap: 12px;
}

.form-section-title {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}

.identity-basics {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
  align-items: end;
}

.identity-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.35fr) minmax(0, 1fr);
  gap: 10px;
  align-items: start;
}

.name-field,
.level-field {
  display: grid;
  gap: 4px;
  margin: 0;
  font-size: 0.82rem;
  font-weight: 700;
}

.name-field {
  min-width: 0;
}

.char-form .name-field input,
.char-form .level-field input {
  height: 36px;
  min-height: 36px;
  padding: 0 10px;
  line-height: 36px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
}

.char-form .name-field input {
  width: 100%;
  box-sizing: border-box;
}

.char-form .level-field input {
  width: 3ch;
  box-sizing: content-box;
  text-align: center;
  -moz-appearance: textfield;
}

.char-form .level-field input::-webkit-outer-spin-button,
.char-form .level-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.job-field {
  display: grid;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.job-field-title {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.job-tiers-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: end;
}

.job-select-field {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.job-select {
  width: 100%;
  height: 36px;
  min-height: 36px;
  padding: 0 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.86rem;
  font-weight: 600;
}

.job-select:disabled {
  opacity: 1;
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  background: color-mix(in srgb, var(--ink) 18%, var(--surface));
  border-color: color-mix(in srgb, var(--ink) 22%, var(--line));
  cursor: not-allowed;
}

.job-select-field:has(.job-select:disabled) {
  opacity: 0.72;
  color: color-mix(in srgb, var(--muted) 80%, transparent);
}

html.dark .job-select:disabled {
  background: color-mix(in srgb, #000 45%, var(--surface));
  border-color: color-mix(in srgb, #000 35%, var(--line));
  color: color-mix(in srgb, var(--muted) 65%, transparent);
}

.job-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.job-option {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
}

.job-option:has(input:checked) {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  font-weight: 700;
}

.form-col-stats,
.form-col-skills {
  --stat-label-size: 0.85rem;
  --stat-input-height: 29px; /* 36px의 약 80% */
  position: relative;
  display: grid;
  gap: 12px;
  width: max-content;
  max-width: 100%;
  justify-self: start;
  align-self: start;
  box-sizing: border-box;
}

.form-col-stats.is-locked,
.form-col-skills.is-locked,
.form-col-combat.is-locked {
  pointer-events: none;
}

.form-col-stats.is-locked > :not(.panel-lock),
.form-col-skills.is-locked > :not(.panel-lock),
.form-col-combat.is-locked > :not(.panel-lock) {
  opacity: 0.28;
  filter: grayscale(0.35);
}

.panel-lock {
  display: none;
  position: absolute;
  inset: 0;
  z-index: 2;
  align-items: center;
  justify-content: center;
  padding: 16px;
  border-radius: 12px;
  background: color-mix(in srgb, #000 55%, transparent);
  color: #fff;
  font-size: 0.95rem;
  font-weight: 800;
  text-align: center;
}

.form-col-stats.is-locked .panel-lock,
.form-col-skills.is-locked .panel-lock,
.form-col-combat.is-locked .panel-lock {
  display: flex;
}

.skill-head {
  display: grid;
  grid-template-columns: 32px minmax(7.5rem, 1fr) 6.5rem;
  gap: 8px;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.skill-head span:first-child {
  grid-column: 1 / 3;
  text-align: left;
  padding-left: 2px;
}

.skill-list {
  display: grid;
  gap: 8px;
}

.skill-row {
  display: grid;
  grid-template-columns: 32px minmax(7.5rem, 1fr) 6.5rem;
  gap: 8px;
  align-items: center;
}

.skill-icon {
  width: 32px;
  height: 32px;
  border: 0;
  background: transparent;
  image-rendering: pixelated;
  flex: 0 0 auto;
}

.skill-icon.missing {
  display: grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: color-mix(in srgb, var(--ink) 12%, var(--surface));
  color: var(--muted);
  font-size: 0.58rem;
  font-weight: 700;
}

.skill-meta {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.skill-name {
  color: var(--ink);
  font-size: var(--stat-label-size);
  font-weight: 800;
  line-height: 1.2;
}

.skill-tier {
  color: var(--muted);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
}

.skill-level-controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28px;
  gap: 4px;
  align-items: center;
  min-width: 0;
}

.skill-level-field {
  display: block;
  margin: 0;
  min-width: 0;
}

.skill-level {
  width: 100%;
  height: var(--stat-input-height);
  min-height: var(--stat-input-height);
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.85rem;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

.skill-level:disabled {
  color: color-mix(in srgb, var(--muted) 70%, transparent);
  background: color-mix(in srgb, var(--ink) 18%, var(--surface));
  cursor: not-allowed;
}

.skill-max-btn {
  width: 34px;
  height: var(--stat-input-height);
  min-height: var(--stat-input-height);
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--ink);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  box-sizing: border-box;
}

.skill-max-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 32%, var(--surface));
}

.skill-max-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.skill-empty {
  margin: 0;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 600;
}

.stat-head,
.stat-row {
  display: grid;
  grid-template-columns: 2.6em 3.2em 3.2em 2.4em;
  gap: 8px;
  align-items: center;
  width: max-content;
  max-width: 100%;
}

.stat-head {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.stat-head span {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.stat-head span:first-child {
  justify-content: flex-start;
  text-align: left;
}

.stat-grid {
  display: grid;
  gap: 10px;
  width: max-content;
  max-width: 100%;
}

.stat-row {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}

.stat-pair-label {
  display: flex;
  align-items: center;
  font-size: var(--stat-label-size);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}

.stat-all-btn {
  width: 100%;
  height: var(--stat-input-height);
  min-height: var(--stat-input-height);
  padding: 0 2px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: color-mix(in srgb, var(--accent) 18%, var(--surface));
  color: var(--ink);
  font-size: 0.62rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  cursor: pointer;
  box-sizing: border-box;
}

.stat-all-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--accent) 32%, var(--surface));
}

.stat-all-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.stat-field {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  width: 100%;
  min-width: 0;
  height: var(--stat-input-height);
}

.stat-sub {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.char-form .stat-field input,
.stat-field input {
  display: block;
  width: 100%;
  max-width: none;
  height: var(--stat-input-height);
  min-height: var(--stat-input-height);
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: var(--stat-input-height);
  text-align: center;
  box-sizing: border-box;
  -moz-appearance: textfield;
  appearance: textfield;
}

.stat-field input::-webkit-outer-spin-button,
.stat-field input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.stat-ap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  width: 100%;
  padding-top: 2px;
  box-sizing: border-box;
}

.stat-ap-item {
  display: grid;
  gap: 4px;
  margin: 0;
  min-width: 0;
  user-select: none;
  pointer-events: none;
}

.stat-ap-item[hidden] {
  display: none !important;
}

.stat-ap:has(.stat-ap-item[hidden]) {
  grid-template-columns: 1fr;
}

.stat-ap-item strong {
  display: block;
  width: 100%;
  min-width: 0;
  height: var(--stat-input-height);
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 800;
  line-height: var(--stat-input-height);
  text-align: center;
  box-sizing: border-box;
  font-variant-numeric: tabular-nums;
}

.stat-ap-item strong.ready,
#total-ap.ready { color: var(--exp); }
.stat-ap-item strong.over,
#total-ap.over { color: var(--boss); }

.skill-field,
.attack-field {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.skill-field legend,
.attack-field legend {
  padding: 0 4px;
  color: var(--muted);
  font-size: 0.72rem;
}

.skill-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 12px;
  align-items: end;
}

.skill-mastery {
  display: grid;
  gap: 4px;
  min-width: 72px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  text-align: center;
}

.skill-mastery strong {
  font-size: 1rem;
  font-weight: 800;
}

.stat-help,
.form-error {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
}

.form-error { color: var(--boss); font-weight: 700; }

.char-form button[type="submit"]:disabled,
.char-form-submit:disabled {
  opacity: 0.45;
  cursor: default;
}

.search-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 0;
  width: 100%;
  padding: 24px 0;
}

.search-box {
  position: relative;
  flex: 0 0 auto;
  width: min(760px, 100%);
  transform: translateY(-16vh);
}

.search-screen input[type="search"] {
  width: 100%;
  display: block;
  font-size: 1.05rem;
  padding: 14px 16px;
  background: var(--card);
  box-shadow: var(--shadow);
}

.search-screen input[type="search"]:focus {
  outline: 2px solid var(--accent);
  border-color: var(--accent);
}

.preview {
  position: absolute;
  z-index: 2;
  top: calc(100% + 6px);
  left: 0;
  width: 100%;
  max-height: min(90vh, 630px);
  overflow: auto;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 10px 28px rgba(15, 23, 42, 0.08);
}

.preview-section + .preview-section {
  margin-top: 6px;
  border-top: 1px solid var(--line);
  padding-top: 4px;
}

.preview-section h3 {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  padding: 8px 10px 4px;
  color: var(--accent);
  font-size: 0.78rem;
  font-weight: 800;
}

.preview-section .count {
  color: var(--accent);
  font-weight: 700;
}

.preview .card {
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 8px;
  align-items: center;
  width: 100%;
  padding: 4px 10px;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  box-shadow: none;
}

.preview .card.active { background: var(--surface); }

.preview .sprite,
.preview .icon,
.preview .missing,
.preview .minimap-mark,
.preview .minimap-mark.missing {
  width: 24px;
  height: 24px;
  min-width: 24px;
  min-height: 24px;
  overflow: hidden;
  object-fit: contain;
  image-rendering: pixelated;
}

.preview .missing,
.preview .minimap-mark.missing {
  display: block;
  border: 0;
  border-radius: 4px;
  background: var(--surface);
  color: transparent;
  font-size: 0;
  line-height: 0;
}

.preview .name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.92rem;
  line-height: 1.2;
}

.preview .meta { display: none; }

.preview-more,
.preview-empty {
  margin: 0;
  padding: 4px 10px 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

h2 { margin: 28px 0 12px; font-size: 1.05rem; }

.desc { white-space: pre-line; line-height: 1.5; }

.icon, .map-image {
  width: 96px;
  height: 96px;
  object-fit: contain;
  image-rendering: pixelated;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
}

.map-image { width: min(100%, 420px); height: auto; }

.drops { display: flex; flex-wrap: wrap; gap: 8px; }

.drops.cols-2 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.drops.cols-2 .drop { min-width: 0; }

.drop {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

.drop .icon { width: 32px; height: 32px; border: 0; background: transparent; flex: 0 0 auto; }

.drop-name {
  min-width: 0;
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.drop-rate {
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.main-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin: 16px 0 10px;
}

.main-stat {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-align: center;
}

.main-stat .label {
  font-size: 0.78rem;
  font-weight: 700;
}

.main-stat .value {
  font-size: 1.25rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.main-stat.hp .label,
.main-stat.hp .value { color: var(--hp); }
.main-stat.mp .label,
.main-stat.mp .value { color: var(--mp); }
.main-stat.exp .label,
.main-stat.exp .value { color: var(--exp); }

.sub-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 8px;
}

.sub-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
}

.sub-stat .label { color: var(--muted); font-size: 0.86rem; }
.sub-stat .value { font-weight: 700; font-variant-numeric: tabular-nums; }

.plain { margin: 0; padding-left: 18px; line-height: 1.7; }
.plain a { color: var(--accent); }

.sprite.large { width: 160px; height: 160px; }

.brand {
  color: inherit;
  font-size: 1.35rem;
  font-weight: 700;
  text-decoration: none;
  display: flex;
  align-items: center;
  min-height: 36px;
}

.wm {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  color: var(--ink);
  line-height: 1;
}
.wm .en,
.wm .ko {
  display: block;
  white-space: nowrap;
  letter-spacing: 0;
}
.wm .en { font-size: 0.48em; font-weight: 700; }
.wm .ko { font-size: 1em; font-weight: 700; }
/* 로고의 PARTY·파티: 사이트 글라스 그라데이션 (버튼·개요 강조 글자와 같은 --grad) */
.wm .party {
  background: var(--grad, linear-gradient(135deg, #58a6ff, #8957e5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}

.tag { margin: 0; color: var(--muted); }

main {
  flex: 1 0 auto; /* 내용이 길면 늘어나 아래 .site-foot 을 밀어낸다 */
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 12px 40px 20px;
}

main:has(.search-screen) {
  flex: 1 1 0; /* 검색 화면은 화면 높이에 맞춘다 */
  padding-top: 0;
  padding-bottom: 0;
  overflow: hidden;
}

.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: end;
  margin: 12px 0 16px;
}

label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: var(--muted);
}

input, select, button {
  font: inherit;
  color: inherit;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
}

input[type="search"] { min-width: 220px; }

button {
  cursor: pointer;
  background: var(--accent);
  color: white;
  border-color: transparent;
}

.summary { color: var(--muted); margin: 0 0 12px; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}

.card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 10px;
  align-items: center;
  padding: 12px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  text-decoration: none;
  color: inherit;
}

.card:hover { border-color: #94a3b8; }

.sprite {
  width: 72px;
  height: 72px;
  object-fit: contain;
  image-rendering: pixelated;
}

.missing {
  display: grid;
  place-items: center;
  background: var(--surface);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.8rem;
}

.name { font-weight: 700; }
.lv {
  margin-right: 6px;
  color: var(--muted);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.meta { margin-top: 4px; color: var(--muted); font-size: 0.86rem; }
.boss { color: var(--boss); font-size: 0.75rem; font-weight: 700; }

.pager { display: flex; gap: 8px; align-items: center; margin-top: 16px; }
.pager button { background: var(--card); color: inherit; border-color: var(--line); }
.pager button:disabled { opacity: 0.4; cursor: default; }

.detail {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
}

.detail > div { width: 100%; }

.detail h1,
.detail .meta { text-align: center; }

.detail .sprite { width: 160px; height: 160px; }

.detail .title-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.lv-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  min-width: 44px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 0.82rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  white-space: nowrap;
}

.mob-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.mob-list a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 10px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  color: inherit;
  text-decoration: none;
}

.mob-list .sprite,
.mob-list .missing {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
}

.mob-list .lv {
  flex: 0 0 auto;
  margin-right: 0;
}

.mob-list span:not(.lv) {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.back { color: var(--accent); text-decoration: none; }

h1 { margin: 8px 0 4px; font-size: 1.8rem; }

.stats {
  width: 100%;
  border-collapse: collapse;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.stats th, .stats td {
  text-align: left;
  padding: 8px 12px;
  border-bottom: 1px solid var(--line);
}

.stats th { width: 40%; color: var(--muted); font-weight: 500; }

.status { color: var(--muted); }

.char-page.create.wide { width: min(var(--content-width), 100%); }

.category-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 4px;
  margin: 0;
  width: 100%;
}

.category-tab {
  display: block;
  min-width: 0;
  cursor: pointer;
}

.category-tab input { position: absolute; opacity: 0; pointer-events: none; }

.category-tab span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 4px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.category-tab:has(input:checked) span {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.job-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.job-card {
  --job: #64748b;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.job-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.job-card.active,
.job-card:has(input:checked) {
  border-color: var(--job);
  background: color-mix(in srgb, var(--job) 20%, var(--surface));
  box-shadow: inset 2px 0 0 var(--job), 0 0 0 1px color-mix(in srgb, var(--job) 40%, transparent);
}

.job-card-name {
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
}

.job-card.active .job-card-name,
.job-card:has(input:checked) .job-card-name {
  color: var(--job);
}

.subclass-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
}

.subclass-label {
  flex: 0 0 auto;
  margin: 0;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
  white-space: nowrap;
}

.subclass-grid {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.subclass-card {
  --job: #64748b;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 6px 8px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 120ms ease, background 120ms ease, box-shadow 120ms ease, color 120ms ease;
}

.subclass-card input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.subclass-card.active,
.subclass-card:has(input:checked) {
  border-color: var(--job);
  background: color-mix(in srgb, var(--job) 18%, var(--surface));
  box-shadow: inset 2px 0 0 var(--job), 0 0 0 1px color-mix(in srgb, var(--job) 35%, transparent);
}

.subclass-name {
  font-size: 0.78rem;
  font-weight: 800;
  text-align: left;
  white-space: nowrap;
  color: var(--ink);
}

.subclass-card.active .subclass-name,
.subclass-card:has(input:checked) .subclass-name {
  color: var(--job);
}

.job-tone-warrior { --job: #ef4444; }
.job-tone-magician { --job: #3b82f6; }
.job-tone-bowman { --job: #22c55e; }
.job-tone-thief { --job: #9333ea; }
.job-tone-pirate { --job: #eab308; }

.build-grid,
.attack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.attack-field {
  margin: 0;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
}

.attack-field legend {
  padding: 0 6px;
  color: var(--muted);
  font-size: 0.78rem;
}

.attack-result {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.attack-summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.attack-summary .label {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
  margin-bottom: 4px;
}

.attack-summary strong {
  display: block;
  font-size: 1.05rem;
  font-variant-numeric: tabular-nums;
}

.attack-summary em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
}

.char-job-line {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.char-cat {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.char-attack {
  display: grid;
  gap: 6px;
  margin-top: 12px;
}

.char-attack div {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--surface);
  font-size: 0.86rem;
}

.char-attack span { color: var(--muted); font-weight: 700; }
.char-attack strong { font-variant-numeric: tabular-nums; }

.char-slot-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.char-slot-actions .char-delete {
  grid-column: 1 / -1;
}

.edit-link,
.char-delete {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
  font-weight: 700;
  background: transparent;
  cursor: pointer;
}

.edit-link:hover { border-color: var(--accent); color: var(--accent); }

.char-delete:hover {
  border-color: #ef4444;
  color: #ef4444;
}

.attack-summary.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.party-page {
  width: min(var(--content-width), 100%);
  margin: 20px auto 0;
}

.party-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}

.party-side {
  display: grid;
  gap: 14px;
  position: sticky;
  top: 16px;
}

.party-main,
.party-panel {
  min-width: 0;
}

.party-checklist {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 16px 0;
}

.party-checklist.stacked {
  grid-template-columns: 1fr;
  margin: 0;
}

.party-checklist .check {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.party-checklist .check.ok { border-color: color-mix(in srgb, var(--exp) 55%, var(--line)); }

.party-checklist span {
  display: block;
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.party-checklist strong { display: block; margin-top: 4px; }
.party-checklist em { display: block; margin-top: 4px; color: var(--muted); font-style: normal; font-size: 0.86rem; }
.party-checklist a { color: var(--accent); font-weight: 700; }

.party-steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0 16px;
}

.party-steps.vertical {
  display: grid;
  gap: 8px;
  margin: 0;
}

.party-steps.horizontal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 18px 0 16px;
}

.step-tab {
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  font-weight: 700;
  text-align: left;
  border-radius: 8px;
}

.party-steps.vertical .step-tab {
  width: 100%;
  padding: 12px 14px;
}

.step-tab.active {
  background: color-mix(in srgb, var(--accent) 16%, var(--card));
  border-color: var(--accent);
  color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
}

.step-tab:disabled { opacity: 0.4; cursor: default; }

.party-home-center {
  display: grid;
  justify-items: center;
  gap: 12px;
  margin: 28px auto 0;
  text-align: center;
}

.party-select-row {
  margin-top: 28px;
}

.match-cta {
  min-width: min(360px, 100%);
  min-height: 120px;
  display: grid;
  place-content: center;
  gap: 6px;
  padding: 22px 36px;
  border: 0;
  border-radius: 18px;
  background: var(--accent);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent);
}

.match-cta:disabled {
  opacity: 0.45;
  cursor: default;
  box-shadow: none;
}

/* 매칭 중: 배경 물결이 왼쪽으로 흐르고, 테두리를 따라 빛줄기가 돈다 (찾는 중인 느낌) */
@property --match-spin {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}
.match-cta.matching {
  --match-deep: color-mix(in srgb, var(--accent) 70%, #111);
  --match-lite: color-mix(in srgb, var(--accent) 80%, #fff);
  border: 3px solid transparent;
  background:
    linear-gradient(105deg, transparent 0 15%, rgba(255, 255, 255, 0.22) 25%, transparent 35% 65%, rgba(255, 255, 255, 0.22) 75%, transparent 85%) padding-box 0 0 / 200% 100%,
    linear-gradient(90deg, var(--match-deep) 0%, var(--accent) 25%, var(--match-deep) 50%, var(--accent) 75%, var(--match-deep) 100%) padding-box 0 0 / 200% 100%,
    conic-gradient(from var(--match-spin), var(--match-deep) 0deg, var(--match-deep) 200deg, var(--match-lite) 280deg, #fff 320deg, var(--match-lite) 340deg, var(--match-deep) 360deg) border-box;
  animation: match-flow 2.4s linear infinite, match-spin 1.8s linear infinite, match-glow 1.8s ease-in-out infinite;
}
/* 클릭 직후 서버 응답을 기다리는 동안에도 흐리게 만들지 않는다 */
.match-cta.matching:disabled { opacity: 1; cursor: progress; }
@keyframes match-flow {
  from { background-position: 0% 0, 0% 0, 0 0; }
  to { background-position: 100% 0, 100% 0, 0 0; }
}
@keyframes match-spin {
  to { --match-spin: 360deg; }
}
@keyframes match-glow {
  0%, 100% { box-shadow: 0 10px 28px color-mix(in srgb, var(--accent) 35%, transparent); }
  50% { box-shadow: 0 10px 36px color-mix(in srgb, var(--accent) 65%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .match-cta.matching { animation: none; }
}

.match-cta-label {
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.match-cta-sub {
  font-size: 1.15rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  opacity: 0.92;
}

.match-cta-meta {
  margin: 0;
  color: var(--muted);
  font-size: 0.92rem;
  font-weight: 700;
}

.party-select-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: min(720px, 100%);
  margin-left: auto;
  margin-right: auto;
}

.select-card {
  display: grid;
  gap: 6px;
  align-content: center;
  min-height: 88px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.select-card span {
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.select-card strong {
  font-size: 1.02rem;
  font-weight: 800;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.select-card.ok strong { color: var(--ink); }

.select-card.active,
.select-card:hover:not(:disabled) {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
}

.select-card:disabled {
  opacity: 0.45;
  cursor: default;
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(0, 0, 0, 0.45);
}

.modal-backdrop[hidden] {
  display: none !important;
}

.modal-card {
  width: min(960px, 100%);
  max-height: min(860px, calc(100dvh - 40px));
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--card);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.28);
}

.modal-head,
.modal-foot {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--line);
}

.modal-foot {
  border-bottom: 0;
  border-top: 1px solid var(--line);
  align-items: center;
  justify-content: flex-end;
}

.modal-head h2 {
  margin: 0;
  font-size: 1.15rem;
}

.modal-head p {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 0.88rem;
}

.modal-close {
  display: inline-grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font-size: 1.3rem;
  line-height: 1;
  cursor: pointer;
}

.hunt-modal-body {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 0;
  min-height: 420px;
  overflow: hidden;
}

.hunt-seats,
.hunt-maps {
  padding: 16px;
  overflow: auto;
}

.hunt-seats {
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.hunt-seats h3,
.hunt-maps h3 {
  margin: 0 0 10px;
  font-size: 0.9rem;
}

.seat-row {
  display: grid;
  gap: 8px;
  width: 100%;
  margin-bottom: 8px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.seat-row.active {
  border-color: var(--accent);
  box-shadow: inset 3px 0 0 var(--accent);
  background: color-mix(in srgb, var(--accent) 12%, var(--card));
}

.seat-row-title {
  display: block;
  font-weight: 800;
  font-size: 0.92rem;
  line-height: 1.35;
}

.seat-row-meta {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.seat-def-card {
  display: grid;
  gap: 10px;
  margin: 0 0 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.seat-def-card legend {
  padding: 0 6px;
  font-weight: 800;
}

.seat-job-field {
  display: grid;
  gap: 6px;
}

.seat-job-field > span {
  color: var(--muted);
  font-size: 0.78rem;
  font-weight: 700;
}

.seat-job-options {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.seat-job-options label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 700;
}

.preset-list li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.preset-edit {
  display: grid;
  gap: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.preset-edit strong {
  display: block;
}

.preset-edit em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: 0.82rem;
}

.character-modal {
  width: min(504px, 100%);
}

.character-pick-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  padding: 16px 18px;
  overflow: auto;
}

.character-pick-empty {
  grid-column: 1 / -1;
}

.character-pick {
  --job: #64748b;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 51px;
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  color: var(--muted);
  text-align: left;
  cursor: pointer;
}

.character-pick.inactive {
  --job: #64748b;
  opacity: 0.5;
  border-color: var(--line);
  background: var(--surface);
  box-shadow: none;
  color: var(--muted);
}

.character-pick.selected {
  opacity: 1;
  border-color: var(--job);
  background: color-mix(in srgb, var(--job) 16%, var(--card));
  box-shadow: inset 3px 0 0 var(--job);
  color: var(--ink);
}

.character-level-badge {
  flex: 0 0 64px;
  width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--muted) 55%, var(--surface));
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  box-sizing: border-box;
}

.character-pick.selected .character-level-badge {
  background: var(--job);
  color: #fff;
}

.character-pick-name {
  flex: 0 0 140px;
  width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 1rem;
  font-weight: 800;
}

.character-pick-job {
  flex: 0 0 180px;
  width: 180px;
  margin-left: auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
  color: var(--muted);
  font-style: normal;
  font-size: 0.9rem;
  font-weight: 700;
}

.character-pick.selected .character-pick-job {
  color: color-mix(in srgb, var(--job) 70%, var(--ink));
}

.match-live {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0 14px;
}

.match-metric {
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.match-metric span {
  display: block;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 700;
}

.match-metric strong {
  display: block;
  margin-top: 8px;
  font-size: 1.8rem;
  font-variant-numeric: tabular-nums;
}

.match-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
}

.party-panel {
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.party-panel h2 { margin-top: 0; }

.map-pick-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
  max-height: 560px;
  overflow: auto;
  padding-right: 4px;
}

.map-pick {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  min-height: 64px;
  text-align: left;
  background: var(--surface);
  color: inherit;
  border: 1px solid var(--line);
  border-radius: 8px;
}

.map-pick.selected,
.map-pick:hover { border-color: var(--accent); }

.map-pick strong { display: block; }
.map-pick em { color: var(--muted); font-style: normal; font-size: 0.82rem; }

.atk-filter {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}

.ready-summary {
  margin: 0 0 16px;
  padding-left: 18px;
  line-height: 1.8;
}

.match-banner {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  margin: 14px 0;
  background: var(--surface);
}

.match-banner.compact { margin: 0; min-width: 320px; }
.match-banner.matched { border: 1px solid color-mix(in srgb, var(--exp) 50%, var(--line)); }
.match-banner.queued { border: 1px solid color-mix(in srgb, var(--accent) 50%, var(--line)); }
.match-banner p { margin: 4px 0 0; color: var(--muted); }

.match-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 20px;
  margin-top: 18px;
}

.match-col {
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.match-col h2:first-child { margin-top: 0; }

.match-members {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.match-member {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.match-member span,
.match-member em {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-style: normal;
}

.match-mobs { display: grid; gap: 8px; }

.match-mob {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.match-mob .sprite,
.match-mob .missing { width: 48px; height: 48px; }
.match-mob span { display: block; color: var(--muted); font-size: 0.86rem; }
.match-mob .hits {
  font-weight: 800;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

@media (max-width: 1100px) {
  .party-layout,
  .match-layout,
  .char-form.desktop-form,
  .char-form.desktop-form.two-col,
  .char-form.desktop-form.three-col,
  .char-form.desktop-form.four-col,
  .hunt-modal-body,
  .match-live,
  .party-steps.horizontal,
  .party-select-row { grid-template-columns: 1fr; }
  .party-side { position: static; }
  .party-steps.vertical { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .map-pick-list { grid-template-columns: 1fr; }
  .hunt-seats { border-right: 0; border-bottom: 1px solid var(--line); }
  .party-home-center { margin-top: 28px; }
  .drops.cols-2,
  .mob-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .char-page.create.wide { width: 100%; }
  .form-col-identity,
  .form-col-stats,
  .form-col-skills,
  .form-col-combat { width: 100%; max-width: 100%; }
  .form-col-stats,
  .form-col-skills { justify-self: stretch; }
  .stat-head,
  .stat-row,
  .stat-grid,
  .stat-ap,
  .skill-head,
  .skill-row,
  .skill-list { width: 100%; max-width: 100%; }
  .stat-head,
  .stat-row { grid-template-columns: 2.6em minmax(0, 1fr) minmax(0, 1fr) 2.6em; }
  .char-form .name-field input,
  .char-form .job-select,
  .char-form .attack-field-item input[type="number"] { width: 100%; box-sizing: border-box; }
  .form-col-combat .attack-grid,
  .form-col-combat .attack-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-col-combat .attack-grid-row .attack-field-item:nth-child(1),
  .form-col-combat .attack-grid-row .attack-field-item:nth-child(2) {
    grid-column: span 1;
  }
  .char-form-title-row {
    flex-wrap: wrap;
    align-items: center;
  }
}

@media (max-width: 768px) {
  main, .top { padding-left: 16px; padding-right: 16px; }
  .main-stats { grid-template-columns: 1fr; }
  .sub-stat { padding: 8px 6px; flex-direction: column; align-items: flex-start; gap: 2px; }
  .sub-stat .label { font-size: 0.72rem; }
  .top { flex-wrap: wrap; gap: 12px; padding-top: 12px; padding-bottom: 12px; }
  .auth { margin-left: 0; width: 100%; order: 3; }
  .auth-cluster { width: 100%; justify-content: space-between; }
  .main-char { max-width: 55%; }
  .char-slots,
  .match-members,
  .party-steps.vertical { grid-template-columns: 1fr; }
  .char-slot-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .build-grid,
  .attack-grid,
  .attack-summary,
  .attack-summary.two,
  .party-checklist,
  .atk-filter,
  .drops.cols-2,
  .mob-list { grid-template-columns: 1fr; }
  .form-col { padding: 14px; }
  .identity-row,
  .skill-grid { grid-template-columns: 1fr; }
  .identity-basics { grid-template-columns: auto minmax(0, 1fr); }
  .job-tiers-row { grid-template-columns: 1fr; }
  .form-col-combat .attack-grid,
  .form-col-combat .attack-grid-row { grid-template-columns: 1fr 1fr; }
  .category-tabs { gap: 3px; }
  .category-tab span {
    padding: 7px 2px;
    font-size: 0.7rem;
  }
  .stat-head,
  .stat-row { grid-template-columns: 2.4em minmax(0, 1fr) minmax(0, 1fr) 2.6em; }
  .attack-result { padding: 12px; }
  .match-banner,
  .page-head { flex-direction: column; align-items: stretch; }
  .page-head.char-form-head {
    display: flex;
    flex-direction: column;
    align-items: stretch;
  }
  .char-form-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }
  .char-form-title-row h1,
  .char-form-submit {
    height: 40px;
    line-height: 40px;
  }
  .char-form-submit {
    width: auto;
    margin-left: auto;
  }
}

.admin-page {
  width: min(var(--content-width), 100%);
  margin: 20px auto 0;
}

.admin-tabs {
  display: flex;
  gap: 8px;
  margin: 18px 0 20px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}

.admin-tab {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--muted);
  font-weight: 700;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
}

.admin-tab:hover {
  color: var(--ink);
  background: color-mix(in srgb, var(--card) 80%, black);
}

.admin-tab.active {
  color: var(--ink);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
}

.admin-tab-panel[hidden] {
  display: none !important;
}

.admin-login {
  display: grid;
  gap: 12px;
  max-width: 360px;
  margin-top: 18px;
}

.admin-login label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.admin-login input {
  width: 100%;
}

.admin-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 20px 0;
}

.admin-stats article {
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.admin-stats span {
  display: block;
  color: var(--muted);
  font-size: 0.82rem;
  font-weight: 700;
}

.admin-stats strong {
  display: block;
  margin-top: 8px;
  font-size: 1.8rem;
}

.admin-charts {
  display: grid;
  gap: 18px;
  margin-bottom: 28px;
}

.admin-charts section {
  padding: 16px 18px 10px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.admin-charts h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  font-size: 1rem;
}

.admin-charts h2 em,
.admin-presets h3 em {
  color: var(--muted);
  font-style: normal;
  font-size: 0.8rem;
  font-weight: 700;
}

.admin-charts canvas {
  width: 100%;
  height: 220px;
  display: block;
}

.admin-presets {
  margin-top: 8px;
  padding-top: 8px;
}

.page-head.compact {
  margin-bottom: 12px;
}

.admin-preset-registered h3 {
  margin: 0 0 12px;
}

.admin-hunt-modal {
  width: min(880px, 100%);
}

.admin-hunt-modal-body {
  display: grid;
  grid-template-columns: minmax(220px, 0.9fr) minmax(0, 1.4fr);
  gap: 0;
  min-height: 0;
  overflow: auto;
}

.admin-hunt-modal-body .admin-preset-picker {
  box-sizing: border-box;
  width: calc(220px * 1.2);
  min-width: calc(220px * 1.2);
  padding: 16px;
  border-right: 1px solid var(--line);
  background: var(--surface);
}

.admin-preset-picker #preset-q {
  width: 220px;
  max-width: 100%;
  box-sizing: border-box;
}

.admin-map-pick-list {
  grid-template-columns: 1fr;
  max-height: 320px;
}

.admin-hunt-modal-body .preset-form {
  margin: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 16px 18px 20px;
}

@media (max-width: 960px) {
  .admin-hunt-modal-body {
    grid-template-columns: 1fr;
  }

  .admin-hunt-modal-body .admin-preset-picker {
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
}

.preset-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.preset-list li {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
}

.preset-list li.status {
  display: block;
  color: var(--muted);
}

/* 어드민 등록된 사냥터: 끌어서 순서 바꾸기 */
.preset-list li[draggable="true"] { grid-template-columns: auto auto 1fr auto; cursor: grab; }
.preset-grip { color: var(--muted); font-weight: 900; letter-spacing: -3px; user-select: none; }
.preset-list li.dragging { opacity: 0.45; cursor: grabbing; }
.preset-list li.drop-before { box-shadow: 0 -3px 0 var(--accent); }
.preset-list li.drop-after { box-shadow: 0 3px 0 var(--accent); }

.preset-list strong,
.preset-list em {
  display: block;
}

.preset-list em {
  margin-top: 2px;
  color: var(--muted);
  font-style: normal;
  font-size: 0.78rem;
}

.preset-form {
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.preset-form h3 { margin: 0; }

.preset-form label,
.my-seat-label,
.seat-min-list label {
  display: grid;
  gap: 6px;
  font-weight: 700;
}

.preset-form input,
.preset-form select,
.my-seat-label select,
.seat-min-list input {
  width: 100%;
}

.seat-fields,
.seat-min-list {
  display: grid;
  gap: 10px;
}

.preset-form-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.my-seat-label {
  margin: 14px 0;
}

.queue-fill {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 18px;
}

.queue-seat {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: color-mix(in srgb, var(--card) 88%, black);
  color: var(--muted);
  font-size: 0.86rem;
  font-weight: 700;
}

.queue-seat.filled {
  border-color: color-mix(in srgb, var(--exp) 55%, var(--line));
  color: var(--ink);
}

@media (max-width: 960px) {
  .admin-stats { grid-template-columns: 1fr; }
}

/* ---- 파티매칭 2단계: 파티 생성·파티찾기·로비 (pages/party.js) ---- */

.auth-button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.auth-button:disabled { opacity: 0.45; cursor: default; }
.auth-button.danger { background: transparent; color: var(--boss); border: 1px solid var(--boss); }
.link-button { border: 0; background: none; color: var(--accent); font: inherit; font-weight: 700; cursor: pointer; padding: 0; }

.party-cta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  width: min(720px, 100%);
}
.party-cta-row .match-cta { min-width: 0; width: 100%; }
.match-cta.secondary-cta {
  background: var(--card);
  color: var(--ink);
  border: 2px solid var(--accent);
  box-shadow: none;
}
.match-cta.secondary-cta .match-cta-sub { color: var(--muted); }
.match-cta-hint { margin: 0; color: var(--muted); font-size: 0.82rem; }

.code-join {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 18px;
  color: var(--muted);
  font-weight: 700;
  font-size: 0.9rem;
}
.code-join input,
.text-input,
.pref-row select,
.dummy-form select {
  min-width: 0;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
}
.code-join[hidden] { display: none; }
.code-join input { width: 12ch; text-transform: uppercase; letter-spacing: 0.12em; font-weight: 800; }
.code-join input::placeholder { letter-spacing: 0; font-weight: 600; text-transform: none; }
.text-input { width: 100%; }

.modal-card.modal-narrow { width: min(560px, 100%); }
.modal-body { padding: 16px 18px; overflow: auto; }
.modal-body .hunt-maps { padding: 0; }
.modal-body .character-pick-list { padding: 0; }
.modal-note { margin: 0 0 12px; color: var(--muted); font-weight: 700; font-size: 0.9rem; }

.seat-choice-list, .pref-list, .dummy-form { display: grid; gap: 10px; }
.seat-choice {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
}
.seat-choice:has(input:checked) { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); }
.seat-choice.blocked { opacity: 0.5; cursor: default; }
.seat-choice strong, .seat-choice em { display: block; }
.seat-choice em { color: var(--muted); font-style: normal; font-size: 0.82rem; }
.pref-row { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px; align-items: center; font-weight: 800; }
.dummy-form label { display: grid; gap: 6px; color: var(--muted); font-weight: 700; font-size: 0.86rem; }

/* 로비 */
.lobby-head { flex-wrap: wrap; gap: 12px; }
.lobby-state {
  display: inline-block;
  margin-right: 6px;
  padding: 2px 10px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-weight: 800;
  font-size: 0.82rem;
}
.lobby-state.state-recruiting { background: color-mix(in srgb, var(--accent) 22%, var(--card)); color: var(--accent); }
.lobby-state.state-full { background: color-mix(in srgb, var(--exp) 22%, var(--card)); color: var(--exp); }
.lobby-state.state-paused { background: color-mix(in srgb, var(--boss) 16%, var(--card)); color: var(--boss); }
.lobby-share { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lobby-share .auth-button { min-width: 0; }
.lobby-code {
  padding: 6px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font-weight: 800;
  font-size: 1.25rem;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
}
/* 좌 60%: 파티원·타이머 / 우 40%: 채널·사냥터·몬스터와 드롭·버튼 */
.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: 20px;
  align-items: start;
  margin-top: 18px;
}
.lobby-main, .lobby-side { display: grid; gap: 14px; min-width: 0; }
.lobby-panel {
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  min-width: 0;
}
.lobby-panel h2 { margin: 0 0 10px; font-size: 0.95rem; }
.lobby-panel h2:not(:first-child) { margin-top: 16px; }
.lobby-channel-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.lobby-channel-row strong { flex: 1; min-width: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.lobby-channel-row strong em { color: var(--muted); font-weight: 600; font-style: normal; font-size: 0.92rem; }
.lobby-channel-row .auth-button { min-width: 0; padding: 6px 12px; }
.lobby-map-image { display: block; width: 100%; max-height: 260px; object-fit: contain; border-radius: 10px; background: var(--surface); }
.lobby-map-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 10px 0 6px; }
.lobby-map-name span { color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.lobby-loot { max-height: min(560px, 60vh); overflow: auto; overscroll-behavior: contain; }
.lobby-loot .drops { margin: 0; }
.lobby-loot .drops.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }


.seat-empty { margin: 0; color: var(--muted); font-weight: 700; }
.seat-empty.searching { color: var(--accent); }
.seat-empty .dots::after {
  content: ".";
  display: inline-block;
  width: 1.5em;
  text-align: left;
  animation: seat-dots 1.5s steps(1, end) infinite;
}
@keyframes seat-dots {
  0% { content: "."; }
  33% { content: ".."; }
  66% { content: "..."; }
}
@media (prefers-reduced-motion: reduce) {
  .seat-empty .dots::after { animation: none; content: "..."; }
}

.seat-badge {
  display: inline !important;
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface);
  color: var(--muted) !important;
  font-size: 0.72rem !important;
  font-weight: 800;
}
.seat-badge.leader { background: color-mix(in srgb, #eab308 25%, var(--card)); color: #ca8a04 !important; }
.seat-badge.me { background: color-mix(in srgb, var(--accent) 20%, var(--card)); color: var(--accent) !important; }
.seat-action {
  padding: 5px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}
.seat-action:hover { border-color: var(--accent); }
.seat-action.danger { color: var(--boss); }

.lobby-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}
.lobby-action-buttons { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 100%; }
.lobby-actions .lobby-primary { flex: 1 1 100%; min-height: 52px; font-size: 1.05rem; }
.lobby-actions .form-error { flex-basis: 100%; margin: 0; }
.invite-card .lobby-actions { margin-top: 6px; }

.invite-card {
  display: grid;
  gap: 10px;
  width: min(560px, 100%);
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
}
.invite-card > strong { font-size: 1.2rem; }
.invite-card > span { color: var(--muted); font-weight: 700; }
.invite-card .character-pick-list { padding: 0; }

#toast-host {
  position: fixed;
  top: 16px;
  left: 50%;
  z-index: 60;
  display: grid;
  gap: 8px;
  transform: translateX(-50%);
  width: min(420px, calc(100% - 32px));
  pointer-events: none;
}
.toast {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--ink);
  color: var(--bg);
  font-weight: 700;
  text-align: center;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25);
}

@media (max-width: 960px) {
  .lobby-layout { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .party-cta-row { grid-template-columns: 1fr; }
  .party-select-row { grid-template-columns: 1fr; }
}

/* 로비 타이머 (SPEC 5장) */
.lobby-timers { margin-top: 4px; }
.lobby-timers > header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.lobby-timers h2 { margin: 0; font-size: 1.05rem; }
.sound-toggle { min-width: 0; }
.sound-toggle.on { background: var(--accent); color: #fff; }
.timer-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.timer-card {
  display: grid;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.timer-card.running { background: var(--card); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.timer-card.ringing { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.timer-card em { color: var(--muted); font-style: normal; font-size: 0.8rem; font-weight: 700; }
.timer-left { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.timer-card:not(.running) .timer-left { color: var(--muted); }
.timer-buttons { display: flex; gap: 6px; margin-top: 6px; }

/* 로비 채팅 (SPEC 4.8) */

/* 어드민 채팅 신고 */
.report-filter { display: flex; gap: 6px; }
.report-filter .active { border-color: var(--accent); color: var(--accent); }
.report-card { display: grid; gap: 8px; margin-bottom: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.report-card header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.report-card header span { color: var(--muted); font-size: 0.86rem; }
.report-card header button, .report-card header .seat-badge { margin-left: auto; }
.report-detail { margin: 0; }
.report-context { margin: 0; padding: 8px 10px; list-style: none; border-radius: 8px; background: var(--surface); font-size: 0.88rem; }
.report-context li { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
.report-context li.system { color: var(--muted); font-style: italic; }
.report-context li.reported { color: var(--boss); font-weight: 700; }
.report-context time, .report-context small { color: var(--muted); font-size: 0.76rem; }

/* ---- 로비: 1080px 안에서 세로 스크롤 없이 (PC) ---- */
.lobby-page { margin-top: 8px; }
.lobby-page .lobby-head h1 { font-size: 1.5rem; margin: 0; }
.lobby-page .lobby-head .summary { margin: 4px 0 0; }
.lobby-page .lobby-code { font-size: 1.05rem; padding: 4px 10px; }
.lobby-page .lobby-share .auth-button { padding: 6px 12px; }
.lobby-layout { gap: 14px; margin-top: 12px; }
.lobby-main, .lobby-side { gap: 10px; }
.lobby-panel { padding: 10px 14px; }
.lobby-panel h2 { margin: 0 0 8px; font-size: 0.9rem; }
.lobby-panel h2:not(:first-child) { margin-top: 10px; }
.lobby-panel h2 small { margin-left: 6px; color: var(--muted); font-size: 0.74rem; font-weight: 600; }


/* 채널: 한 줄 */
.lobby-channel-row { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lobby-channel-row .panel-label { flex: 0 0 auto; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.lobby-channel-badge {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  box-sizing: border-box; min-width: 72px; height: 30px; padding: 0 12px;
  border: 1.5px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 18%, var(--card));
  color: #fff; font-size: 0.88rem; font-weight: 800; font-variant-numeric: tabular-nums;
  line-height: 1; white-space: nowrap; text-align: center;
}
.lobby-channel-badge.empty {
  border-color: var(--line); background: var(--surface); color: var(--muted); font-weight: 700; font-size: 0.8rem;
}

/* 타이머: 이름 · 남은 시간 · 시작/정지 한 줄 */
.lobby-timers > header { margin-bottom: 6px; }
.lobby-timers h2 { font-size: 0.95rem; }
.lobby-timers .sound-toggle { padding: 4px 10px; font-size: 0.82rem; }
.timer-rows { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.timer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}
.timer-row strong { flex: 1 1 auto; min-width: 0; font-size: 0.88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-row .timer-left { flex: 0 0 auto; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--muted); }
.timer-row.running { background: var(--card); border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.timer-row.running .timer-left { color: var(--ink); }
.timer-row.ringing { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
.timer-row .seat-action { flex: 0 0 auto; padding: 3px 8px; }

/* 채팅 */

/* 사냥터 */
.lobby-map-image { max-height: 110px; }
.lobby-map-name { margin: 0; }
.lobby-map-image + .lobby-map-name { margin-top: 6px; }
.lobby-map .link-button { font-size: 0.82rem; }
.lobby-map { display: grid; gap: 4px; }
.lobby-map h2 { margin-bottom: 2px; }

/* 소환 몬스터: 한 줄에 두 마리, 한 마리는 한 줄 */
.lobby-loot { max-height: none; overflow: visible; }
.mob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mob-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  padding: 3px 8px 3px 4px;
  border-radius: 8px;
  background: var(--surface);
  font-size: 0.78rem;
}
.mob-line .sprite { flex: 0 0 28px; width: 28px; height: 28px; }
.mob-line .missing { flex: 0 0 28px; width: 28px; height: 28px; font-size: 0.6rem; }
.mob-line { gap: 4px; font-size: 0.72rem; white-space: nowrap; }
.mob-line .sprite, .mob-line .missing { flex-basis: 24px; width: 24px; height: 24px; }
.mob-line { overflow: hidden; }
.mob-line b, .mob-line strong { flex: 0 0 auto; }
.mob-line .mob-name, .mob-line em { flex: 0 1 auto; min-width: 2em; overflow: hidden; text-overflow: ellipsis; }
.mob-line em { color: var(--muted); font-style: normal; }
.mob-line strong { color: var(--accent); }

/* 드롭 아이템: 아이콘만, 마우스를 올리면 이름 */
.icon-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.icon-cell {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}
.icon-cell:hover, .icon-cell:focus-visible { border-color: var(--accent); }
.icon-cell .icon { width: 30px; height: 30px; border: 0; border-radius: 0; background: transparent; }
.icon-cell .icon.missing { font-size: 0.6rem; }
.icon-cell:hover::after, .icon-cell:focus-visible::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  z-index: 10;
  transform: translateX(-50%);
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}

/* 버튼 */
.lobby-actions .lobby-primary { min-height: 44px; font-size: 1rem; }

@media (max-width: 768px) {
  .timer-rows { grid-template-columns: 1fr; }
}

/* ---- 로비 2차 정리 ---- */
/* 헤더 카드: 제목·상태 | 코드·복사·파티해체(나가기) */
.lobby-page .lobby-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
}
.lobby-share .auth-button { min-width: 0; }
.lobby-error { margin: 8px 0 0; }

/* 좌·우 높이 맞춤 */
.lobby-layout { align-items: stretch; }
.lobby-main, .lobby-side { display: flex; flex-direction: column; }
.lobby-loot { flex: 1 1 auto; }

/* 타이머 카드 */
.lobby-timers > header { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lobby-timers h2 { margin: 0; }
.timer-tools { display: flex; align-items: center; gap: 6px; }
.pip-button { padding: 4px 10px; font-size: 0.82rem; min-width: 0; }

/* 자리: 빈 자리와 사람이 있는 자리 같은 크기 */
.lobby-seat { height: 64px; min-height: 64px; overflow: hidden; border-width: 1px; }
.lobby-seat .seat-body { display: flex; align-items: center; min-height: 0; }

/* 소환 몬스터: 두 마리씩, 한 마리는 두 줄 (Lv·이름 / HP ··· 방수) */
.mob-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.mob-card { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px 4px 4px; border-radius: 8px; background: var(--surface); }
.mob-card .sprite, .mob-card .missing { flex: 0 0 32px; width: 32px; height: 32px; font-size: 0.6rem; }
.mob-text { flex: 1 1 auto; min-width: 0; }
.mob-top { font-size: 0.8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mob-bottom { display: flex; justify-content: space-between; gap: 6px; font-size: 0.74rem; white-space: nowrap; }
.mob-bottom em { color: var(--muted); font-style: normal; }
.mob-bottom strong { color: var(--accent); }

/* 파티원 표: 자리 · 레벨 · 닉네임 · 직업 · 스탯공격력 · 버튼 (모든 줄이 같은 열을 쓴다) */
.lobby-seats {
  display: grid;
  grid-template-columns: 48px minmax(80px, 120px) 64px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  row-gap: 6px;
}
.seat-slot { display: contents; }
.seat-row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: subgrid;
  align-items: center;
  column-gap: 10px;
  min-width: 0;
}
.seat-row > * { min-width: 0; }
.lobby-seat {
  --job: var(--line);
  min-height: 52px;
  margin: 0;
  padding: 6px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--surface);
}
.lobby-seat.filled { border-style: solid; background: var(--card); box-shadow: inset 3px 0 0 var(--job); }
.lobby-seat.editing { border-color: var(--accent); }
.lobby-seat.moving { border-color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); cursor: pointer; }
.lobby-seat.move-target { cursor: pointer; border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.lobby-seat.move-target:hover,
.lobby-seat.move-target:focus-visible { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); outline: none; }
.lobby-seat.moving:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.seat-label strong { display: block; font-size: 0.92rem; }
.seat-label span { display: block; margin-top: 2px; color: var(--muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-level { font-weight: 800; font-size: 0.88rem; }
.seat-name { display: flex; align-items: center; gap: 4px; }
.seat-name strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.seat-name .seat-badge { margin-left: 0; flex: 0 0 auto; }
.seat-job { display: flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-job::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--job); }
.seat-atk { font-size: 0.86rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.seat-muted { color: var(--muted); }
.lobby-seat .seat-empty { grid-column: 3 / 7; }
.seat-actions { display: flex; justify-content: flex-end; gap: 6px; }
.seat-action.primary { border-color: var(--accent); background: var(--accent); color: #fff; }
.seat-action[data-seat-action="dummy-add"] { min-width: 32px; font-size: 1rem; line-height: 1; }
.seat-move-tag { color: var(--accent); font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.seat-input { width: 100%; min-width: 0; padding: 5px 8px; font-size: 0.84rem; }

@media (max-width: 768px) {
  .lobby-seats { grid-template-columns: minmax(0, 1fr); }
  .seat-row { display: flex; flex-wrap: wrap; gap: 4px 10px; }
  .seat-label { flex: 1 0 60%; }
  .seat-badges:empty { display: none; }
  .seat-name, .seat-job { flex: 1 1 30%; }
  .seat-actions { flex: 1 0 100%; justify-content: flex-start; }
  .seat-actions:empty { display: none; }
  .seat-row > [role="cell"]:has(.seat-input) { flex: 1 1 30%; }
}

/* ---- 로비 3차 정리 ---- */
/* 파티원 표: 가운데 정렬, 배지(파티장·나·더미)는 맨 왼쪽 */
.lobby-seat > [role="cell"] { text-align: center; justify-content: center; }
.seat-badges { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.seat-badges .seat-badge { margin-left: 0; }
.lobby-seat .seat-name { justify-content: center; }
.lobby-seat .seat-job { justify-content: center; }
.lobby-seat .seat-actions { justify-content: center; }
.lobby-seat .seat-input { text-align: center; }

/* 빈 자리 + 버튼: 눈에 띄는 버튼 */
.seat-action[data-seat-action="dummy-add"] {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  min-width: 34px;
  padding: 0;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: #fff;
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 1px 3px color-mix(in srgb, var(--accent) 40%, transparent);
}
.seat-action[data-seat-action="dummy-add"]:hover { filter: brightness(1.1); }

/* 타이머 시작·종료 버튼 */
.timer-all { display: flex; gap: 6px; }
.timer-all:empty { display: none; }
.timer-button {
  flex: 0 0 auto;
  padding: 5px 12px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  font: inherit;
  font-size: 0.8rem;
  font-weight: 800;
  cursor: pointer;
  white-space: nowrap;
}
.timer-button:hover { filter: brightness(1.1); }
.timer-button.stop { border-color: var(--boss); background: var(--boss); }

/* 사냥터: 높이 2배, 이름은 가운데·글씨 2배 */
.lobby-map { display: flex; flex-direction: column; }
.lobby-map h2 { align-self: flex-start; }
.lobby-map-image { max-height: 220px; align-self: center; }
.lobby-map-name {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 120px;
  margin: 0;
  text-align: center;
}
.lobby-map-name strong { font-size: 2rem; line-height: 1.2; }
.lobby-map-name span { font-size: 1.2rem; }

/* 소환 몬스터·드롭 아이템은 카드 따로. 남는 높이는 드롭 카드가 채운다 */
.lobby-mobs { flex: 0 0 auto; }
/* 사냥터 미선택: 소환 몬스터·드롭 아이템을 흐리게 (비활성) */
.lobby-panel.is-disabled { background: var(--surface); border-style: dashed; opacity: 0.55; pointer-events: none; user-select: none; }
.lobby-panel.is-disabled h2,
.lobby-panel.is-disabled .status { color: var(--muted); }
.lobby-panel.is-disabled .mob-grid { display: block; }

/* ---- 로비 4차 정리 ---- */
/* 배지(파티장·나)는 한 줄로 */
.lobby-seats { grid-template-columns: auto minmax(80px, 120px) 64px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; }
.seat-badges { flex-direction: row; flex-wrap: nowrap; gap: 4px; white-space: nowrap; }

/* 파티원찾기: 카드 없이 버튼만 */
.lobby-action-buttons .lobby-primary { flex: 1 1 100%; min-height: 48px; font-size: 1rem; }
.lobby-action-buttons .summary { margin: 0; text-align: center; }

/* 헤더: 상태 배지를 오른쪽 코드·버튼과 같은 높이로 */
.lobby-page .lobby-head .summary { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 0.9rem; }
.lobby-page .lobby-state,
.lobby-page .lobby-code,
.lobby-page .lobby-share .auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: 36px;
  border-radius: 8px;
}
.lobby-page .lobby-state { margin: 0; padding: 0 14px; border: 1px solid transparent; font-size: 0.9rem; }

/* ==== 버튼 디자인 E (사이트 전체) ====
   주 버튼: 파란 채움 / 보조: 흰 바탕·회색 테두리 → 올리면 파랑 / 위험: 빨간 글자 → 올리면 빨간 테두리
   줄 안의 작은 버튼은 아이콘만 (이름은 title·aria-label). */
.ui-icon { width: 16px; height: 16px; flex: 0 0 auto; }

.auth-button,
.seat-action,
.timer-button,
.char-delete,
.main-select,
.modal-close,
.char-form-submit {
  transition: background 0.12s, border-color 0.12s, color 0.12s, filter 0.12s, transform 0.06s;
}
.auth-button:active:not(:disabled),
.seat-action:active:not(:disabled),
.timer-button:active:not(:disabled),
.char-form-submit:active:not(:disabled) { transform: translateY(1px); }

.auth-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--accent);
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  font-size: 0.88rem;
  line-height: 1.2;
  white-space: nowrap;
}
.auth-button:hover:not(:disabled) { filter: brightness(1.08); }
.auth-button.secondary { border-color: var(--line); background: var(--card); color: var(--ink); }
.auth-button.secondary:hover:not(:disabled) { filter: none; border-color: var(--accent); color: var(--accent); }
.auth-button.danger { border-color: var(--line); background: var(--card); color: var(--boss); }
.auth-button.danger:hover:not(:disabled) { filter: none; border-color: var(--boss); }
.sound-toggle.on { border-color: var(--line); background: var(--card); color: var(--accent); }

.seat-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--ink);
  font-size: 0.8rem;
}
.seat-action:hover { border-color: var(--accent); color: var(--accent); }
.seat-action.danger { color: var(--boss); }
.seat-action.danger:hover { border-color: var(--boss); color: var(--boss); }
.seat-action.icon-only { width: 30px; height: 30px; min-width: 30px; min-height: 30px; padding: 0; color: var(--muted); }
.seat-action.icon-only:hover { color: var(--accent); }
.seat-action.icon-only.danger:hover { color: var(--boss); }
.seat-action.primary,
.seat-action[data-seat-action="dummy-add"] {
  width: 30px;
  height: 30px;
  min-width: 30px;
  border-color: var(--accent);
  border-radius: 9px;
  background: var(--accent);
  color: #fff;
  box-shadow: none;
  font-size: 0.8rem;
}
.seat-action.primary:hover,
.seat-action[data-seat-action="dummy-add"]:hover { color: #fff; filter: brightness(1.08); }

.timer-button {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 30px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--card);
  color: var(--accent);
  font-size: 0.8rem;
}
.timer-button .ui-icon { width: 13px; height: 13px; }
.timer-button:hover { filter: none; border-color: var(--accent); }
.timer-button.stop { border-color: var(--line); background: var(--card); color: var(--boss); }
.timer-button.stop:hover { border-color: var(--boss); }
.timer-button.pause { color: #ca8a04; }
.timer-button.pause:hover { border-color: #ca8a04; }
.timer-button:disabled { opacity: 0.45; cursor: default; }
.timer-row-buttons { display: flex; flex: 0 0 auto; gap: 4px; }
.timer-button.icon-only { justify-content: center; width: 30px; min-width: 30px; padding: 0; }
.timer-button.icon-only .ui-icon { width: 14px; height: 14px; }
.timer-button[data-timer-action="reset"] { color: var(--muted); }
.timer-button[data-timer-action="reset"]:hover:not(:disabled) { color: var(--accent); }
.timer-button:disabled:hover { border-color: var(--line); }
.timer-row.paused { border-color: color-mix(in srgb, #eab308 50%, var(--line)); }
.timer-row.paused .timer-left { color: var(--muted); }
.timer-paused { margin-left: 2px; padding: 1px 5px; border-radius: 6px; background: color-mix(in srgb, #eab308 22%, var(--card)); color: #ca8a04; font-size: 0.66rem; font-style: normal; font-weight: 800; vertical-align: middle; }

.lobby-timers .pip-button,
.lobby-timers .sound-toggle { min-height: 30px; padding: 0 10px; font-size: 0.8rem; }
.lobby-timers .auth-button .ui-icon { width: 14px; height: 14px; }
.lobby-action-buttons .auth-button .ui-icon { width: 18px; height: 18px; }

.char-delete,
.main-select,
.modal-close { border-radius: 9px; background: var(--card); }
.char-delete:hover { border-color: var(--boss); color: var(--boss); }
.modal-close:hover { border-color: var(--accent); color: var(--accent); }
.char-form-submit { border: 1px solid var(--accent); border-radius: 9px; }
.char-form-submit:hover:not(:disabled) { filter: brightness(1.08); }
.stat-all-btn,
.skill-max-btn { background: var(--card); color: var(--accent); }
.stat-all-btn:hover:not(:disabled),
.skill-max-btn:hover:not(:disabled) { border-color: var(--accent); background: var(--card); }

/* ==== 로비 5차: 값 배지 · 빈 자리 스켈레톤 · 드래그 이동 · 상단 알림 ==== */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.toast.error { background: var(--card); color: var(--boss); border: 1px solid var(--boss); }

/* 맨 왼쪽 배지(파티장·나)는 세로로. 열 너비는 가장 긴 배지에 맞춘다 */
.seat-badges { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 3px; min-width: 0; }
.seat-badges .seat-badge { display: block !important; margin: 0; padding: 1px 6px; text-align: center; line-height: 1.4; }

/* 값 배지 */
.cell-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  min-height: 26px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font-size: 0.84rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}
.cell-badge.seat-place { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); background: color-mix(in srgb, var(--accent) 12%, var(--card)); color: var(--accent); font-weight: 800; }
.cell-badge.name { display: inline-block; line-height: 24px; background: var(--card); }
.cell-badge.job { border-color: color-mix(in srgb, var(--job) 45%, var(--line)); background: color-mix(in srgb, var(--job) 14%, var(--card)); }
.cell-badge.atk { font-variant-numeric: tabular-nums; }
.cell-badge.muted { color: var(--muted); background: transparent; }
.seat-label { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.seat-label small { max-width: 100%; color: var(--muted); font-size: 0.7rem; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 빈 자리: 점선 외곽 스켈레톤 */
.lobby-seat.empty { border-style: dashed; background: var(--card); }
.cell-badge.skeleton { width: 72px; padding: 0; border: 1.5px dashed var(--line); background: transparent; }
.cell-badge.skeleton.s { width: 48px; }
.cell-badge.skeleton.l { width: 110px; }
.lobby-seat.searching .cell-badge.skeleton {
  border-color: color-mix(in srgb, var(--accent) 45%, var(--line));
  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--accent) 14%, transparent) 50%, transparent 100%) 0 0 / 200% 100%;
  animation: seat-shimmer 1.4s linear infinite;
}
@keyframes seat-shimmer {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-seat.searching .cell-badge.skeleton { animation: none; }
}

/* 드래그로 자리 이동 */
.lobby-seat.draggable { cursor: grab; }
.lobby-seat.draggable:active { cursor: grabbing; }
.lobby-seat.draggable button { cursor: pointer; }
.lobby-seat.dragging { opacity: 0.45; }
.lobby-seat.drop-over { border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ==== 로비 6차 ==== */
/* 빈 자리: 웹 배경색, 굵은 점선. 사람이 있는 자리는 그대로 */
.lobby-seat.empty { border: 2px dashed var(--line); background: var(--bg); }
.lobby-seat.empty .cell-badge.skeleton { border-width: 2px; }

/* 플레이어 칸: 세로·가로 가운데 */
.lobby-seat { align-items: center; }
.lobby-seat > [role="cell"] { display: flex; align-items: center; justify-content: center; min-height: 100%; text-align: center; }
.lobby-seat > .seat-label { flex-direction: column; }
.lobby-seat > .seat-badges { flex-direction: column; align-items: center; }

/* 타이머: 오른쪽 사냥터 아래. 좁은 폭에 맞춰 한 줄에 한 개, 도구는 줄바꿈 */
.lobby-side .lobby-timers { margin-top: 0; }
.lobby-side .lobby-timers > header { flex-wrap: wrap; }
.lobby-side .timer-tools { flex-wrap: wrap; justify-content: flex-end; }
.lobby-side .timer-rows { grid-template-columns: 1fr; }

/* 드롭 아이템: 3줄 높이로 고정, 넘치면 휠·마우스 끌기로 위아래 이동 */
.lobby-loot { flex: 0 0 auto; min-width: 0; }
.lobby-loot .icon-grid {
  height: calc(38px * 4 + 4px * 3); /* 드롭 아이템 4줄 (2026-10-11, 3줄에서 늘림) */
  align-content: flex-start;
  overflow-y: auto;
  scrollbar-width: thin;
  overscroll-behavior: contain;
  cursor: grab;
  user-select: none;
}
.lobby-loot .icon-grid > * { flex: none; }
.lobby-loot .icon-grid.dragging { cursor: grabbing; }
.lobby-loot .icon-grid .icon-cell::after { display: none !important; }
.lobby-loot .icon-grid .icon-cell { cursor: inherit; }
.drop-tip {
  position: fixed;
  z-index: 50;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--ink);
  color: var(--bg);
  font-size: 0.78rem;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
}
.drop-tip[hidden] { display: none; }
.lobby-loot .icon-grid img { -webkit-user-drag: none; pointer-events: none; }

/* 상단 알림: 페이드 인 → 유지 → 페이드 아웃 (길이는 JS가 노출 시간으로 정한다) */
.toast { animation: toast-life 3000ms ease both; }
@keyframes toast-life {
  0% { opacity: 0; transform: translateY(-8px); }
  8% { opacity: 1; transform: translateY(0); }
  88% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-8px); }
}
@media (prefers-reduced-motion: reduce) {
  @keyframes toast-life {
    0% { opacity: 0; }
    8% { opacity: 1; }
    88% { opacity: 1; }
    100% { opacity: 0; }
  }
}

/* ==== 로비 7차: 자리 이름은 줄 상자 밖 왼쪽, 빈 자리는 점선 외곽만 ==== */
.lobby-seats {
  grid-template-columns: minmax(56px, auto) auto 64px minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) auto;
  column-gap: 10px;
}
.seat-place-out { grid-column: 1; align-self: center; min-width: 0; }
.lobby-seats > .seat-slot > .seat-row { grid-column: 2 / -1; }

/* 빈 자리: 안쪽은 비우고 외곽 점선만 */
.lobby-seat.empty { position: relative; display: block; height: 64px; }
.lobby-seat.empty .seat-add {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 0.2s ease, filter 0.12s;
}
.lobby-seat.empty:hover .seat-add,
.lobby-seat.empty:focus-within .seat-add,
.lobby-seat.empty.drop-over .seat-add { opacity: 1; }
.lobby-seat.empty .seat-add:active { transform: translate(-50%, calc(-50% + 1px)); }
@media (hover: none) {
  .lobby-seat.empty .seat-add { opacity: 1; }
}

@media (max-width: 768px) {
  .lobby-seats { grid-template-columns: auto minmax(0, 1fr); }
  .lobby-seats > .seat-slot > .seat-row { grid-column: 2; }
}

/* 모집 중: 경과 시간 */
.recruit-elapsed [data-recruit-elapsed] { font-variant-numeric: tabular-nums; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.04em; }
p.recruit-elapsed { color: var(--accent); font-weight: 700; }

/* ==== 캐릭터 생성: 좌(기본 정보·스탯) / 우(스킬·공격력/마력) ==== */
.char-form.desktop-form.split-col {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}
.form-side { display: grid; gap: 16px; align-content: start; min-width: 0; }
.form-side .form-col-stats,
.form-side .form-col-skills { width: 100%; justify-self: stretch; }
@media (max-width: 1100px) {
  .char-form.desktop-form.split-col { grid-template-columns: 1fr; }
}

/* ==== 캐릭터 생성: 기본 정보·스탯 카드는 240px 고정 ==== */
.char-form.desktop-form.split-col { grid-template-columns: 240px minmax(0, 1fr); }
.form-side-left { width: 240px; }
.form-side-left .form-col-identity,
.form-side-left .form-col-stats { width: 240px; min-width: 240px; max-width: 240px; box-sizing: border-box; }
@media (max-width: 1100px) {
  .char-form.desktop-form.split-col { grid-template-columns: 1fr; }
}

/* 레벨 입력칸 1.5배 (3ch → 4.5ch) */
.char-form .level-field input { width: 4.5ch; }

/* 스탯: 머리글(기본·추가)과 입력칸 줄이 같은 열 너비를 쓰도록 px로 통일 (em은 글씨 크기에 따라 달라짐) */
.form-side-left .stat-head,
.form-side-left .stat-row {
  grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 34px;
  width: 100%;
}
.form-side-left .stat-grid { width: 100%; }
.form-side-left .stat-head span:nth-child(2),
.form-side-left .stat-head span:nth-child(3) { justify-content: center; text-align: center; }

/* ==== 캐릭터 생성 4영역: 기본 정보·스탯(240) | 스킬(320) | 공격력/마력 | 최종 스탯 공격력 ==== */
.char-form.desktop-form.split-col { grid-template-columns: 240px 320px minmax(0, 1fr) minmax(0, 1fr); }
.split-col .form-col-skills { width: 320px; min-width: 320px; max-width: 320px; box-sizing: border-box; justify-self: start; }
.split-col .skill-head,
.split-col .skill-row,
.split-col .skill-list { width: 100%; max-width: 100%; }
/* 공격력/마력: 좁은 열이라 입력을 한 줄에 하나씩 */
.split-col .form-col-combat { white-space: normal; }
.split-col .form-col-combat .attack-grid,
.split-col .form-col-combat .attack-grid-row { grid-template-columns: 1fr; gap: 8px; }
/* 최종 스탯 공격력 카드 */
.form-col-result { position: relative; gap: 12px; color: var(--accent); font-variant-numeric: tabular-nums; }
.form-col-result .attack-result { padding: 12px; }
.form-col-result .attack-summary,
.form-col-result .attack-summary.two { grid-template-columns: 1fr; }
.form-col-result.is-locked { pointer-events: none; }
.form-col-result.is-locked > :not(.panel-lock) { opacity: 0.28; filter: grayscale(0.35); }
.form-col-result.is-locked .panel-lock { display: flex; }

@media (max-width: 1100px) {
  .char-form.desktop-form.split-col { grid-template-columns: 1fr; }
  .split-col .form-col-skills { width: 100%; min-width: 0; max-width: 320px; }
}

/* 최종 스탯 공격력: 안쪽 상자 없이 값만 */
.form-col-result .attack-result { padding: 0; border: 0; border-radius: 0; background: none; }
.attack-lines { display: grid; gap: 4px; margin: 0; }
.attack-lines dt { color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.attack-lines dt:not(:first-child) { margin-top: 10px; }
.attack-lines dd { margin: 0; color: var(--accent); font-size: 1.4rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* ==== 파티매칭 첫 화면: 캐릭터 카드(9:16) | 사냥터 1~3순위 / 버튼 3개 ==== */
.party-pick {
  display: grid;
  grid-template-columns: 180px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  width: min(720px, 100%);
  margin: 24px auto 0;
}
.char-portrait {
  --job: var(--accent);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  width: 180px;
  aspect-ratio: 9 / 16;
  padding: 16px 12px;
  border: 2px dashed var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: center;
  cursor: pointer;
  overflow: hidden;
  transition: border-color 0.12s, transform 0.06s;
}
.char-portrait.filled {
  border-style: solid;
  border-color: color-mix(in srgb, var(--job) 55%, var(--line));
  background: linear-gradient(180deg, color-mix(in srgb, var(--job) 28%, var(--card)) 0%, var(--card) 70%);
}
.char-portrait:hover:not(:disabled) { border-color: var(--accent); }
.char-portrait:disabled { cursor: default; opacity: 0.85; }
.char-portrait-level {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--card);
  border: 1px solid var(--line);
  font-size: 0.78rem;
  font-weight: 800;
}
.char-portrait-mark {
  display: grid;
  place-items: center;
  width: 84px;
  height: 84px;
  margin: auto 0 8px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--job) 22%, var(--card));
  color: color-mix(in srgb, var(--job) 80%, var(--ink));
  font-size: 2.2rem;
  font-weight: 800;
}
.char-portrait:not(.filled) .char-portrait-mark { color: var(--muted); background: var(--surface); }
.char-portrait-name { max-width: 100%; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.char-portrait-job { color: var(--muted); font-size: 0.84rem; font-weight: 700; }
.char-portrait-atk { color: var(--accent); font-size: 0.84rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.map-ranks { display: grid; grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px; min-width: 0; }
.map-rank {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--card);
}
.map-rank.ok { border-style: solid; }
.map-rank-no { flex: 0 0 52px; font-weight: 800; font-size: 0.9rem; text-align: center; }
.map-rank-no em { display: block; color: var(--boss); font-size: 0.68rem; font-style: normal; }
.map-rank-pick {
  flex: 1 1 auto;
  display: grid;
  gap: 2px;
  min-width: 0;
  height: 100%;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.map-rank-pick:hover:not(:disabled) { border-color: var(--accent); }
.map-rank-pick:disabled { cursor: default; }
.map-rank-pick strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-rank-pick strong.muted { color: var(--muted); font-weight: 700; }
.map-rank-pick small { color: var(--muted); font-size: 0.76rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-pick.used { opacity: 0.4; cursor: not-allowed; }

.party-cta-row.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.code-input { width: 100%; text-transform: uppercase; letter-spacing: 0.2em; font-weight: 800; text-align: center; font-size: 1.2rem; }

@media (max-width: 768px) {
  .party-pick { grid-template-columns: 120px minmax(0, 1fr); gap: 10px; }
  .char-portrait { width: 120px; }
  .char-portrait-mark { width: 56px; height: 56px; font-size: 1.5rem; }
  .party-cta-row.three { grid-template-columns: 1fr; }
}

/* 파티매칭: 사냥터 한 줄 + 자리 1~3순위 세 줄 */
.map-ranks { grid-template-rows: auto repeat(3, minmax(0, 1fr)); }
.map-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
  padding: 10px 14px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.map-head.ok { border-style: solid; }
.map-head:hover:not(:disabled) { border-color: var(--accent); }
.map-head:disabled { cursor: default; }
.map-head span { flex: 0 0 auto; color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.map-head strong { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-head small { flex: 0 0 auto; color: var(--muted); font-weight: 700; }
select.map-rank-pick { appearance: auto; height: auto; min-height: 38px; font-weight: 700; }
select.map-rank-pick:disabled { opacity: 0.6; }

/* 사냥터 이미지(WZ 미니맵) 배경: 글자가 읽히도록 카드색 그라데이션을 덮는다 */
.map-head.has-bg,
.map-pick.has-bg {
  background-image:
    linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--card) 85%, transparent) 45%, color-mix(in srgb, var(--card) 35%, transparent) 100%),
    var(--map-bg);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.map-head.has-bg { min-height: 64px; align-items: center; }
.map-head.has-bg strong,
.map-pick.has-bg strong { text-shadow: 0 0 6px var(--card); }

/* 캐릭터 카드: 직업 일러스트를 배경으로. 인물 중심으로 잘라 세로 카드에 맞추고, 아래쪽 글자는 카드색으로 덮어 읽히게 */
.char-portrait.has-art {
  background-color: #fff;
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 52%, color-mix(in srgb, var(--card) 80%, transparent) 70%, var(--card) 86%),
    var(--job-art);
  /* 얼굴·상반신만: 일러스트를 카드 너비의 3배로 키워 머리 쪽(가로 40%, 세로 5%)을 맞춘다 */
  background-size: 100% 100%, 300% auto;
  background-position: center, 40% 5%;
  background-repeat: no-repeat;
}
.char-portrait.has-art .char-portrait-mark { visibility: hidden; }

/* 로비 플레이어 줄: 직업 일러스트를 어둡고 투명하게 깐다 (얼굴 쪽을 보이게) */
.lobby-seat.has-art { position: relative; isolation: isolate; }
.lobby-seat.has-art::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image:
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.25) 100%),
    var(--job-art);
  background-size: 100% 100%, cover;
  background-position: center, 50% 22%;
  background-repeat: no-repeat;
  opacity: 0.22;
  pointer-events: none;
}

/* 로비 자리 배지: 글씨 20% 크게(0.84 → 1rem), 모든 자리 같은 크기의 정사각형. 사람이 있으면 활성, 없으면 비활성 */
.seat-place-out .cell-badge.seat-place {
  display: inline-grid;
  place-items: center;
  width: 54px;
  height: 54px;
  min-height: 0;
  padding: 0 4px;
  border-radius: 12px;
  font-size: 1rem;
  line-height: 1.1;
  white-space: normal;
  word-break: keep-all;
  text-align: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.seat-place-out .cell-badge.seat-place.on {
  border: 1px solid var(--accent);
  background: var(--accent);
  color: #fff;
  box-shadow: 0 2px 6px color-mix(in srgb, var(--accent) 35%, transparent);
}
.seat-place-out .cell-badge.seat-place.off {
  border: 1px solid color-mix(in srgb, var(--muted) 45%, var(--line));
  background: color-mix(in srgb, var(--muted) 30%, var(--surface));
  color: var(--card);
  box-shadow: none;
}

/* 파티장·나·더미 표시는 레벨 바로 오른쪽 (맨 왼쪽 배지 열은 없앰) */
.lobby-seats { grid-template-columns: minmax(56px, auto) minmax(64px, max-content) minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, 0.8fr) auto; }
/* 레벨은 줄 왼쪽 테두리에서 20px(줄 안쪽 여백 12px + 8px) 띄운 같은 위치에 두고, 뱃지는 그 오른쪽에 붙인다. */
.lobby-seat > .level-cell { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 4px; padding-left: 8px; white-space: nowrap; }
.name-tags { display: flex; justify-content: center; gap: 3px; line-height: 1; flex: 0 0 auto; }
.name-tags .seat-badge { margin: 0; padding: 1px 6px; font-size: 0.66rem !important; line-height: 1.3; }

/* ==== 파티매칭 3차 ==== */
/* 캐릭터 카드: 레벨은 닉네임 왼쪽 (배지 모양은 그대로), 일러스트는 30% 어둡게 */
.char-portrait-namerow { display: flex; align-items: center; justify-content: center; gap: 6px; max-width: 100%; min-width: 0; }
.char-portrait-namerow .char-portrait-level { position: static; flex: 0 0 auto; }
.char-portrait-namerow .char-portrait-name { min-width: 0; }
.char-portrait.has-art {
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 52%, color-mix(in srgb, var(--card) 80%, transparent) 70%, var(--card) 86%),
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    var(--job-art);
  background-size: 100% 100%, 100% 100%, 300% auto;
  background-position: center, center, 40% 5%;
}

/* 순위 줄: N순위 | 사냥터(누르면 선택 창) | 자리 | 비우기 */
.map-ranks { grid-template-rows: repeat(3, minmax(0, 1fr)); }
.map-rank { gap: 8px; }
.map-rank-map {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.map-rank-map strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-rank-map strong.muted { color: var(--muted); font-weight: 700; }
.map-rank-map:hover:not(:disabled) { border-color: var(--accent); }
.map-rank-map:disabled { cursor: default; }
.map-rank-map.has-bg {
  background-image:
    linear-gradient(90deg, var(--surface) 0%, color-mix(in srgb, var(--surface) 80%, transparent) 50%, color-mix(in srgb, var(--surface) 30%, transparent) 100%),
    var(--map-bg);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.map-rank select.map-rank-pick { flex: 1 1 0; min-width: 0; }

/* 버튼 줄: [사냥터 / 파티 생성] [파티매칭] [코드 입력 / 코드 입장] — 양옆은 위아래로 반씩 */
.party-cta-row.three { align-items: stretch; }
.cta-stack { display: grid; grid-template-rows: 1fr 1fr; gap: 8px; min-width: 0; margin: 0; }
.match-cta.half { min-height: 60px; padding: 8px 16px; border-radius: 14px; }
.map-head.small { min-height: 0; padding: 8px 12px; border-radius: 14px; }
.map-head.small strong { font-size: 0.95rem; }
.cta-stack .code-input { height: 100%; min-height: 52px; border-radius: 14px; }
@media (max-width: 768px) {
  .map-rank { flex-wrap: wrap; }
  .map-rank-no { flex-basis: 100%; text-align: left; }
}

/* 캐릭터 관리 카드: 직업 일러스트(얼굴·상반신, 30% 어둡게)를 위쪽 오른편에. 왼쪽 글자와 아래 스탯 쪽은 카드색으로 덮는다 */
.char-slot.filled.has-art {
  background:
    linear-gradient(180deg, transparent 0%, transparent 28%, color-mix(in srgb, var(--card) 85%, transparent) 46%, var(--card) 58%),
    linear-gradient(90deg, var(--card) 0%, color-mix(in srgb, var(--card) 75%, transparent) 30%, transparent 62%),
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)) left top / 100% 60% no-repeat,
    /* 너비 190%로 키우고 가로 13%에 두면 인물 머리(일러스트 가로 약 43%)가 카드 가로 약 70%에 온다 */
    var(--job-art) 13% -8px / 190% auto no-repeat,
    var(--card);
}
.char-slot.filled.has-art .char-title,
.char-slot.filled.has-art .char-job-line,
.char-slot.filled.has-art .char-level { text-shadow: 0 0 6px var(--card), 0 0 2px var(--card); }

/* 장면 이미지가 있는 사냥터: 로비 사냥터 카드 배경으로도 깐다 (어둡게 덮어 글자가 읽히게) */
.lobby-map.has-art {
  background-image:
    linear-gradient(180deg, color-mix(in srgb, var(--card) 55%, transparent) 0%, color-mix(in srgb, var(--card) 30%, transparent) 50%, color-mix(in srgb, var(--card) 70%, transparent) 100%),
    var(--map-bg);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}
.lobby-map.has-art .lobby-map-name strong,
.lobby-map.has-art .lobby-map-name span,
.lobby-map.has-art h2 { text-shadow: 0 0 8px var(--card), 0 0 3px var(--card); }

/* 파티매칭: 캐릭터(직업) 카드·파티 생성·코드 입장 테두리 없음 (배경과 구분되게 옅은 그림자만) */
.party-home .char-portrait,
.party-home .char-portrait.filled,
.party-home .char-portrait:hover:not(:disabled),
.party-home .match-cta.secondary-cta { border: 0; }
.party-home .char-portrait,
.party-home .match-cta.secondary-cta { box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1); }
.party-home .char-portrait:hover:not(:disabled),
.party-home .match-cta.secondary-cta:hover:not(:disabled) { box-shadow: 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent); }

/* ==== 파티매칭 직업 카드 2배 너비, 순위 줄은 자리 1/3 · 사냥터 넓게 ==== */
.party-pick { width: 100%; grid-template-columns: 360px minmax(0, 1fr); }
.char-portrait { width: 360px; }
.char-portrait-mark { width: 120px; height: 120px; font-size: 3rem; }
.char-portrait-name { font-size: 1.3rem; }
.char-portrait-job, .char-portrait-atk { font-size: 0.95rem; }
/* 예전엔 사냥터:자리 = 1:1 → 자리를 1/3로 줄이고 그만큼 사냥터를 늘린다 (5:1) */
.map-rank-map { flex: 5 1 0; }
.map-rank select.map-rank-pick { flex: 1 1 0; min-width: 84px; }
@media (max-width: 960px) {
  .party-pick { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .char-portrait { width: min(360px, 100%); }
  .map-ranks { width: 100%; }
}

/* ==== 캐릭터 관리 카드: 파티매칭 직업 카드와 같은 9:16 구성 ==== */
.char-slots .char-slot { aspect-ratio: 9 / 16; min-height: 0; border-radius: 14px; }
.char-slot.filled.char-card {
  padding: 0;
  justify-content: flex-end;
  align-items: stretch;
  overflow: hidden;
  border: 0;
  box-shadow: 0 2px 10px rgba(15, 23, 42, 0.1);
  background: linear-gradient(180deg, color-mix(in srgb, var(--job) 28%, var(--card)) 0%, var(--card) 60%);
}
.char-slot.filled.char-card.main { box-shadow: 0 0 0 2px var(--job), 0 2px 10px rgba(15, 23, 42, 0.1); }
.char-slot.filled.char-card.has-art {
  background-color: #fff;
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 36%, color-mix(in srgb, var(--card) 85%, transparent) 46%, var(--card) 54%),
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    var(--job-art);
  background-size: 100% 100%, 100% 100%, 300% auto;
  background-position: center, center, 40% 5%;
  background-repeat: no-repeat;
}
.char-card > .char-portrait-mark { margin: auto auto 0; }
.char-card-main { position: absolute; top: 12px; left: 12px; z-index: 1; }
.char-card-info { display: grid; justify-items: center; gap: 6px; padding: 14px 16px 16px; text-align: center; }
.char-card-info .char-stats { width: 100%; margin: 6px 0 0; }
.char-card-info .char-slot-actions { width: 100%; margin-top: 6px; }

/* ==== 어드민 사냥터 등록/수정: 자리마다 한 줄 (이름 | 1차 분류 | 2차 분류 | 최소 스탯공 | 필수 스킬) ==== */
.admin-hunt-modal { width: min(1180px, 100%); }
.admin-hunt-modal-body { grid-template-columns: calc(220px * 1.2) minmax(0, 2fr); }
.seat-fields { display: grid; gap: 8px; }
.seat-row-def {
  display: grid;
  grid-template-columns: 52px 120px minmax(0, 1fr) minmax(0, 1.4fr) 104px minmax(0, 1.4fr);
  gap: 10px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}
.seat-row-def > span.seat-row-no { align-self: center; font-weight: 800; font-size: 0.86rem; }
.seat-row-def label > span,
.seat-row-group > span { display: block; margin-bottom: 4px; color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.seat-row-group > span small { font-weight: 600; }
.seat-row-def input[type="text"],
.seat-row-def input[type="number"],
.seat-row-def select { width: 100%; min-height: 32px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.84rem; }
.seat-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.seat-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.seat-chip:has(input:checked) { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); }
.seat-chip input { margin: 0; }
.seat-skill-list { display: grid; gap: 4px; }
.seat-skill-req { display: grid; grid-template-columns: minmax(0, 1fr) 56px auto 28px; gap: 4px; align-items: center; }
.seat-skill-max { color: var(--muted); font-size: 0.74rem; white-space: nowrap; }
.seat-skill-req .seat-action.icon-only { width: 28px; height: 28px; min-width: 28px; min-height: 28px; font-size: 1rem; }
.seat-skill-empty { color: var(--muted); font-size: 0.76rem; font-style: normal; }
.seat-row-skills [data-add-skill] { justify-self: start; }
@media (max-width: 1100px) {
  .admin-hunt-modal-body { grid-template-columns: 1fr; }
  .seat-row-def { grid-template-columns: 52px minmax(0, 1fr); }
  .seat-row-def > :not(.seat-row-no) { grid-column: 2; }
}
/* 어드민 자리 줄: 1차·2차 분류는 선택칸 하나씩 */
.seat-row-def { grid-template-columns: 52px 120px 110px 130px 104px minmax(0, 1fr); }

/* 캐릭터 스킬: 0차~4차 탭 */
.skill-tabs { display: flex; gap: 4px; padding: 3px; border-radius: 10px; background: var(--surface); }
.skill-tabs[hidden] { display: none; }
.skill-tab {
  flex: 1 1 0;
  min-height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}
.skill-tab small { margin-left: 2px; padding: 0 5px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.7rem; }
.skill-tab:hover { color: var(--ink); }
.skill-tab.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.skill-row[hidden] { display: none !important; }

/* 스킬 SP (AP와 같은 모양) */
.skill-sp { margin-top: 4px; }
.form-col-skills .skill-head { display: none; }

/* ==== 파티매칭 4차: 사냥터 이미지는 그라데이션 없이, 캐릭터 카드 높이 60%(640→384px), 순위 5줄을 카드 높이에 맞춰 5등분 ==== */
.map-head.has-bg,
.map-pick.has-bg,
.map-rank-map.has-bg,
.lobby-map.has-art {
  background-image: var(--map-bg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 그라데이션이 없으니 글자는 테두리 그림자로 읽히게 */
.map-head.has-bg strong, .map-head.has-bg span,
.map-pick.has-bg strong, .map-pick.has-bg em,
.map-rank-map.has-bg strong {
  color: #fff;
  text-shadow: 0 0 3px rgba(0, 0, 0, 0.9), 0 1px 6px rgba(0, 0, 0, 0.7);
}
.party-home .char-portrait { aspect-ratio: auto; height: 384px; }
.party-home .map-ranks { height: 384px; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 6px; }
.party-home .map-rank { padding: 4px 10px; min-height: 0; }
.party-home .map-rank-map { min-height: 0; padding: 4px 10px; }
.party-home .map-rank select.map-rank-pick { min-height: 32px; }
@media (max-width: 960px) {
  .party-home .map-ranks { height: auto; }
}

/* ==== 파티매칭 5차: 4순위, 사냥터 이미지 30% 어둡게, 이름·인원 + 오른쪽 지참금 ==== */
.party-home .map-ranks { grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; }
.map-rank-map.has-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--map-bg);
  background-size: cover, cover;
}
.map-rank-map { display: flex; align-items: center; gap: 8px; }
.map-rank-map strong { flex: 0 1 auto; min-width: 0; }
.map-rank-map small { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 0.74rem; font-weight: 800; }
.map-rank-map:not(.has-bg) small { background: var(--surface); color: var(--muted); }
.map-rank-meso { flex: 0 0 150px; display: grid; gap: 2px; min-width: 0; }
.map-rank-meso > span:first-child { color: var(--muted); font-size: 0.7rem; font-weight: 800; }
.meso-field { display: flex; align-items: center; gap: 4px; }
.meso-field input {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-weight: 800;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.meso-field input:disabled { opacity: 0.55; }
.meso-field em { color: var(--muted); font-size: 0.76rem; font-style: normal; font-weight: 700; }
@media (max-width: 768px) {
  .map-rank-meso { flex-basis: 100%; }
}

/* 사냥터 이미지 더 어둡게(50%), 지참금은 만 단위 네 자리 너비만 */
.map-rank-map.has-bg { background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--map-bg); }
.map-rank-meso { flex: 0 0 auto; width: auto; }
.map-rank-meso > span:first-child { white-space: nowrap; font-size: 0.66rem; }
.meso-field { gap: 3px; }
.meso-field input { flex: 0 0 auto; width: calc(4ch + 18px); padding: 4px 6px; text-align: right; }
.meso-field em { white-space: nowrap; }

/* 사냥터 칸 내용(이름·인원)은 칸 정가운데에 절대 위치 */
.map-rank-map { position: relative; }
.map-rank-map-body {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  text-align: center;
  pointer-events: none;
}
/* 내용이 절대 위치라 칸 높이를 받쳐 줄 게 없으니, 순위 칸 높이가 자동인 좁은 화면에서는 최소 높이를 준다 */
@media (max-width: 960px) {
  .party-home .map-rank-map { min-height: 40px; }
}

/* 파티 생성 위 사냥터 버튼도 순위 사냥터 칸과 같은 50% 어둡게 */
.map-head.has-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), var(--map-bg);
  background-size: cover, cover;
  background-position: center, center;
}

/* 파티매칭 선택 캐릭터 카드 너비 80% (360 → 288px) */
.party-home .party-pick { grid-template-columns: 288px minmax(0, 1fr); }
.party-home .char-portrait { width: 288px; }
@media (max-width: 960px) {
  .party-home .party-pick { grid-template-columns: minmax(0, 1fr); }
  .party-home .char-portrait { width: min(288px, 100%); }
}

/* ==== 파티매칭 6차: 사냥터 이미지 75% 어둡게(50%에서 절반 더), 순위 줄은 고정 칸 그리드로 사냥터 칸 너비 통일,
   오른쪽은 희망 포지션 / 지참금 두 줄 ==== */
.map-rank-map.has-bg,
.map-head.has-bg { background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), var(--map-bg); }

/* 순위 | 사냥터 | 포지션·지참금 | 비우기(없어도 자리는 비워 둔다) */
.map-rank {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) 260px 30px;
  align-items: stretch;
  gap: 8px;
}
.map-rank > .map-rank-no,
.map-rank > .map-rank-clear,
.map-rank > .map-rank-clear-slot { align-self: center; }
.map-rank .map-rank-map { width: 100%; height: auto; }
.map-rank-opts { display: grid; grid-template-rows: 1fr 1fr; gap: 4px; min-width: 0; }
.map-rank-opt { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: center; gap: 6px; min-width: 0; }
.map-rank-opt > span:first-child { color: var(--muted); font-size: 0.74rem; font-weight: 800; white-space: nowrap; }
/* 자리 선택 글자는 사냥터 이름과 같은 크기 */
.map-rank .map-rank-opt select.map-rank-pick { width: 100%; min-width: 0; min-height: 30px; padding: 2px 6px; font-size: inherit; }
.party-home .map-rank .map-rank-opt select.map-rank-pick { min-height: 30px; }
.map-rank-meso { width: auto; }
.meso-field input { min-height: 30px; }
@media (max-width: 768px) {
  .map-rank { grid-template-columns: minmax(0, 1fr) 30px; }
  .map-rank-no { grid-column: 1 / -1; text-align: left; }
  .map-rank-opts { grid-column: 1 / -1; grid-row: 3; }
}
/* 희망 포지션은 자리 이름만 → 오른쪽 칸을 줄이고 사냥터 칸을 넓힌다 */
.map-rank { grid-template-columns: 52px minmax(0, 1fr) 200px 30px; }
.map-rank-opt { grid-template-columns: 84px minmax(0, 1fr); }
@media (max-width: 768px) {
  .map-rank { grid-template-columns: minmax(0, 1fr) 30px; }
}
/* 사냥터 선택 모달 카드: 65% 어둡게 (로비 75%보다 10%p 밝게) */
.map-pick.has-bg {
  background-image: linear-gradient(rgba(0, 0, 0, 0.65), rgba(0, 0, 0, 0.65)), var(--map-bg);
  background-size: cover, cover;
  background-position: center, center;
}

/* 사냥터 선택 모달: 이름 옆 인원 뱃지, 아래 자리마다 흰색 뱃지 */
.map-pick-body { display: grid; gap: 6px; min-width: 0; }
.map-pick-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.map-pick-title strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.map-pick-cap { flex: 0 0 auto; padding: 1px 7px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.74rem; font-weight: 800; }
.map-pick.has-bg .map-pick-cap { background: rgba(0, 0, 0, 0.45); color: #fff; }
.map-pick-seats { display: flex; flex-wrap: wrap; gap: 4px; }
.map-pick-seat {
  padding: 2px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #1f2937;
  font-size: 0.74rem;
  font-weight: 800;
  line-height: 1.4;
}
.map-pick.has-bg .map-pick-seat { border-color: transparent; background: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35); }

/* ==== 파티 로비: 사냥터 배경 75% 어둡게 ==== */
.lobby-map.has-art { background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), var(--map-bg); background-size: cover, cover; background-position: center, center; }
.lobby-map.has-art h2,
.lobby-map.has-art .lobby-map-name strong,
.lobby-map.has-art .lobby-map-name span { color: #fff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }

/* ==== 파티 로비 빈 자리: 조건·지참금 뱃지, 파티장 hover 시 [조건 추가][지참금 설정][이미 구한 자리] ==== */
.lobby-seat.empty { overflow: hidden; }
.seat-extras {
  position: absolute;
  inset: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  align-content: center;
  gap: 4px;
  padding: 4px 10px;
  transition: opacity 0.2s ease;
}
.seat-extra-badge { padding: 2px 9px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); font-size: 0.76rem; font-weight: 800; white-space: nowrap; }
.seat-extra-badge.meso { background: color-mix(in srgb, #f59e0b 18%, var(--card)); color: #b45309; }
.seat-empty-button.seat-action {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto; min-height: 28px; height: 28px; padding: 0 12px;
  border-radius: 999px; font-size: 0.82rem; font-weight: 800; white-space: nowrap;
  box-shadow: none;
}
/* 빈 자리: hover 오버레이 없음. 파티장은 조건 뱃지를 눌러 수정 */
.lobby-page .seat-extras .seat-cond-badge[data-seat-action] { cursor: pointer; }
.lobby-page .seat-extras .seat-cond-badge[data-seat-action]:hover {
  filter: brightness(1.12);
}

/* 파티원 찾는 중: 빈 자리 위로 빛이 흘러가는 매칭중 효과 */
.lobby-seat.empty.searching { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.lobby-seat.empty.searching::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 0%, transparent 30%, color-mix(in srgb, var(--accent) 22%, transparent) 50%, transparent 70%, transparent 100%) 0 0 / 250% 100% no-repeat;
  animation: seat-flow 1.8s linear infinite;
  pointer-events: none;
}
.lobby-seat.empty.searching::after {
  content: "매칭중…";
  position: absolute;
  right: 14px;
  bottom: 6px;
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 800;
  pointer-events: none;
  animation: seat-blink 1.4s ease-in-out infinite;
}
@keyframes seat-flow {
  from { background-position: 150% 0; }
  to { background-position: -150% 0; }
}
@keyframes seat-blink {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .lobby-seat.empty.searching::before,
  .lobby-seat.empty.searching::after { animation: none; }
}

/* 조건 추가 모달 */
.cond-sets { display: grid; gap: 12px; margin-bottom: 12px; }
.cond-set { display: grid; gap: 10px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.cond-set legend { padding: 0 6px; font-weight: 800; }
.cond-set legend .link-button { margin-left: 6px; color: var(--boss); font-size: 0.8rem; }
.cond-field { display: grid; gap: 6px; }
.cond-field > span { color: var(--muted); font-size: 0.8rem; font-weight: 800; }
.cond-field > span em { color: var(--boss); font-style: normal; }
.cond-field > span small { font-weight: 600; }
.cond-field select,
.cond-field input { min-height: 34px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; }
.cond-skills { display: flex; flex-wrap: wrap; gap: 6px; max-height: 220px; overflow-y: auto; }
.cond-skill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.cond-skill.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--card)); color: var(--accent); }
.cond-skill input { margin: 0; }
.cond-skill select { min-height: 0; padding: 0 2px; border: 0; border-radius: 6px; background: var(--card); color: inherit; font: inherit; font-size: 0.78rem; }
.cond-empty { color: var(--muted); font-size: 0.8rem; font-style: normal; }
.meso-modal-field input { width: calc(4ch + 24px); min-height: 38px; font-size: 1.1rem; }

/* 파티매칭 첫 화면: 파티 생성 사냥터 버튼을 없애 [파티 생성]이 한 칸을 다 쓴다 */
.party-cta-row.three > .match-cta.secondary-cta { min-height: 0; height: 100%; }

/* 파티 로비 사냥터: 파티장이고 매칭 중이 아닐 때 눌러서 사냥터를 바꾼다 */
.lobby-map.editable { cursor: pointer; transition: box-shadow 0.15s ease; }
.lobby-map.editable:hover { box-shadow: 0 0 0 2px var(--accent), 0 4px 16px color-mix(in srgb, var(--accent) 30%, transparent); }
.lobby-map.editable h2::after { content: " · 눌러서 변경"; color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.lobby-map.editable.has-art h2::after { color: rgba(255, 255, 255, 0.75); }

/* ==== 조건 추가 모달 2차: 세트 한 줄 = 직업 3줄(직업군·1차·2차) | 스킬(아이콘·이름·스킬 포인트) | 스탯 공격력 ==== */
.cond-modal { width: min(1040px, 100%); }
.cond-set { grid-template-columns: 200px minmax(0, 1fr) 180px; align-items: start; gap: 14px; }
.cond-set legend { grid-column: 1 / -1; }
.cond-jobs { display: grid; grid-template-rows: repeat(3, auto); gap: 8px; }
.cond-field select:disabled { opacity: 0.55; }
.cond-skills-col { min-width: 0; }
.cond-placeholder {
  display: grid;
  place-items: center;
  min-height: 150px;
  margin: 0;
  border: 1.5px dashed var(--line);
  border-radius: 10px;
  color: var(--muted);
  font-weight: 700;
}
.cond-skill-list { display: grid; gap: 4px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.cond-skill-row {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) 72px;
  align-items: center;
  gap: 8px;
  padding: 3px 8px;
  border: 1px solid transparent;
  border-radius: 8px;
}
.cond-skill-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--card)); }
.cond-skill-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.86rem; font-weight: 700; }
.cond-skill-name small { color: var(--muted); font-size: 0.72rem; font-weight: 600; }
.cond-skill-row select { min-height: 30px; padding: 2px 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.84rem; }
.cond-atk small { color: var(--muted); font-size: 0.74rem; line-height: 1.4; }
@media (max-width: 860px) {
  .cond-set { grid-template-columns: minmax(0, 1fr); }
}

/* 이미 구한 자리(더미) 레벨 입력: 위아래 화살표 없애기 */
.seat-input[data-dummy-level] { -moz-appearance: textfield; appearance: textfield; }
.seat-input[data-dummy-level]::-webkit-outer-spin-button,
.seat-input[data-dummy-level]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* 파티매칭 순위: 지참 금액 칸 안 오른쪽에 "만", 희망 포지션 선택칸은 지참 금액 칸과 같은 너비 */
.map-rank { --rank-field-width: 104px; }
.map-rank .meso-field { position: relative; width: var(--rank-field-width); }
.map-rank .meso-field input { width: 100%; padding-right: 24px; text-align: right; }
.map-rank .meso-field em { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); pointer-events: none; }
.map-rank .meso-field:has(input:disabled) em { opacity: 0.55; }
.map-rank .map-rank-opt select.map-rank-pick { width: var(--rank-field-width); justify-self: center; }
.map-rank .map-rank-meso .meso-field { justify-self: center; }

/* 어드민 사이트 설정: 켜기·끄기 스위치 */
.admin-switches { display: grid; gap: 8px; max-width: 720px; }
.admin-switch { position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.admin-switch input { position: absolute; opacity: 0; pointer-events: none; }
.admin-switch-track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; border-radius: 999px; background: var(--line); transition: background 0.15s; }
.admin-switch-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform 0.15s; }
.admin-switch input:checked + .admin-switch-track { background: var(--accent); }
.admin-switch input:checked + .admin-switch-track::after { transform: translateX(18px); }
.admin-switch input:focus-visible + .admin-switch-track { outline: 2px solid var(--accent); outline-offset: 2px; }
.admin-switch input:disabled + .admin-switch-track { opacity: 0.6; }
.admin-switch-text { display: grid; gap: 2px; flex: 1 1 auto; min-width: 0; }
.admin-switch-text small { color: var(--muted); font-size: 0.8rem; }
.admin-switch-state { flex: 0 0 auto; color: var(--muted); font-style: normal; font-weight: 800; }
.admin-switch input:checked ~ .admin-switch-state { color: var(--accent); }

/* 어드민 자리 줄: 이름 | 프리/비숍 자리 체크만 (직업·스탯공·스킬 조건 없음) */
.admin-hunt-modal { width: min(1140px, 100%); } /* 760px의 1.5배 */
.seat-row-def { grid-template-columns: 52px minmax(0, 1fr) auto; align-items: end; }
.seat-row-def > span.seat-row-no { align-self: end; padding-bottom: 7px; }
.seat-row-def label.seat-row-free { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; white-space: nowrap; cursor: pointer; }
.seat-row-def label.seat-row-free > span { display: inline; margin: 0; color: var(--ink); font-size: 0.84rem; }
.seat-row-free input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
@media (max-width: 1100px) {
  .seat-row-def { grid-template-columns: 52px minmax(0, 1fr) auto; }
  .seat-row-def > :not(.seat-row-no) { grid-column: auto; }
}

/* 어드민 사냥터 등록/수정: 타이틀 4 : 인원수 1 한 줄, 자리는 한 줄에 나란히 (이름칸은 한글 세 글자 너비) */
.preset-head-row { display: grid; grid-template-columns: 4fr 1fr; gap: 10px; align-items: end; }
.preset-head-row label { min-width: 0; }
.preset-head-row input, .preset-head-row select { width: 100%; }
.seat-fields { display: flex; flex-wrap: nowrap; gap: 6px; overflow-x: auto; padding-bottom: 2px; }
.seat-row-def { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; grid-template-columns: none; }
.seat-row-def label.seat-row-name { display: grid; justify-items: center; gap: 2px; }
.seat-row-def label.seat-row-name > span { margin: 0; color: var(--muted); font-size: 0.72rem; font-weight: 800; }
.seat-row-def .seat-row-name input[type="text"] { width: calc(3em + 18px); padding: 4px 6px; text-align: center; }
.seat-row-def label.seat-row-free { min-height: 0; gap: 4px; }
.seat-row-def label.seat-row-free > span { font-size: 0.72rem; color: var(--muted); }
.seat-row-free input { width: 14px; height: 14px; }
@media (max-width: 1100px) {
  .seat-row-def { grid-template-columns: none; }
}

/* 로비: 사냥터를 아직 고르지 않았을 때 */
.lobby-map.no-map { background: #0b0b0d; border-color: #27272a; color: #e4e4e7; }
.lobby-map.no-map h2 { color: #a1a1aa; }
/* 미선택: 패널 높이 절반 크기의 ? 와 안내 문구를 세로·가로 가운데에 */
.lobby-map.no-map { min-height: 260px; }
.lobby-map-empty {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  color: #e4e4e7;
  font-weight: 800;
  text-align: center;
}
.lobby-map-empty-mark { font-size: 130px; line-height: 1; font-weight: 900; color: #3f3f46; }
.lobby-map-empty p { margin: 0; }
.lobby-map.no-map.editable:hover .lobby-map-empty-mark { color: var(--accent); }
.lobby-map.no-map.editable:hover { border-color: var(--accent); }

/* 어드민 현황: 카드 5개 (현재 매칭 중, 최고 매칭 수 추가) */
.admin-stats { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }
.admin-stats small { display: block; margin-top: 4px; color: var(--muted); font-size: 0.76rem; font-weight: 700; }

/* 로비 헤더: 상태·인원·역할 대신 사냥터 이름 한 줄 */
.lobby-page .lobby-head .summary { flex: 1 1 240px; min-width: 0; }
.lobby-head-map { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.15rem; font-weight: 800; color: var(--ink); }
.lobby-head-map.muted { color: var(--muted); font-size: 1rem; font-weight: 700; }

/* ==== 파티매칭 순위 카드 (시안 G5 + S6, 1~5순위) ====
   한 줄 카드: 왼쪽은 짙은 단색, 사냥터 그림은 오른쪽 62%에만. 왼쪽 세로 띠 색이 상태(준비 완료·자리 미선택·필수·선택 안 함)
   오른쪽은 불투명 검정 묶음 안에 [자리] [메소 금액] [배달심⇄매미심] */
.party-home .char-portrait { height: 440px; }
.party-home .map-ranks { height: 440px; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 960px) {
  .party-home .map-ranks { height: auto; grid-template-rows: none; }
}
.rank-card.s-done { --st: #22c55e; }
.rank-card.s-warn { --st: #f59e0b; }
.rank-card.s-need { --st: #ef4444; }
.rank-card.s-off { --st: #71717a; }
.rank-card {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
  min-height: 0;
  padding: 6px 10px 6px 0;
  overflow: hidden;
  border: 1px solid #1f2937;
  border-radius: 12px;
  color: #fff;
  background-color: #0b0f19;
  background-image: linear-gradient(90deg, rgba(11, 15, 25, 0.85) 0%, rgba(11, 15, 25, 0.85) 38%, rgba(11, 15, 25, 0.55) 70%, rgba(11, 15, 25, 0.45) 100%), var(--map-bg, none);
  background-size: auto, 62% auto;
  background-position: center, right center;
  background-repeat: no-repeat;
  box-shadow: inset 4px 0 0 var(--st);
}
html.dark .rank-card { border-color: #3f3f46; }
.rank-card-map {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 14px;
  min-width: 0;
  height: 100%;
  padding: 0 0 0 18px;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.rank-card-map:disabled { cursor: default; }
.rank-card-map:hover:not(:disabled) .rank-card-title strong { text-decoration: underline; text-underline-offset: 3px; }
.rank-card-no { flex: 0 0 auto; color: var(--st); font-size: 1.05rem; font-weight: 900; white-space: nowrap; }
.rank-card-name { display: grid; gap: 2px; min-width: 0; }
.rank-card-name small { font-size: 0.74rem; font-weight: 700; opacity: 0.85; }
.rank-card-name small b { color: var(--st); }
.rank-card-title { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rank-card-title strong { min-width: 0; overflow: hidden; font-size: 1.1rem; text-overflow: ellipsis; white-space: nowrap; }
.rank-card-cap { flex: 0 0 auto; padding: 2px 9px; border-radius: 999px; background: #fff; color: #111827; font-size: 0.8rem; font-weight: 900; line-height: 1.3; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4); }
/* 비우기: 자리·메소·배달심 칩과 같은 알약 테두리·높이, X만 위험색 */
.rank-card-clear {
  display: inline-grid; flex: 0 0 auto; place-items: center;
  width: 32px; height: 32px; padding: 0;
  border: 1.5px solid #3f3f46; border-radius: 999px; background: #18181b;
  color: #ef4444; cursor: pointer;
}
.rank-card-clear .ui-icon { width: 15px; height: 15px; }
.rank-card-clear:hover { border-color: #ef4444; background: rgba(239, 68, 68, 0.18); color: #fca5a5; }
.rank-card-clear-slot { flex: 0 0 auto; width: 32px; }

/* 자리·금액·배달심을 감싸는 영역: 불투명 검정 */
.rank-chips { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; padding: 4px; border: 1px solid #27272a; border-radius: 999px; background: #000; }

/* 자리 버튼: 폭은 한글 3글자 + 여백으로 고정, 가로·세로 가운데 (넘치면 말줄임, 전체 이름은 툴팁).
   안 고르면 노란 테두리, 고르면 파란 테두리에 자리 이름 */
.rank-seat {
  display: inline-grid; place-items: center; flex: 0 0 auto;
  width: 72px; height: 32px; padding: 0 4px;
  border: 1.5px solid #3f3f46; border-radius: 999px; background: #18181b; color: #fff;
  font: inherit; font-size: 0.86rem; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.rank-seat span { display: block; max-width: 100%; overflow: hidden; line-height: 1; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.rank-seat:not(.on):not(:disabled) { border-color: #facc15; color: #fde68a; }
.rank-seat:hover:not(:disabled) { border-color: #a1a1aa; }
.rank-seat.on { border-color: #3b82f6; }
.rank-seat.on:hover:not(:disabled) { border-color: #93c5fd; }
.rank-seat:disabled { cursor: default; }

/* 금액 뱃지: Item.wz 메소(돈 자루) 아이콘 + 입력 + 만 */
/* 전역 label 규칙(flex-direction: column, 작은 회색 글씨)을 덮어써야 아이콘·입력·"만"이 한 줄로 선다 */
.rank-meso {
  display: inline-flex; flex-direction: row; flex: 0 0 auto; align-items: center; gap: 4px;
  height: 32px; padding: 0 10px 0 6px;
  border: 1.5px solid #3f3f46; border-radius: 999px; background: #18181b;
  color: #fff; font-size: 0.86rem; font-weight: 800; white-space: nowrap;
}
.rank-meso.has { border-color: #facc15; }
.rank-meso:focus-within { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25); }
.rank-meso img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.rank-meso input { width: 4.2ch; min-height: 0; padding: 0; border: 0; outline: 0; background: transparent; color: inherit; font: inherit; text-align: right; }
.rank-meso input::placeholder { color: rgba(255, 255, 255, 0.55); font-weight: 700; }
.rank-meso em { color: rgba(255, 255, 255, 0.6); font-size: 0.8rem; font-style: normal; }

/* 배달심 → 매미심 → 힐케어 (3단): 글자는 알약 안 가운데, 알약 양옆 회색 트랙은 각각 알약의 22% */
.sim-switch {
  --sim-font: 0.78rem;
  --sim-pill: calc(var(--sim-font) * 3.2 + 16px); /* 3글자 + 좌우 패딩 */
  --sim-gap: calc(var(--sim-pill) * 0.22); /* 회색 여유 ≈ 예전 10%의 2배 */
  position: relative; display: inline-grid; grid-template-columns: 1fr; align-items: center;
  flex: 0 0 auto; box-sizing: border-box;
  width: calc(var(--sim-pill) + var(--sim-gap) * 2 + 4px); height: 32px; padding: 0;
  border: 1.5px solid #3f3f46; border-radius: 999px; background: #27272a;
  font: inherit; cursor: pointer; isolation: isolate; overflow: hidden;
}
.sim-switch::before {
  content: ""; position: absolute; z-index: -1;
  top: 2px; bottom: 2px; left: 2px; width: var(--sim-pill);
  border-radius: 999px; background: #16a34a;
  transition: left 0.22s cubic-bezier(0.4, 0, 0.2, 1), background 0.22s ease;
}
.sim-switch[data-value="mae"]::before {
  left: calc(2px + var(--sim-gap));
  background: #7c3aed;
}
.sim-switch[data-value="heal"]::before {
  left: calc(100% - 2px - var(--sim-pill));
  background: #db2777;
}
.sim-switch span {
  grid-area: 1 / 1; box-sizing: border-box; display: grid; place-items: center; height: 100%;
  color: #a1a1aa; font-size: var(--sim-font); font-weight: 800; white-space: nowrap;
  transition: color 0.22s ease, padding 0.22s ease;
}
/* 알약 쪽만 글자 영역으로 쓰고, 회색 갭만큼 패딩을 줘서 알약 기준 가운데 정렬 */
.sim-switch[data-value="delivery"] span:nth-child(1) { padding-right: calc(var(--sim-gap) * 2); color: #fff; }
.sim-switch[data-value="mae"] span:nth-child(2) { color: #fff; }
.sim-switch[data-value="heal"] span:nth-child(3) { padding-left: calc(var(--sim-gap) * 2); color: #fff; }
.sim-switch:hover:not(:disabled) { border-color: #a1a1aa; }
.sim-switch:disabled { cursor: default; }
@media (prefers-reduced-motion: reduce) { .sim-switch::before, .sim-switch span { transition: none; } }

/* 사냥터를 안 고른 순위: 스켈레톤. 글자 대신 멈춰 있는 회색 막대, 마우스를 올리면 "사냥터 선택" */
.rank-card.skeleton {
  border: 1px solid var(--line);
  background: var(--card);
  color: var(--muted);
  box-shadow: inset 4px 0 0 var(--st);
}
.rank-card.skeleton.s-off { box-shadow: inset 4px 0 0 var(--line); }
.rank-card.skeleton .rank-card-no { color: var(--muted); }
.rank-card.skeleton.s-need .rank-card-no { color: var(--st); }
.rank-card.skeleton .rank-card-map { position: relative; }
.rank-card.skeleton .rank-card-name { flex: 1 1 auto; gap: 7px; max-width: 260px; }
.sk-bar, .sk-pill {
  display: block;
  border-radius: 999px;
  background: var(--surface);
}
.sk-bar { height: 10px; }
.sk-bar.short { width: 38%; height: 8px; }
.sk-bar.long { width: 78%; height: 14px; }
.sk-chips { border-color: var(--line); background: transparent; }
.sk-pill { height: 32px; }
.sk-pill.seat { width: 72px; }
.sk-pill.meso { width: 92px; }
.sk-pill.sim { width: 120px; }
.sk-hint {
  position: absolute; left: 50%; top: 50%;
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--accent); color: #fff; font-size: 0.82rem; font-weight: 800; white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%); transition: opacity 0.15s ease; pointer-events: none;
}
.sk-hint svg { width: 14px; height: 14px; }
.rank-card.skeleton .rank-card-map:hover:not(:disabled) .sk-hint,
.rank-card.skeleton .rank-card-map:focus-visible .sk-hint { opacity: 1; }

/* 끌어서 순위 옮기기 */
.rank-card[draggable="true"] { cursor: grab; }
.rank-card[draggable="true"] .rank-card-map { cursor: grab; }
.rank-card.dragging { opacity: 0.45; cursor: grabbing; }
.rank-card.drop-target { outline: 2px dashed var(--accent); outline-offset: 2px; }

/* 자리 고르기 팝오버 (불투명 검정) */
.seat-pop { position: fixed; z-index: 50; display: grid; grid-template-columns: repeat(3, auto); gap: 6px; padding: 10px; border: 1px solid #27272a; border-radius: 12px; background: #000; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); }
.seat-pop button { height: 32px; padding: 0 12px; border: 1px solid #3f3f46; border-radius: 999px; background: #18181b; color: #fff; font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.seat-pop button:hover:not(:disabled) { border-color: #3b82f6; color: #93c5fd; }
.seat-pop button.on { border-color: #3b82f6; background: #3b82f6; color: #fff; }
.seat-pop button:disabled { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; }
.seat-pop button.any { grid-column: 1 / -1; border-style: dashed; } /* 상관없음: 한 줄 전체 */
.seat-pop button.any.on { border-style: solid; }
.seat-pop .reset { grid-column: 1 / -1; background: transparent; color: #a1a1aa; }

@media (max-width: 768px) {
  .rank-card { flex-wrap: wrap; padding-left: 0; }
  .rank-chips { order: 3; margin-left: 18px; }
}

/* ==== 캐릭터 카드(파티매칭·캐릭터 관리): 일러스트 아래를 회색(카드색) 대신 검정으로 덮는다 ==== */
.char-portrait.has-art,
.party-home .char-portrait.has-art {
  background-color: #000;
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 46%, rgba(0, 0, 0, 0.82) 66%, #000 84%),
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    var(--job-art);
  background-size: 100% 100%, 100% 100%, 300% auto;
  background-position: center, center, 40% 5%;
  background-repeat: no-repeat;
}
.char-slot.filled.char-card.has-art {
  background-color: #000;
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 32%, rgba(0, 0, 0, 0.85) 44%, #000 54%),
    linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
    var(--job-art);
}
.char-portrait.has-art .char-portrait-name,
.char-card.has-art .char-portrait-name { color: #fff; }
.char-portrait.has-art .char-portrait-job,
.char-card.has-art .char-portrait-job { color: rgba(255, 255, 255, 0.72); }
.char-portrait.has-art .char-portrait-atk,
.char-card.has-art .char-portrait-atk { color: #93c5fd; }

/* 파티매칭 캐릭터 카드: 직업색을 살짝 섞은 1px 테두리 (순위 카드와 같은 굵기) */
.party-home .char-portrait,
.party-home .char-portrait.filled { border: 1px solid var(--line); }
.party-home .char-portrait.has-art { border: 1px solid color-mix(in srgb, var(--job, #3f3f46) 55%, #27272a); }
.party-home .char-portrait:hover:not(:disabled) { border: 1px solid var(--accent); }

/* 캐릭터 관리: 끌어서 자리 옮기기 */
.char-slots .char-card[draggable="true"] { cursor: grab; }
.char-slots .char-card.dragging { opacity: 0.45; cursor: grabbing; }
.char-slots .char-slot.drop-target { outline: 2px dashed var(--accent); outline-offset: 3px; }
.char-slots.moving .char-slot { pointer-events: none; opacity: 0.6; }

/* 캐릭터 관리 카드: 검정은 닉네임 줄부터 아래로 꽉 채우고, 닉네임 위로 올라갈수록 밝아진다 */
.char-slot.filled.char-card.has-art {
  background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)), var(--job-art);
  background-size: 100% 100%, 300% auto;
  background-position: center, 40% 5%;
}
.char-card.has-art .char-card-info { position: relative; background: #000; }
.char-card.has-art .char-card-info::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 160px;
  background: linear-gradient(0deg, #000 0%, rgba(0, 0, 0, 0.75) 30%, rgba(0, 0, 0, 0.35) 65%, transparent 100%);
  pointer-events: none;
}

/* ==== 파티매칭 하단 버튼 (시안 C1): 1 : 2 : 1, 가운데 파티매칭만 두 배 폭, 양옆은 아이콘 얹은 보조 버튼 ==== */
.party-home .party-cta-row.three { grid-template-columns: 1fr 2fr 1fr; gap: 12px; width: min(860px, 100%); }
.party-home .party-cta-row.three > .match-cta { min-height: 110px; }
.party-home .party-cta-row.three > .match-cta:not(.secondary-cta) { gap: 4px; padding: 18px 24px; border-radius: 18px; }
.party-home .match-cta.cta-side { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-radius: 16px; }
.party-home .match-cta.cta-side .ui-icon { width: 26px; height: 26px; color: var(--accent); }
.party-home .match-cta.cta-side .match-cta-label,
.party-home .cta-stack .match-cta-label { font-size: 1.1rem; }
.party-home .cta-stack { gap: 8px; }
.party-home .cta-stack .code-input { min-height: 0; border-radius: 12px; font-size: 1.05rem; }
.party-home .cta-stack .match-cta.half { min-height: 0; border-radius: 12px; }
.party-home .match-cta:not(.secondary-cta) .match-cta-sub { font-size: 0.82rem; font-weight: 700; opacity: 0.8; }
.party-home .match-cta.matching .match-cta-sub { font-size: 1.05rem; opacity: 0.92; }
@media (max-width: 768px) {
  .party-home .party-cta-row.three { grid-template-columns: 1fr; }
  .party-home .party-cta-row.three > .match-cta { min-height: 72px; }
}

/* 어드민 [디자인 시안] 탭: 시안 페이지 링크 카드 */
.design-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 12px; }
.design-link { display: grid; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; }
.design-link:hover { border-color: var(--accent); }
.design-link strong { font-size: 1rem; }
.design-link small { color: var(--muted); font-size: 0.84rem; line-height: 1.45; }
.design-link code { color: var(--accent); font-size: 0.78rem; }

/* 로비: 파티장 사냥터 프리셋 3칸 */
.lobby-presets:empty { display: none; }
.lobby-presets h2 small { margin-left: 6px; color: var(--muted); font-size: 0.74rem; font-weight: 600; }
.preset-slots { display: grid; gap: 6px; margin: 8px 0 0; padding: 0; list-style: none; }
.preset-slot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.preset-slot.empty { border-style: dashed; background: transparent; }
.preset-name { display: grid; flex: 1 1 auto; min-width: 0; }
.preset-name strong { overflow: hidden; font-size: 0.88rem; text-overflow: ellipsis; white-space: nowrap; }
.preset-name small { overflow: hidden; color: var(--muted); font-size: 0.74rem; text-overflow: ellipsis; white-space: nowrap; }
.preset-slot.empty .preset-name strong { color: var(--muted); }
.preset-buttons { display: flex; flex: 0 0 auto; gap: 4px; }
.preset-buttons .auth-button { flex: 0 0 auto; width: auto; min-width: 0; min-height: 0; height: 30px; padding: 0 10px; font-size: 0.8rem; }
.preset-buttons .auth-button.icon-only { width: 30px; padding: 0; }
.preset-buttons .ui-icon { width: 15px; height: 15px; }

/* 상단바 효과음 켜기/끄기 */
.sfx-toggle { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; margin-right: 12px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font-size: 0.8rem; font-weight: 700; cursor: pointer; }
.sfx-toggle .ui-icon { width: 16px; height: 16px; }
.sfx-toggle.on { color: var(--ink); border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
.sfx-toggle:hover { border-color: var(--accent); }

.sfx-toggle + .auth { margin-left: 0; }

/* =====================================================================
   디자인 V2 글래스 + 레이아웃 L6 하단 도크 (screens-preview.html에서 정한 조합)
   - 짙은 남색 바탕에 파랑·보라 빛 번짐, 패널은 반투명 유리, 주 버튼은 파랑→보라 그라데이션
   - 주 버튼(파티매칭, 로비 모집·해체, 캐릭터 저장)은 화면 아래 붙박이 도크
   ===================================================================== */
html.dark {
  --bg: #0d1117;
  --ink: #e6edf3;
  --muted: #8b949e;
  --line: #30363d;
  --card: #161b22;
  --surface: #21262d;
  --accent: #58a6ff;
  --glass: rgba(22, 27, 34, 0.72);
  --glass-line: rgba(255, 255, 255, 0.12);
  --glass-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  --grad: linear-gradient(135deg, #58a6ff, #8957e5);
}
html.dark body {
  background:
    radial-gradient(1200px 600px at 12% -12%, rgba(88, 166, 255, 0.14), transparent 60%),
    radial-gradient(900px 600px at 100% 0%, rgba(137, 87, 229, 0.12), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}
html.dark .top { background: rgba(13, 17, 23, 0.72); border-bottom-color: var(--glass-line); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }

/* 유리 패널 */
html.dark :is(.lobby-panel, .form-col, .admin-stats article, .admin-charts section, .design-link, .preset-slot:not(.empty)) {
  border: 1px solid var(--glass-line);
  background: var(--glass);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
html.dark :is(.lobby-panel, .form-col, .admin-stats article, .admin-charts section) { border-radius: 18px; }

/* 버튼: 주 버튼 그라데이션, 보조 버튼 반투명 */
html.dark .auth-button:not(.secondary):not(.danger):not(:disabled),
html.dark .match-cta:not(.secondary-cta):not(.matching),
html.dark .char-form-submit:not(:disabled) {
  border-color: transparent;
  background: var(--grad);
  color: #fff;
  box-shadow: 0 8px 26px rgba(88, 166, 255, 0.3);
}
html.dark .auth-button.secondary,
html.dark .match-cta.secondary-cta { border: 1px solid var(--glass-line); background: rgba(255, 255, 255, 0.07); color: var(--ink); }
html.dark .auth-button.danger { border: 1px solid rgba(248, 81, 73, 0.45); background: rgba(248, 81, 73, 0.08); color: #ffa198; }

/* ---- 파티매칭 ---- */
/* 순위 카드: 왼쪽은 검정, 오른쪽으로 갈수록 그림이 드러난다 */
html.dark .rank-card:not(.skeleton) {
  border-color: var(--glass-line);
  border-radius: 16px;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 24%, rgba(0, 0, 0, 0.7) 44%, rgba(0, 0, 0, 0.55) 70%, rgba(0, 0, 0, 0.45) 100%), var(--map-bg, none) center / cover no-repeat, #000;
}
html.dark .rank-card.skeleton { border-color: var(--glass-line); border-radius: 16px; background: rgba(255, 255, 255, 0.04); }
html.dark .rank-chips { border-color: rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.07); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
html.dark .rank-card.skeleton .rank-chips { background: transparent; }
html.dark .sk-bar, html.dark .sk-pill { background: rgba(255, 255, 255, 0.1); }
html.dark .party-home .char-portrait { border-color: var(--glass-line); border-radius: 18px; }

/* 하단 도크 공통 */
.page-dock {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 18px;
  background: rgba(13, 17, 23, 0.8);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}

/* 파티매칭 버튼 줄 = 도크: [파티 생성] [파티매칭 (넓게)] [초대 코드 · 코드 입장] */
.party-home .party-home-center {
  position: sticky;
  bottom: 12px;
  z-index: 30;
  justify-items: stretch;
  gap: 6px;
  margin-top: 14px;
  padding: 8px;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 18px;
  background: rgba(13, 17, 23, 0.8);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
}
.party-home .party-cta-row.three { grid-template-columns: auto minmax(0, 1fr) auto; width: 100%; align-items: center; gap: 8px; }
.party-home .party-cta-row.three > .match-cta { min-height: 0; height: 56px; }
.party-home .party-cta-row.three > .match-cta:not(.secondary-cta) { flex-direction: row; display: flex; align-items: center; justify-content: center; gap: 10px; padding: 0 24px; border-radius: 14px; }
.party-home .match-cta.cta-side { flex-direction: row; gap: 8px; height: 56px; padding: 0 20px; border-radius: 14px; }
.party-home .match-cta.cta-side .ui-icon { width: 20px; height: 20px; }
.party-home .cta-stack { grid-template-columns: 140px auto; grid-template-rows: 56px; gap: 6px; }
.party-home .cta-stack .code-input { height: 56px; }
.party-home .cta-stack .match-cta.half { height: 56px; padding: 0 16px; }
.party-home .match-cta-meta, .party-home .match-cta-hint { text-align: center; }
@media (max-width: 768px) {
  .party-home .party-cta-row.three { grid-template-columns: 1fr; }
  .party-home .cta-stack { grid-template-columns: minmax(0, 1fr) auto; }
}

/* ---- 파티로비 ---- */
/* 헤더: 사냥터 이름 · n인 뱃지 · [사냥터 변경] [프리셋] | 코드·링크 복사. 프리셋은 헤더 아래로 펼친다 */
.lobby-page .lobby-head { position: relative; }
.lobby-page .lobby-head .summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.lobby-page .lobby-head-map { flex: 0 1 auto; }
.lobby-cap { flex: 0 0 auto; }
.lobby-head-tools { display: inline-flex; gap: 6px; margin-left: 4px; }
.lobby-head-tools .auth-button { min-height: 0; height: 32px; padding: 0 12px; font-size: 0.82rem; }
.lobby-head-tools .auth-button.on { border-color: var(--accent); color: var(--accent); }
.lobby-head-tools .ui-icon { width: 15px; height: 15px; }
.lobby-page .lobby-head > .lobby-presets { flex-basis: 100%; margin: 4px 0 0; box-shadow: none; }
.lobby-page .lobby-map.editable { cursor: pointer; }

/* 자리 카드: 순위 카드처럼 한 줄. 왼쪽 자리 이름(가운데 정렬) · Lv · 닉네임 · 직업 · 뱃지 · 스탯공 · 지참(심은 지원).
   오른쪽에 직업 일러스트를 크게 두고 왼쪽으로 갈수록 사라지게 (보이는 부분도 50% 어둡게). 눈이 카드 높이 안에 오도록 위치를 맞춘다 */
.lobby-page .lobby-seats { display: grid !important; grid-template-columns: minmax(0, 1fr) !important; gap: 6px; }
.lobby-page .lobby-seats > .seat-slot { display: block; }
.lobby-page .lobby-seats > .seat-slot > .seat-row,
.lobby-page .lobby-seats .lobby-seat {
  position: relative;
  display: flex !important;
  align-items: center;
  gap: 10px;
  height: 60px;
  min-height: 60px;
  margin: 0;
  padding: 0 10px 0 0;
  overflow: hidden;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  box-shadow: none;
  grid-template-columns: none;
}
.lobby-page .lobby-seat.has-art::before { content: none; display: none; }
.lobby-page .lobby-seats .lobby-seat.filled {
  border-style: solid;
  background:
    linear-gradient(90deg, #000 0%, #000 40%, rgba(0, 0, 0, 0.82) 50%, rgba(0, 0, 0, 0.58) 64%, rgba(0, 0, 0, 0.5) 100%),
    var(--job-art, none) right 0 top -70px / 320px auto no-repeat,
    #000;
  box-shadow: inset 4px 0 0 #3fb950;
}
.lobby-page .lobby-seats .lobby-seat.empty { border-style: dashed; }
.lobby-page .lobby-seats .lobby-seat.searching {
  border-style: solid;
  border-color: color-mix(in srgb, var(--accent) 40%, transparent);
  background: linear-gradient(100deg, transparent 30%, rgba(88, 166, 255, 0.2) 50%, transparent 70%) 0 0 / 200% 100% no-repeat, rgba(255, 255, 255, 0.04);
  animation: seat-flow 2s linear infinite;
}
@keyframes seat-flow { from { background-position: 100% 0, 0 0; } to { background-position: -100% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .lobby-page .lobby-seats .lobby-seat.searching { animation: none; } }
.lobby-page .lobby-seat > [role="cell"] { display: flex; align-items: center; min-height: 0; text-align: left; }
.lobby-page .seat-no {
  display: grid;
  place-items: center;
  flex: 0 0 84px;
  align-self: stretch;
  padding: 0 6px;
  color: #3fb950;
  font-size: 0.86rem;
  font-weight: 900;
  text-align: center;
}
.lobby-page .lobby-seat:not(.filled) .seat-no { color: var(--muted); }
.lobby-page .seat-member { flex: 1 1 auto; gap: 8px; min-width: 0; overflow: hidden; justify-content: flex-start !important; }
.lobby-page .seat-member .cell-badge.lv { flex: 0 0 auto; padding: 1px 8px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 0.74rem; font-weight: 800; }
.lobby-page .seat-nick { min-width: 0; overflow: hidden; color: #fff; font-size: 0.95rem; text-overflow: ellipsis; white-space: nowrap; }
.lobby-page .seat-member .seat-job-badge {
  flex: 0 0 auto; height: 26px; min-height: 26px; padding: 0 9px;
  border-color: color-mix(in srgb, var(--job, #a1a1aa) 55%, transparent);
  background: color-mix(in srgb, var(--job, #a1a1aa) 22%, rgba(0, 0, 0, 0.55));
  color: #fff; font-size: 0.76rem; font-weight: 800;
}
.lobby-page .seat-member .name-tags { display: inline-flex; flex: 0 0 auto; gap: 4px; }
.lobby-page .seat-badge { padding: 1px 7px; border: 1px solid transparent; border-radius: 6px; font-size: 0.7rem; font-weight: 800; }
.lobby-page .seat-badge.leader { border-color: #d29922; background: rgba(210, 153, 34, 0.15); color: #f2cc60 !important; }
.lobby-page .seat-badge.me { border-color: var(--accent); background: rgba(88, 166, 255, 0.15); color: #a5d6ff !important; }
.lobby-page .seat-badge.done { border-color: #3fb950; background: rgba(63, 185, 80, 0.18); color: #7ee787 !important; }
.lobby-page .seat-atk { flex: 0 0 auto; color: #a5d6ff; font-size: 0.86rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.lobby-page .seat-atk .muted { color: rgba(255, 255, 255, 0.4); }
.seat-pay { display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px 0 6px; border: 1.5px solid rgba(255, 255, 255, 0.18); border-radius: 999px; background: rgba(0, 0, 0, 0.55); color: rgba(255, 255, 255, 0.7); font-size: 0.8rem; font-weight: 800; white-space: nowrap; }
.seat-pay.has { border-color: #facc15; color: #fff; }
.seat-pay img { width: 20px; height: 20px; image-rendering: pixelated; }
.lobby-page .seat-searching { flex: 1 1 auto; color: #a5d6ff; font-size: 0.86rem; font-weight: 800; }
.lobby-page .lobby-seat .seat-actions { flex: 0 0 auto; gap: 4px; }
/* 빈 자리 조건 줄 = 채워진 자리 seat-member와 같은 시작 위치 */
.lobby-page .seat-empty-body { display: flex; flex: 1 1 auto; align-items: center; gap: 8px; min-width: 0; overflow: hidden; }
.lobby-page .seat-empty-body .seat-extras {
  position: static; inset: auto; display: flex; flex: 1 1 auto; flex-wrap: nowrap;
  align-items: center; justify-content: flex-start; gap: 4px;
  margin: 0; padding: 0; min-width: 0; overflow: hidden;
}
.lobby-page .seat-empty-body .seat-searching { flex: 0 0 auto; }

/* 하단 도크: [파티원찾기 / 매칭 경과 시간] 넓게 · [파티해체·나가기] */
.lobby-dock .lobby-action-buttons { display: flex; flex: 1 1 auto; gap: 8px; margin: 0; }
.lobby-dock .lobby-action-buttons > * { flex: 1 1 auto; }
.lobby-dock .lobby-action-buttons .lobby-primary { width: 100%; min-height: 48px; }
.lobby-dock .lobby-action-buttons .summary { margin: 0; padding: 0 12px; }
.lobby-dock .lobby-dock-end { display: flex; flex: 0 0 auto; }
.lobby-dock .lobby-dock-end .auth-button { min-height: 48px; padding: 0 20px; }

/* ---- 캐릭터 생성 ---- */
/* 기본 정보·스탯 240px | 스킬 320px | (공격력/마력 위, 최종 스탯 공격력 아래) */
.char-form.desktop-form.split-col {
  grid-template-columns: 240px 320px minmax(0, 1fr);
  grid-template-areas: "left skills combat" "left skills result";
  grid-template-rows: auto 1fr;
  align-items: start;
}
.split-col .form-side-left { grid-area: left; }
.split-col .form-col-skills { grid-area: skills; }
.split-col .form-col-combat { grid-area: combat; }
.split-col .form-col-result { grid-area: result; }
/* 공격력/마력: 한 줄 3칸, 칸 이름은 칸 안 왼쪽에 세로 가운데 */
.split-col .form-col-combat .attack-grid,
.split-col .form-col-combat .attack-grid-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.split-col .form-col-combat .attack-field-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  height: 42px;
  padding: 0 10px;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.25);
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  line-height: 1.15;
}
.split-col .form-col-combat .attack-field-item:focus-within { border-color: var(--accent); }
.split-col .form-col-combat .attack-field-item > span { flex: 0 0 auto; max-width: 5.6em; word-break: keep-all; }
.split-col .form-col-combat .attack-field-item :is(input, select) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  outline: 0;
  background: transparent;
  color: var(--ink);
  font-size: 0.95rem;
  font-weight: 800;
  text-align: right;
}
.split-col .form-col-combat .attack-field-item select { text-align-last: right; }
.char-dock { justify-content: flex-end; }
.char-dock .auth-button { min-height: 48px; padding: 0 22px; }
.char-dock .char-form-submit { min-width: 220px; min-height: 48px; border-radius: 12px; font-size: 1.05rem; font-weight: 800; }
@media (max-width: 1100px) {
  .char-form.desktop-form.split-col { grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "left skills" "combat combat" "result result"; }
}
@media (max-width: 768px) {
  .char-form.desktop-form.split-col { grid-template-columns: 1fr; grid-template-areas: "left" "skills" "combat" "result"; }
  .split-col .form-col-combat .attack-grid, .split-col .form-col-combat .attack-grid-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- [파티를 찾았습니다!] 입장 창 (SPEC 3.3): 가로 2 : 세로 1 카드 + 10초 동안 줄어드는 흐르는 그라데이션 바 ---- */
.match-offer-backdrop { z-index: 60; background: rgba(0, 0, 0, 0.55); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.match-offer-card {
  width: min(560px, calc(100vw - 32px));
  aspect-ratio: 2 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: var(--card);
  color: var(--ink);
  text-align: center;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35), 0 0 0 1px color-mix(in srgb, var(--accent) 25%, transparent);
  animation: match-offer-pop 0.28s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.match-offer-card h2 { margin: 0; font-size: clamp(1.3rem, 4.5vw, 1.8rem); font-weight: 900; letter-spacing: -0.02em; }
.match-offer-where { margin: 0; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.match-offer-enter { width: min(240px, 100%); min-height: 46px; }
.match-offer-bar { width: 100%; height: 10px; overflow: hidden; border-radius: 999px; background: var(--surface); }
.match-offer-bar span {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #a78bfa, #f472b6, #fbbf24, #60a5fa) 0 0 / 200% 100%;
  animation: match-offer-flow 1.4s linear infinite;
}
.match-offer-left { margin: 0; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
@keyframes match-offer-flow { to { background-position: -200% 0; } }
@keyframes match-offer-pop { from { opacity: 0; transform: scale(0.92); } }
html.dark .match-offer-card { border-color: var(--glass-line, var(--line)); background: rgba(22, 27, 34, 0.92); }
@media (prefers-reduced-motion: reduce) {
  .match-offer-card, .match-offer-bar span { animation: none; }
}

/* ---- 사냥터 분류 탭 (사냥터 / 보스 / 이벤트): 사냥터 선택 창·어드민 사냥터 설정 ---- */
.map-cat-tabs { display: flex; gap: 4px; margin-bottom: 10px; padding: 3px; border-radius: 10px; background: var(--surface); }
.map-cat-tab {
  flex: 1 1 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 8px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 0.86rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
}
/* 탭 4개(사냥터·보스·파티퀘스트·이벤트)가 좁은 화면에서도 한 줄에 들어가게 */
@media (max-width: 480px) {
  .map-cat-tab { gap: 3px; padding: 0 4px; font-size: 0.78rem; }
  .map-cat-tab small { padding: 0 4px; }
}
.map-cat-tab small { padding: 0 6px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 18%, transparent); font-size: 0.7rem; font-variant-numeric: tabular-nums; }
.map-cat-tab:hover { color: var(--ink); }
.map-cat-tab.active { background: var(--card); color: var(--accent); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.12); }
.map-cat-tab.active small { background: color-mix(in srgb, var(--accent) 18%, transparent); }
.map-cat-tab[data-cat="boss"].active { color: var(--boss); }
.map-cat-tab[data-cat="boss"].active small { background: color-mix(in srgb, var(--boss) 18%, transparent); }
.preset-head-row { grid-template-columns: 1.2fr 4fr 1fr 1fr; }

/* ---- 로비: 매칭됐지만 아직 [입장] 전인 자리 — 카드 위 '수락 대기중...' 로딩 (SPEC 3.2.2) ---- */
article.is-pending { position: relative; overflow: hidden; }
article.is-pending > :not(.seat-pending) { filter: grayscale(0.6) brightness(0.55); }
.seat-pending {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: rgba(10, 12, 20, 0.45);
  color: #fff;
  font-size: 0.92rem;
  font-weight: 800;
  pointer-events: none;
}
.seat-pending-spinner {
  width: 18px;
  height: 18px;
  border: 2.5px solid rgba(255, 255, 255, 0.25);
  border-top-color: #a78bfa;
  border-radius: 50%;
  animation: seat-pending-spin 0.8s linear infinite;
}
.seat-pending-dots::after { content: "..."; display: inline-block; width: 1.2em; text-align: left; animation: seat-pending-dots 1.2s steps(4, end) infinite; overflow: hidden; vertical-align: bottom; }
.seat-pending-bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, #60a5fa, #a78bfa, #f472b6, transparent) 0 0 / 200% 100%;
  animation: match-offer-flow 1.4s linear infinite;
}
@keyframes seat-pending-spin { to { transform: rotate(360deg); } }
@keyframes seat-pending-dots { from { width: 0; } to { width: 1.2em; } }
@media (prefers-reduced-motion: reduce) {
  .seat-pending-spinner, .seat-pending-dots::after, .seat-pending-bar { animation: none; }
}

/* ---- 파티매칭 순위 카드 보정 (2026-10-07) ---- */
/* 장면 이미지·미니맵이 없는 사냥터: 오른쪽에 그 사냥터 몬스터를 크게 */
html.dark .rank-card.has-mob:not(.skeleton) {
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 30%, rgba(0, 0, 0, 0.55) 60%, rgba(0, 0, 0, 0.45) 100%),
    var(--map-mob) 44% center / auto 88% no-repeat,
    radial-gradient(ellipse at 80% 50%, #1e293b 0%, #0b0f19 55%, #000 100%);
}
/* 금액 뱃지 폭을 스켈레톤 알약(92px)과 같게 고정: 사냥터를 고르기 전후로 묶음 위치가 1px도 움직이지 않게 */
.rank-meso { width: 92px; justify-content: center; }
/* 좁은 화면: 고른 카드·스켈레톤 모두 같은 두 줄 구조 (윗줄 순위·사냥터·비우기, 아랫줄 자리·금액·배달심) */
@media (max-width: 768px) {
  .rank-card, .rank-card.skeleton { flex-wrap: wrap; row-gap: 8px; padding: 8px 8px 10px 0; }
  .rank-card-map { flex: 1 1 calc(100% - 48px); height: auto; min-height: 44px; order: 1; }
  html.dark .rank-card.has-mob:not(.skeleton) { background-position: 0 0, right 16px center, 0 0; }
  .rank-card-clear, .rank-card-clear-slot { order: 2; }
  .rank-chips { order: 3; margin-left: 18px; }
  .rank-card.skeleton .rank-card-name { max-width: none; }
}

/* ---- 파티매칭 캐릭터(플레이어) 카드: 직업 일러스트가 왼쪽 어둠에서 오른쪽으로 점점 드러난다 ---- */
.party-home .char-portrait.has-art {
  background-image:
    linear-gradient(180deg, transparent 0%, transparent 46%, rgba(0, 0, 0, 0.82) 66%, #000 84%),
    linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.82) 18%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.1) 75%, transparent 100%),
    var(--job-art);
  background-size: 100% 100%, 100% 100%, 300% auto;
  background-position: center, center, 40% 5%;
  background-repeat: no-repeat;
}

/* ---- 파티로비 사냥터 카드: 사냥터를 고르기 전후로 높이가 바뀌지 않게 고정 (기존 260px의 ~70%) ---- */
.lobby-page .lobby-map,
.lobby-page .lobby-map.no-map { box-sizing: border-box; height: 182px; min-height: 182px; overflow: hidden; }
.lobby-page .lobby-map-empty { min-height: 0; }
.lobby-page .lobby-map-empty-mark { font-size: 77px; }
.lobby-page .lobby-map-name { min-height: 0; }
.lobby-page .lobby-map-name strong { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lobby-page .lobby-map-image { flex: 0 1 auto; min-height: 0; max-height: 96px; margin-top: 4px; }
.lobby-page .lobby-map-image + .lobby-map-name { flex: 0 0 auto; margin-top: 6px; }
.lobby-page .lobby-map-image + .lobby-map-name strong { font-size: 1.4rem; }
/* 다크 글래스 패널 배경이 사냥터 장면 이미지를 덮지 않게 */
html.dark .lobby-page .lobby-map.has-art {
  background: linear-gradient(rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0.7)), var(--map-bg) center / cover no-repeat, #000;
}

/* ---- 파티매칭 캐릭터 카드: 테두리 없음 (hover 때도) ---- */
.party-home .char-portrait,
.party-home .char-portrait.filled,
.party-home .char-portrait.has-art,
.party-home .char-portrait:hover:not(:disabled),
html.dark .party-home .char-portrait { border: 0; }

/* ---- 로비 빈 자리 지참금 뱃지: [파티매칭] 금액 뱃지(.rank-meso)와 같은 모양 ---- */
.seat-meso-badge {
  display: inline-flex; flex: 0 0 auto; align-items: center; gap: 4px;
  height: 28px; padding: 0 10px 0 5px;
  border: 1.5px solid #facc15; border-radius: 999px; background: #18181b;
  color: #fff; font-size: 0.82rem; font-weight: 800; white-space: nowrap;
}
.seat-meso-badge img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.seat-meso-badge small { color: rgba(255, 255, 255, 0.6); font-size: 0.72rem; font-weight: 700; }
.seat-meso-badge strong { font-variant-numeric: tabular-nums; }
.seat-meso-badge em { color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; font-style: normal; }

/* ---- 조건 추가 창: 직업군 뱃지 하나 고르기 → 바로 아래 그 직업군 직업 뱃지. 직업 칸 너비 200px → 300px ---- */
.cond-set { grid-template-columns: 300px minmax(0, 1fr) 180px; }
.cond-jobs { grid-template-rows: none; gap: 12px; }
.cond-badges { display: flex; flex-wrap: wrap; gap: 6px; }
.cond-badge {
  min-height: 32px; padding: 0 12px;
  border: 1.5px solid var(--line); border-radius: 999px; background: var(--surface);
  color: var(--muted); font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer;
  transition: border-color 0.12s, background 0.12s, color 0.12s;
}
.cond-groups .cond-badge { flex: 1 1 0; min-width: 0; padding: 0 6px; }
.cond-badge:hover { border-color: var(--job); color: var(--ink); }
.cond-badge.on { border-color: var(--job); background: color-mix(in srgb, var(--job) 22%, var(--card)); color: #fff; }
.cond-job-list { padding: 8px; border-radius: 10px; background: color-mix(in srgb, var(--surface) 60%, transparent); }
@media (max-width: 960px) {
  .cond-set { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 조건 추가 창 v2: 스킬 없음, 높이 400px 고정. 위 입력(직업 | 스탯공 + [+ 조건 추가]) · 아래 추가된 조건 목록 ---- */
.modal-card.cond-modal { width: min(760px, 100%); height: auto; max-height: calc(100dvh - 40px); }
.cond-modal .modal-head { padding: 12px 18px; }
.cond-modal .modal-foot { padding: 10px 18px; }
.cond-modal .modal-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px 18px; }
.cond-editor { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; align-items: start; }
.cond-side { display: grid; gap: 10px; justify-items: stretch; }
.cond-side .cond-add {
  justify-self: stretch; width: 100%;
  height: 53px; min-height: 53px; /* 왼쪽 "선택된 직업" 필드(라벨+목록) 높이와 맞춤 */
}
.cond-side .cond-add:disabled { opacity: 0.45; cursor: not-allowed; }
.cond-added { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.cond-added h3 { margin: 0 0 8px; font-size: 0.86rem; }
.cond-added h3 em { margin-left: 4px; color: var(--muted); font-size: 0.78rem; font-style: normal; }
.cond-added-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cond-added-item {
  display: flex; align-items: center; gap: 10px; min-height: 36px; padding: 0 6px 0 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--job, var(--accent)); border-radius: 10px; background: var(--surface);
}
.cond-added-no { flex: 0 0 auto; color: var(--muted); font-size: 0.78rem; font-weight: 900; }
.cond-added-text { flex: 1 1 auto; min-width: 0; overflow: hidden; font-size: 0.88rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.cond-added-remove { display: inline-grid; flex: 0 0 auto; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.cond-added-remove:hover { background: rgba(239, 68, 68, 0.2); color: #fca5a5; }
.cond-added-remove svg { width: 15px; height: 15px; }
@media (max-width: 768px) {
  .cond-editor { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 조건 추가 창 v3: 내용에 맞춰 높이(빈 자리 150px placeholder로 스크롤 안 생기게) ---- */
.modal-card.cond-modal { height: auto; max-height: calc(100dvh - 40px); }
.cond-job-list {
  display: flex; flex-wrap: wrap; gap: 4px; align-content: start; align-items: center;
  box-sizing: border-box; min-height: 36px; height: auto;
  margin: 0; padding: 4px; border-radius: 10px;
  background: color-mix(in srgb, var(--surface) 60%, transparent);
}
.cond-job-list.is-empty { min-height: 36px; height: 36px; }
.cond-job-list .cond-badge {
  flex: 0 0 auto; width: auto; min-width: 0; min-height: 0; height: 28px;
  padding: 0 8px; font-size: 0.8rem; letter-spacing: -0.02em;
}
.cond-job-list .cond-badge span { display: block; line-height: 1; white-space: nowrap; }
.cond-picked {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line);
}
.cond-picked-label {
  display: block; margin-bottom: 6px; color: var(--muted); font-size: 0.8rem; font-weight: 800;
}
.cond-picked-row {
  display: flex; flex-wrap: nowrap; align-items: center; gap: 4px;
  box-sizing: border-box; min-height: 28px; height: 28px; overflow-x: auto;
}
.cond-picked-row.is-empty { min-height: 28px; height: 28px; }
.cond-picked-row .cond-badge,
.cond-added-jobs .cond-badge {
  display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center;
  box-sizing: border-box; min-height: 0; padding: 0 8px;
  line-height: 1; pointer-events: none;
}
.cond-picked-row .cond-badge { height: 28px; font-size: 0.78rem; }
.cond-added { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); }
.cond-added > .cond-placeholder {
  display: flex; align-items: center;
  min-height: 0; height: auto; margin: 0; padding: 8px 10px;
  border: 1px dashed var(--line); border-radius: 10px;
  font-size: 0.8rem; font-weight: 700; text-align: left;
}
.cond-added-list { display: flex; flex-direction: column; flex-wrap: nowrap; gap: 8px; }
.cond-added-item {
  display: flex; flex: 0 0 auto; flex-wrap: wrap; align-items: center; align-content: center; gap: 6px;
  max-width: 100%; min-height: 32px; padding: 4px 4px 4px 8px;
  border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
}
.cond-added-jobs {
  display: inline-flex; flex: 1 1 auto; flex-wrap: wrap;
  align-items: center; align-content: center; gap: 4px; min-width: 0;
}
.cond-added-jobs .cond-badge { height: 26px; font-size: 0.76rem; }
.cond-added-jobs .cond-badge-any { --job: #71717a; border-color: #71717a; }
.cond-added-text {
  display: inline-flex; flex: 0 0 auto; align-items: center;
  overflow: hidden; color: var(--ink);
  font-size: 0.82rem; font-weight: 800; line-height: 1; text-overflow: ellipsis; white-space: nowrap;
}
.cond-added-remove {
  display: inline-grid; place-items: center;
  width: 24px; height: 24px; border-radius: 999px;
}

/* ---- 로비 빈 자리 조건 뱃지: 조건 추가 창의 "추가된 조건" 뱃지(.cond-added-item)와 같은 모양, × 없음 ---- */
.seat-cond-badge { align-items: center; min-height: 28px; padding: 0 12px; }
.seat-cond-badge .cond-added-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 빈 자리 줄(높이 60px) 안에 한 줄로: 넘치면 조건 뱃지가 줄어들며 말줄임, 지참금 뱃지는 줄지 않는다 */
.lobby-page .seat-extras .seat-cond-badge { flex: 0 1 auto; min-width: 48px; padding: 0 9px; }
.lobby-page .seat-extras .seat-meso-badge { flex: 0 0 auto; }
.lobby-page .seat-extras .seat-cond-badge .cond-added-text { font-size: 0.76rem; letter-spacing: -0.01em; }

/* ---- 로비 빈 자리: 왼쪽 조건 뱃지 · 오른쪽 지참금 뱃지(크기 고정, 파티장은 바로 입력) ---- */
/* 빈 자리·채워진 자리 지참금 뱃지를 같은 절대 위치에 둔다 */
.lobby-page .lobby-seat.has-meso { padding-right: calc(10px + var(--seat-meso-w) + 10px); }
.lobby-page .seat-meso-slot {
  position: absolute;
  top: 50%;
  right: 10px;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  margin: 0;
  transform: translateY(-50%);
}
.lobby-page .lobby-seat.has-extra .seat-meso-slot { margin-left: 0; }
/* [구인완료]: 메소 왼쪽, 예전 네모 + 스타일 덮어쓰기 */
:root { --seat-recruit-w: 72px; }
.lobby-page .seat-meso-slot .seat-empty-button[data-seat-action="dummy-add"] {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; box-sizing: border-box;
  width: var(--seat-recruit-w); min-width: var(--seat-recruit-w);
  height: 30px; min-height: 30px; padding: 0 10px;
  border: 1.5px solid var(--accent); border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 22%, #18181b); color: #fff;
  font-size: 0.78rem; font-weight: 800; line-height: 1; box-shadow: none;
}
.lobby-page .seat-meso-slot .seat-empty-button[data-seat-action="dummy-add"]:hover {
  filter: brightness(1.1); color: #fff;
}
.lobby-page .lobby-seat.has-recruit {
  padding-right: calc(10px + var(--seat-meso-w) + 6px + var(--seat-recruit-w) + 10px);
}
.seat-meso-badge,
.lobby-page .seat-extras .seat-meso-badge {
  box-sizing: border-box; width: 150px; min-width: 150px; max-width: 150px; height: 30px;
  justify-content: flex-start; border-color: #3f3f46;
}
.seat-meso-badge.has { border-color: #facc15; }
.seat-meso-badge strong { flex: 1 1 auto; text-align: right; }
.seat-meso-badge.editable { cursor: text; flex-direction: row; margin: 0; }
.seat-meso-badge.editable:hover { border-color: #a1a1aa; }
.seat-meso-badge.editable:focus-within { border-color: #facc15; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25); }
.seat-meso-badge input {
  flex: 1 1 auto; width: 0; min-width: 0; min-height: 0; padding: 0; border: 0; outline: 0;
  background: transparent; color: #fff; font: inherit; font-variant-numeric: tabular-nums; text-align: right;
}
.seat-meso-badge input::placeholder { color: rgba(255, 255, 255, 0.45); font-weight: 700; }
/* ---- 로비 자리 지참금 뱃지 통일: 빈 자리·채워진 자리 같은 너비, `NNN만`만 표시 ---- */
:root { --seat-meso-w: 104px; } /* 예전 채워진 자리 `지참 …` 뱃지 너비 */
.seat-meso-badge,
.lobby-page .seat-extras .seat-meso-badge {
  width: var(--seat-meso-w); min-width: var(--seat-meso-w); max-width: var(--seat-meso-w);
  padding: 0 10px 0 6px;
}
.seat-meso-badge strong { flex: 1 1 auto; text-align: right; font-variant-numeric: tabular-nums; }
.seat-meso-badge:not(.has) strong { color: rgba(255, 255, 255, 0.45); }

/* ---- 로비 채워진 자리: 직업 일러스트 이미지 자체가 왼쪽 0% → 오른쪽 70% 불투명도로 점점 보인다 (경계선 없음) ---- */
.lobby-page .lobby-seats .lobby-seat.filled { isolation: isolate; background: #000; }
.lobby-page .lobby-seats .lobby-seat.filled.has-art::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0 0 0 auto;
  z-index: -1;
  width: 320px;
  opacity: 1;
  filter: none;
  background: var(--job-art, none) right 0 top -70px / 320px auto no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* ---- 상단바 드롭다운: 계정(디스코드) 메뉴 · 효과음 조절 ---- */
.top-menu { position: relative; display: inline-flex; }
.top-menu-pop { position: absolute; top: calc(100% + 6px); right: 0; z-index: 60; }
.top-menu-pop[hidden] { display: none !important; }
.top-menu .ui-icon { width: 14px; height: 14px; }
.top-menu [data-menu-button] > .ui-icon:last-child { transition: transform 0.15s ease; }
.top-menu.open [data-menu-button] > .ui-icon:last-child { transform: rotate(180deg); }

/* 계정: 디스코드 뱃지를 누르면 같은 모양의 [로그아웃] 뱃지가 아래로 */
button.auth-user { font: inherit; cursor: pointer; }
button.auth-user:hover { background: #4752c4; }
button.auth-user:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.auth-pop { display: grid; gap: 6px; min-width: 100%; }
.auth-menu-item { justify-content: center; width: 100%; max-width: none; }
a.auth-menu-item:hover { background: #4752c4; }
.auth-menu-item .ui-icon { width: 15px; height: 15px; }

/* 효과음: 버튼을 누르면 켜기/끄기 스위치 + 크기 슬라이더 (.sfx-toggle 버튼과 같은 테두리·색·글씨) */
.sfx-menu { margin-left: auto; margin-right: 12px; }
.sfx-menu .sfx-toggle { margin: 0; }
.sfx-menu + .auth { margin-left: 0; }
.sfx-pop {
  display: grid; gap: 10px; width: 240px; padding: 2px 10px;
  border: 1px solid var(--line); border-radius: 16px;
  background: transparent; color: var(--ink);
  font-size: 0.8rem; font-weight: 700; box-shadow: none;
}
.sfx-menu.open .sfx-pop { border-color: color-mix(in srgb, var(--accent) 50%, var(--line)); }
html.dark .sfx-pop {
  background: rgba(13, 17, 23, 0.92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
.sfx-pop-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: inherit; font-size: inherit; font-weight: inherit; }
.sfx-switch { position: relative; flex: 0 0 auto; width: 40px; height: 22px; padding: 0; border: 0; border-radius: 999px; background: var(--surface); cursor: pointer; transition: background 0.15s ease; }
.sfx-switch span { position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4); transition: transform 0.15s ease; }
.sfx-switch[aria-checked="true"] { background: var(--accent); }
.sfx-switch[aria-checked="true"] span { transform: translateX(18px); }
.sfx-volume { justify-content: flex-start; }
.sfx-volume [data-sfx-icon] { display: inline-flex; color: var(--muted); }
.sfx-volume [data-sfx-icon] .ui-icon { width: 16px; height: 16px; }
.sfx-volume input[type="range"] { flex: 1 1 auto; min-width: 0; margin: 0; accent-color: var(--accent); cursor: pointer; }
.sfx-volume input[type="range"]:disabled { opacity: 0.4; cursor: not-allowed; }
.sfx-volume output { flex: 0 0 38px; color: var(--muted); font-size: 0.8rem; font-variant-numeric: tabular-nums; text-align: right; }
@media (prefers-reduced-motion: reduce) {
  .top-menu [data-menu-button] > .ui-icon:last-child, .sfx-switch, .sfx-switch span { transition: none; }
}

/* 배달심·매미심·힐케어 스위치: 고른 쪽 글자만 보이고, 글자 span 자체 스타일·크기는 유지 */
.sim-switch[data-value="delivery"] span:not(:nth-child(1)),
.sim-switch[data-value="mae"] span:not(:nth-child(2)),
.sim-switch[data-value="heal"] span:not(:nth-child(3)) { visibility: hidden; }

/* ---- 조건 추가 창: 직업 여러 개 선택(직업군 뱃지에 고른 개수), 레벨 · 스탯공 나란히 ---- */
.cond-group-count {
  display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 4px; padding: 0 5px;
  border-radius: 999px; background: var(--job, var(--accent)); color: #fff; font-size: 0.7rem; font-weight: 900; line-height: 1;
}
.cond-side { grid-template-columns: 1fr 1fr; align-items: start; }
.cond-side .cond-field { min-width: 0; width: 100%; }
.cond-side .cond-field input { width: 100%; box-sizing: border-box; }
.cond-side .cond-add { grid-column: 1 / -1; width: 100%; height: 53px; min-height: 53px; justify-self: stretch; }
.cond-field > span small { color: var(--muted); font-size: 0.74rem; }

/* ---- 로비 빈 자리: "파티원 조건:" + 조건 뱃지(직업 · 레벨 · 스공), 조건이 없으면 "상관없음" ---- */
.seat-cond-label { flex: 0 0 auto; color: rgba(255, 255, 255, 0.6); font-size: 0.78rem; font-weight: 800; white-space: nowrap; }
.seat-cond-badge.seat-cond-none { --job: #71717a; }
.seat-cond-badge.seat-cond-none .cond-added-text { color: rgba(255, 255, 255, 0.75); }
.seat-cond-badge.seat-cond-add { --job: var(--accent, #58a6ff); }
.seat-cond-badge.seat-cond-add .cond-added-text { color: #fff; }

/* ---- 로비 [구인완료] 입력 줄: Lv.는 입력 왼쪽, 높이는 메소 뱃지(30px)에 맞춤 ---- */
.lobby-page .seat-dummy-fields { gap: 8px; align-items: center; }
.lobby-page .seat-dummy-fields .seat-input {
  flex: 0 0 auto; box-sizing: border-box; height: 30px; min-height: 30px; margin: 0; padding: 0 10px;
  border: 1.5px solid #3f3f46; border-radius: 999px; background: #18181b; color: #fff; font-size: 0.82rem; font-weight: 700;
}
.lobby-page .seat-dummy-fields .seat-input:focus { border-color: var(--accent); outline: none; }
.lobby-page .seat-dummy-level {
  display: inline-flex; flex-direction: row; flex: 0 0 auto; align-items: center; gap: 4px;
  margin: 0; color: rgba(255, 255, 255, 0.62); font-size: 0.8rem; font-weight: 800;
}
.lobby-page .seat-dummy-level > span { flex: 0 0 auto; line-height: 1; }
.lobby-page .seat-dummy-level .seat-input { width: 64px; text-align: center; }
.lobby-page .seat-dummy-fields select.seat-input { width: 200px; max-width: 100%; text-align: left; }
@media (max-width: 768px) {
  .lobby-page .seat-dummy-fields select.seat-input { width: auto; flex: 1 1 auto; min-width: 0; }
}

/* ---- 로비 빈 자리 조건 뱃지: 첫 직업의 직업군 뱃지 디자인 ("비숍 외 1" → 법사 뱃지). 조건 창 직업 뱃지(.cond-badge.on)와 같은 색 규칙 ---- */
.lobby-page .seat-cond-badge[class*="job-tone-"] {
  border: 1.5px solid var(--job); border-radius: 999px;
  background: color-mix(in srgb, var(--job) 22%, var(--card));
}
.lobby-page .seat-cond-badge[class*="job-tone-"] .cond-added-text { color: #fff; }

/* 문의하기 (SPEC 1.6): 화면 오른쪽 아래 플로팅 버튼과 문의 창 */
.inquiry-fab {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 35; /* 하단 도크(30) 위, 모달(40) 아래 */
  display: inline-grid;
  place-items: center;
  width: 52px;
  height: 52px;
  padding: 0;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 50%;
  background: var(--grad, var(--accent));
  color: #fff;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.inquiry-fab:hover { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5); }
.inquiry-fab .ui-icon { width: 24px; height: 24px; }
/* 안 읽은 운영자 답변: 노란 테두리 + 오른쪽 위 New (web/inquiry.js setUnread). [패치노트] 버튼과 같은 표시이고,
   테두리 굵기·버튼 크기는 읽기 전·후가 같다 (빛은 3px 고리만, New 는 모서리에 띄운다) */
.inquiry-fab.has-unread { border-color: #facc15; animation: inquiry-glow 1.6s ease-in-out infinite; }
.inquiry-fab.has-unread::after {
  content: "New"; position: absolute; top: -6px; right: -10px; display: inline-grid; place-items: center;
  min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: #facc15; color: #1f1f1f; font-size: 0.625rem; font-weight: 900; line-height: 1; pointer-events: none;
}
@keyframes inquiry-glow {
  0%, 100% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(250, 204, 21, 0.25); }
  50% { box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(250, 204, 21, 0.08); }
}
@media (prefers-reduced-motion: reduce) {
  .inquiry-fab.has-unread { animation: none; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4), 0 0 0 3px rgba(250, 204, 21, 0.25); }
}
/* 내용 폭(1080px) 옆에 자리가 없으면 하단 도크를 가리지 않게 위로 올린다 */
@media (max-width: 1360px) {
  .inquiry-fab { bottom: 96px; }
}
@media (max-width: 768px) {
  .inquiry-fab { right: 14px; width: 48px; height: 48px; }
  .inquiry-fab .ui-icon { width: 22px; height: 22px; }
}

.inquiry-kinds { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 12px; }
/* 종류 4개: 좁은 화면에서는 2 × 2 */
@media (max-width: 480px) { .inquiry-kinds { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.inquiry-kind { position: relative; cursor: pointer; }
.inquiry-kind input { position: absolute; opacity: 0; pointer-events: none; }
.inquiry-kind span {
  display: block;
  padding: 10px 8px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--muted);
  font-weight: 800;
  text-align: center;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.inquiry-kind:hover span { border-color: var(--accent); }
.inquiry-kind input:checked + span { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 16%, var(--surface)); color: var(--ink); }
.inquiry-kind input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.inquiry-content { display: block; }
.inquiry-content textarea { display: block; min-height: 160px; resize: vertical; line-height: 1.5; }
.inquiry-count { margin-top: 6px; color: var(--muted); font-size: 0.8rem; text-align: right; }
.inquiry-modal .modal-foot .form-error { margin: 0 auto 0 0; }
.inquiry-modal .modal-foot .auth-button:disabled { opacity: 0.5; cursor: not-allowed; }

/* 어드민 [문의] 탭 */
.inquiry-card .inquiry-kind-badge { padding: 2px 10px; border-radius: 999px; background: var(--surface); font-size: 0.82rem; }
.inquiry-card .inquiry-kind-badge.bug { color: #f87171; }
.inquiry-card .inquiry-kind-badge.suggestion { color: #60a5fa; }
.inquiry-card .inquiry-kind-badge.map { color: #34d399; }
.inquiry-card .inquiry-text { margin: 0; white-space: pre-wrap; word-break: break-word; line-height: 1.55; }
.inquiry-card .inquiry-meta { margin: 0; color: var(--muted); font-size: 0.8rem; word-break: break-all; }

/* 어드민 [운영 배포] 탭 (개발 서버 전용) */
.admin-deploy code { font-size: 0.85em; }
.deploy-repo { margin-bottom: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.deploy-repo p { margin: 0; word-break: break-word; }
.deploy-repo .deploy-dirty { margin-top: 6px; color: #f59e0b; font-size: 0.86rem; }
.deploy-status { padding: 2px 10px; border-radius: 999px; background: var(--surface); font-size: 0.82rem; }
.deploy-status.running { color: var(--accent); }
.deploy-status.success { color: var(--exp); }
.deploy-status.failed { color: var(--hp); }
.deploy-card { cursor: default; }
.deploy-card.selected { border-color: var(--accent); }
.deploy-card .deploy-commit { margin: 0; word-break: break-word; }
.deploy-card .deploy-commit small { color: #f59e0b; }
.deploy-log-wrap { margin-bottom: 12px; }
.deploy-log-title { margin: 0 0 6px; color: var(--muted); font-size: 0.86rem; font-weight: 700; }
.deploy-log {
  margin: 0;
  max-height: 420px;
  overflow: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #0b0f17;
  color: #d4d4d8;
  font-size: 0.8rem;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* =====================================================================
   페이지 로딩 스켈레톤 (skeleton.js). 실제 화면과 같은 자리에 회색 막대를 깔고 빛이 지나간다.
   0.15초 안에 끝나는 로딩에서는 깜빡이지 않도록 늦게 나타난다.
   ===================================================================== */
.skel-page {
  width: min(var(--content-width), 100%);
  margin: 20px auto 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: skel-in 0.25s ease 0.15s both;
}
.skel {
  display: block;
  border-radius: 10px;
  background:
    linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.07) 50%, transparent 70%) 0 0 / 200% 100% no-repeat,
    var(--skel-base, rgba(148, 163, 184, 0.16));
  animation: skel-shine 1.4s ease-in-out infinite;
}
html.dark .skel { --skel-base: rgba(255, 255, 255, 0.06); }
@keyframes skel-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes skel-shine { from { background-position: 150% 0, 0 0; } to { background-position: -50% 0, 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .skel { animation: none; }
}

.skel-head { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }
.skel-title { width: 180px; height: 34px; }
.skel-line { width: min(520px, 90%); height: 16px; border-radius: 6px; }
.skel-line.short { width: 140px; }
.skel-row { display: flex; gap: 10px; flex-wrap: wrap; }
.skel-stack { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.skel-stack.tight { gap: 9px; }
.skel-grid { display: grid; gap: 18px; }
.skel-grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.skel-grid.form { grid-template-columns: 240px 320px minmax(0, 1fr); gap: 16px; align-items: start; }
.skel-panel { height: 160px; border-radius: 18px; }
.skel-panel.tall { height: 300px; }
.skel-panel.xtall { height: 540px; }
.skel-dock { height: 66px; border-radius: 18px; }
/* 파티매칭: 캐릭터 카드 + 1~5순위 */
.skel-party { display: grid; grid-template-columns: 288px minmax(0, 1fr); gap: 16px; }
.skel-portrait { height: 440px; border-radius: 18px; }
.skel-rank { height: 81px; border-radius: 16px; }
/* 캐릭터 관리: 9:16 슬롯 3칸 */
.skel-slot { aspect-ratio: 9 / 16; border-radius: 14px; }
/* 개요 */
.skel-ov-hero { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 48px 0 12px; }
.skel-hero-title { width: min(560px, 90%); height: 46px; }
.skel-hero-title.short { width: min(380px, 70%); }
.skel-button { width: 170px; height: 46px; border-radius: 12px; }
.skel-card { height: 96px; border-radius: 16px; }
.skel-split { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; margin-top: 30px; }
.skel-media { aspect-ratio: 16 / 10; border-radius: 16px; }

@media (max-width: 768px) {
  .skel-grid.three, .skel-grid.form, .skel-party, .skel-split { grid-template-columns: minmax(0, 1fr); }
  .skel-portrait { height: 300px; }
  .skel-grid.three .skel-slot:not(:first-child), .skel-grid.three .skel-panel:not(:first-child) { display: none; }
}

/* =====================================================================
   [개요] 첫 화면 (pages/overview.js)
   ===================================================================== */
.overview-page {
  width: min(var(--content-width), 100%);
  margin: 0 auto;
  padding-bottom: 40px;
}
.overview-page h2 {
  margin: 6px 0 14px;
  font-size: 1.7rem;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.ov-tag {
  margin: 0;
  color: var(--accent);
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.ov-grad {
  background: var(--grad, linear-gradient(135deg, #58a6ff, #8957e5));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ov-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 64px 0 36px;
  text-align: center;
}
.ov-eyebrow {
  margin: 0;
  padding: 6px 12px;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.04);
  color: var(--muted);
  font-size: 0.84rem;
  font-weight: 700;
}
.ov-hero h1 {
  margin: 18px 0 14px;
  font-size: clamp(2rem, 5vw, 3.1rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}
.ov-lead {
  margin: 0;
  max-width: 640px;
  color: var(--muted);
  font-size: 1.05rem;
  line-height: 1.7;
}
.ov-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 26px;
}
.ov-cta .auth-button {
  min-width: 170px;
  padding: 13px 22px;
  border-radius: 12px;
  font-size: 1rem;
}

.ov-steps {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin: 8px 0 24px;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.ov-steps li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 16px;
  background: var(--glass, var(--card));
}
.ov-steps strong { display: block; margin-bottom: 4px; font-size: 1.02rem; }
.ov-steps p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.ov-step-no {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--grad, var(--accent));
  color: #fff;
  font-weight: 800;
}

.ov-feature {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 48px;
  align-items: center;
  padding: 56px 0;
  border-top: 1px solid var(--glass-line, var(--line));
}
.ov-feature.reverse .ov-copy { order: 2; }
.ov-copy ul {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.ov-copy li {
  position: relative;
  padding-left: 18px;
  color: var(--muted);
  line-height: 1.6;
}
.ov-copy li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent);
}
.ov-copy li b { color: var(--ink); font-weight: 700; }
.ov-more {
  display: inline-block;
  margin-top: 18px;
  color: var(--accent);
  font-weight: 800;
  text-decoration: none;
}
.ov-more:hover { text-decoration: underline; }

.ov-figure { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.ov-figure.multi .ov-shot:nth-child(2):not(.strip) { width: 78%; margin: -26% 0 0 auto; }
.ov-shot {
  display: block;
  overflow: hidden;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 14px;
  background: var(--card);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.45);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.ov-shot:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.ov-shot img { display: block; width: 100%; height: auto; }
.ov-shot.small { width: min(460px, 100%); margin: 0 auto; }
@media (prefers-reduced-motion: reduce) {
  .ov-shot { transition: none; }
  .ov-shot:hover { transform: none; }
}

.ov-extras { padding: 56px 0 24px; border-top: 1px solid var(--glass-line, var(--line)); text-align: center; }
.ov-extra-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-top: 8px;
  text-align: left;
}
.ov-extra {
  padding: 18px;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 16px;
  background: var(--glass, var(--card));
}
.ov-extra strong { display: block; margin: 10px 0 6px; }
.ov-extra p { margin: 0; color: var(--muted); font-size: 0.9rem; line-height: 1.55; }
.ov-extra-icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.ov-extra-icon .ui-icon { width: 18px; height: 18px; }

.ov-end {
  margin-top: 40px;
  padding: 40px 20px;
  border: 1px solid var(--glass-line, var(--line));
  border-radius: 20px;
  background:
    radial-gradient(600px 200px at 50% 0%, rgba(88, 166, 255, 0.12), transparent 70%),
    var(--glass, var(--card));
  text-align: center;
}
.ov-end h2 { margin: 0; }
.ov-end .ov-cta { margin-top: 18px; }

@media (max-width: 860px) {
  .ov-feature { grid-template-columns: minmax(0, 1fr); gap: 24px; padding: 40px 0; }
  .ov-feature.reverse .ov-copy { order: 0; }
  .ov-steps, .ov-extra-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 768px) {
  .ov-hero { padding: 36px 0 24px; }
  .ov-hero h1 br, .ov-lead br { display: none; }
  .overview-page h2 { font-size: 1.4rem; }
  .ov-cta .auth-button { flex: 1 1 100%; }
}

/* ---- 파티매칭 캐릭터 카드: 캐릭터가 없을 때 [+]·'캐릭터 선택'은 카드 세로 가운데 (채워진 카드는 일러스트 때문에 아래 정렬) ---- */
.char-portrait:not(.filled) { justify-content: center; }
.char-portrait:not(.filled) .char-portrait-mark { margin: 0 0 8px; }
/* 캐릭터가 없는 카드는 배경을 살짝 어둡게 */
.char-portrait:not(.filled) { background: color-mix(in srgb, var(--card) 90%, #000); }

/* ---- 어드민 사냥터 등록: 사냥터 사진 (붙여넣기·끌어다 놓기·파일 선택) ---- */
.preset-art { display: grid; gap: 8px; margin: 4px 0 14px; }
.preset-art-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.preset-art-head em { color: var(--muted); font-size: 0.82rem; font-style: normal; }
.preset-art-drop {
  display: grid;
  place-items: center;
  min-height: 120px;
  max-height: 220px;
  overflow: hidden;
  border: 2px dashed var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  transition: border-color 0.12s, background 0.12s;
}
.preset-art-drop:hover,
.preset-art-drop:focus-visible,
.preset-art-drop.dragging { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); outline: none; }
.preset-art-drop img { display: block; width: 100%; max-height: 216px; object-fit: cover; }
.preset-art-drop p { margin: 0; padding: 16px; color: var(--muted); font-size: 0.9rem; text-align: center; }
.preset-art-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 0; }
.preset-art-actions .summary { margin: 0; font-size: 0.82rem; }

/* ---- 파티로비 채널: 창 없이 줄 안에서 입력·수정 ---- */
button.lobby-channel-badge { font: inherit; cursor: pointer; }
.lobby-channel-badge.channel-input-cta {
  border: 1.5px dashed color-mix(in srgb, var(--accent) 60%, var(--line));
  background: color-mix(in srgb, var(--accent) 10%, var(--surface));
  color: #93c5fd; font-size: 0.84rem; font-weight: 800;
  transition: background 0.12s, color 0.12s;
}
.lobby-channel-badge.channel-input-cta:hover,
.lobby-channel-badge.channel-input-cta:focus-visible { background: color-mix(in srgb, var(--accent) 24%, var(--surface)); color: #fff; outline: none; }
.lobby-channel-form { display: flex; flex: 1; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.lobby-channel-input { box-sizing: border-box; flex: 0 1 160px; min-width: 0; height: 30px; padding: 0 12px; border-radius: 999px; font-size: 0.88rem; }
.lobby-channel-form .auth-button { min-width: 0; min-height: 30px; padding: 4px 12px; }

/* ---- 파티로비 [구인완료]/[삭제]·입력 줄 [저장]/[취소]·[강퇴]: 지참금 뱃지 왼쪽 (지참금 칸이 줄 오른쪽을 덮으므로 그 안에) ---- */
.lobby-page .seat-meso-slot .seat-empty-button {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; box-sizing: border-box;
  min-width: var(--seat-recruit-w); height: 30px; min-height: 30px; padding: 0 10px;
  border: 1.5px solid #52525b; border-radius: 999px;
  background: #27272a; color: #e4e4e7;
  font-size: 0.78rem; font-weight: 800; line-height: 1; box-shadow: none; cursor: pointer;
}
.lobby-page .seat-meso-slot .seat-empty-button:hover { filter: brightness(1.15); color: #fff; }
.lobby-page .seat-meso-slot .seat-empty-button[data-seat-action="dummy-remove"] { border-color: color-mix(in srgb, #f87171 60%, #52525b); color: #fca5a5; }
.lobby-page .seat-meso-slot .seat-empty-button.seat-save { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 22%, #18181b); color: #fff; }
.lobby-page .seat-edit-buttons .seat-empty-button { min-width: 60px; }
.lobby-page .seat-meso-slot .seat-action.icon-only { width: 30px; min-width: 30px; height: 30px; min-height: 30px; padding: 0; border-radius: 999px; }
.lobby-page .lobby-seat.has-kick { padding-right: calc(10px + var(--seat-meso-w) + 6px + 30px + 10px); }
.lobby-page .lobby-seat.has-two-buttons { padding-right: calc(10px + 60px + 6px + 60px + 10px); }
button.seat-badge.seat-badge-button { font-family: inherit; cursor: pointer; }
button.seat-badge.seat-badge-button:hover { filter: brightness(1.2); }

/* ---- 파티로비 채널 줄: [채널입력] · 입력칸+[저장][취소] · CH.+[수정] 어느 상태든 높이를 같게 (높이가 바뀌면 페이지 스크롤바가 깜빡인다) ---- */
.lobby-page .lobby-channel-row { min-height: 30px; }
.lobby-page .lobby-channel-row .auth-button { box-sizing: border-box; height: 30px; min-height: 30px; padding: 0 12px; line-height: 1; }


/* ---- 사냥터 그림의 대표 몬스터 (2026-10-10, scripts/build_map_bg.py · party.js mapMob) ----
   자동 사냥터 배경 위에 그 사냥터에서 가장 많이 소환되는 몬스터를 올린다.
   높이 = 칸 높이의 2배, 세로 가운데 맞춤(몸통이 보임), 몬스터 가운데 = 칸 왼쪽에서 70%(사냥터 선택 창 80%). 칸 밖은 잘린다.
   칸에 isolation을 주고 z-index -1로 그려 칸 배경 바로 위, 글자·버튼 아래에 놓는다.
   크기는 --mob-scale(칸 높이 배수), 세로 가운데 맞춤은 top = (1 - 배수) / 2.
   몬스터도 배경처럼 어둡게: 칸마다 배경에 씌운 검은 막의 진하기(몬스터 자리 기준)만큼 밝기를 낮춘다 (--mob-dim = 1 - 막 진하기). */
:root { --mob-scale: 2; } /* 기본값. 화면마다 아래에서 따로 정한다 */
.rank-card,
.map-pick,
.lobby-map { position: relative; isolation: isolate; overflow: hidden; }
.map-mob {
  position: absolute;
  top: calc((1 - var(--mob-scale)) * 50%);
  left: 70%;
  z-index: -1;
  width: auto;
  height: calc(var(--mob-scale) * 100%);
  max-width: none;
  transform: translateX(-50%);
  image-rendering: pixelated;
  pointer-events: none;
  filter: brightness(var(--mob-dim, 1)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.45));
}
.map-pick .map-mob { left: 80%; }
/* 크기(칸 높이 배수): 순위 카드 300%, 사냥터 선택 창 200%, 로비 사냥터 칸 150% */
.rank-card .map-mob { --mob-scale: 3; }
.map-pick .map-mob { --mob-scale: 2; }
.lobby-map .map-mob { --mob-scale: 1.5; }
.rank-card .map-mob { --mob-dim: 0.45; }        /* 순위 카드: 가로 그라데이션, 70% 지점 검정 0.55 */
.map-pick .map-mob { --mob-dim: 0.35; }         /* 사냥터 선택 창: 검정 0.65 */
.lobby-map .map-mob { --mob-dim: 0.25; }        /* 로비 사냥터 칸(라이트): 검정 0.75 */
html.dark .lobby-page .lobby-map .map-mob { --mob-dim: 0.37; } /* 로비(다크): 위 0.55 → 아래 0.7 */

/* 어드민 사냥터 등록/수정: 비숍·지참금·자리 여부 (파티매칭 순위 카드에 보일 항목) */
.preset-flags { display: flex; flex-wrap: wrap; gap: 6px 16px; }
.preset-flags label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; white-space: nowrap; }
.preset-flags input { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
.preset-flags span { color: var(--ink); font-size: 0.86rem; font-weight: 700; }
.preset-flags em { color: var(--muted); font-size: 0.74rem; font-style: normal; }

/* ---- 사냥터 선택 창: 왼쪽 대륙 필터, 오른쪽 검색 ---- */
/* 대륙 칩과 검색칸은 한 줄. 칩이 넘치면 칩 줄만 가로로 넘긴다 (휠로도 넘어감, party.js) */
.map-pick-filters { display: flex; flex-wrap: nowrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.map-pick-filters input[type="search"] { flex: 0 0 200px; width: auto; min-width: 0; margin: 0 0 0 auto; }
.map-regions { display: flex; flex-wrap: nowrap; gap: 4px; flex: 1 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.map-regions::-webkit-scrollbar { display: none; }
.map-regions[hidden] { display: none; } /* 보스·파티퀘스트·이벤트 탭: 대륙 칩 숨김 */
.map-region {
  height: 30px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--muted);
  font: inherit; font-size: 0.8rem; font-weight: 800; white-space: nowrap; cursor: pointer;
}
.map-region:hover { border-color: var(--accent); color: var(--ink); }
.map-region.active { border-color: var(--accent); background: var(--accent); color: #fff; }
.map-pick-level { flex: 0 0 auto; color: var(--accent); font-size: 0.74rem; font-weight: 800; }
.map-pick.has-bg .map-pick-level { color: #fde68a; }
@media (max-width: 768px) {
  .map-pick-filters input[type="search"] { flex-basis: 130px; }
}

/* 사냥터 선택 창: 목록 높이를 카드 5줄로 고정 (분류·레벨·검색을 바꿔도 창 크기가 그대로). 넘치면 목록 안에서 스크롤 */
.modal-body .hunt-maps .map-pick-list {
  --pick-row: 76px;
  grid-auto-rows: var(--pick-row);
  align-content: start;
  height: calc(var(--pick-row) * 5 + 10px * 4);
  max-height: none;
}
.modal-body .hunt-maps .map-pick { height: 100%; min-height: 0; overflow: hidden; }
.modal-body .hunt-maps .map-pick-seats { flex-wrap: nowrap; overflow: hidden; }

/* 로비 채널 줄 오른쪽: 심 방식 (배달심·매미심·힐케어). 파티원에게는 보기만 */
.lobby-channel-row .lobby-sim { margin-left: auto; }
.lobby-channel-row .lobby-sim:disabled { opacity: 1; }

/* ---- 어드민 현황: 같은 성격끼리 한 줄 (왼쪽 숫자 카드 세로로, 오른쪽 시간대별 그래프) ---- */
.admin-overview-row {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  grid-template-areas: "label label" "stats charts";
  gap: 8px 14px;
  margin: 20px 0 28px;
}
.admin-overview-label { grid-area: label; margin: 0; font-size: 1.05rem; }
.admin-overview-row .admin-stats { grid-area: stats; display: flex; flex-direction: column; gap: 10px; margin: 0; }
.admin-overview-row .admin-stats article { flex: 1 1 0; }
.admin-overview-row .admin-charts { grid-area: charts; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin: 0; }
@media (max-width: 960px) {
  .admin-overview-row { grid-template-columns: 1fr; grid-template-areas: "label" "stats" "charts"; }
  .admin-overview-row .admin-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
}

/* 어드민 현황: 카드·그래프 테두리를 지표 색(--tone)으로. 같은 지표는 같은 색 */
.admin-overview-row [style*="--tone"] { border-color: color-mix(in srgb, var(--tone) 70%, transparent); box-shadow: inset 3px 0 0 var(--tone); }
html.dark .admin-overview-row [style*="--tone"] { border-color: color-mix(in srgb, var(--tone) 70%, transparent); }
.admin-overview-row .admin-stats strong { color: var(--ink); }
/* 맨 위 실시간: 그래프 없이 숫자 카드만 가로로 */
.admin-live { grid-template-columns: 1fr; grid-template-areas: "label" "stats"; }
.admin-live .admin-stats { flex-direction: row; flex-wrap: wrap; }
.admin-live .admin-stats article { flex: 1 1 200px; }
.admin-overview-label { display: flex; align-items: center; gap: 8px; }
.live-dot { width: 8px; height: 8px; border-radius: 50%; background: #ef4444; box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.6); animation: live-pulse 1.6s ease-out infinite; }
@keyframes live-pulse { 70% { box-shadow: 0 0 0 7px rgba(239, 68, 68, 0); } 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0); } }
@media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } }

/* ---- 개요: 스크린샷 크게 보기 창 ---- */
.ov-shot { cursor: zoom-in; }
.ov-lightbox {
  max-width: min(1280px, calc(100vw - 32px)); max-height: calc(100vh - 32px);
  padding: 0; border: 1px solid #3f3f46; border-radius: 14px;
  background: #0b0b0d; color: #e4e4e7; overflow: hidden;
}
.ov-lightbox::backdrop { background: rgba(0, 0, 0, 0.78); }
.ov-lightbox[open] { display: flex; flex-direction: column; animation: ov-lightbox-in 0.16s ease-out; }
.ov-lightbox img { display: block; min-height: 0; max-width: 100%; max-height: calc(100vh - 32px - 48px); object-fit: contain; margin: 0 auto; }
.ov-lightbox-caption { margin: 0; padding: 12px 52px 14px 16px; color: #a1a1aa; font-size: 0.86rem; font-weight: 700; }
.ov-lightbox-close {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; padding: 0; border: 0; border-radius: 50%;
  background: rgba(0, 0, 0, 0.6); color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer;
}
.ov-lightbox-close:hover { background: rgba(0, 0, 0, 0.85); }
@keyframes ov-lightbox-in { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ov-lightbox[open] { animation: none; } }

/* ---- 문의하기 창: 내 문의 목록 (5줄 높이, 넘치면 스크롤) · 제목 입력 ---- */
.inquiry-mine { --inq-row: 46px; }
.inquiry-mine-list { list-style: none; margin: 0; padding: 0 4px 0 0; display: grid; gap: 6px; max-height: calc(var(--inq-row) * 5 + 6px * 4); overflow: auto; }
.inquiry-mine > .status { display: grid; place-items: center; min-height: calc(var(--inq-row) * 2); margin: 0; }
.inquiry-mine-item { border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.inquiry-mine-item[open] { border-color: color-mix(in srgb, var(--accent) 55%, var(--line)); }
.inquiry-mine-item summary {
  display: flex; align-items: center; gap: 8px; min-height: var(--inq-row); box-sizing: border-box;
  padding: 0 12px; cursor: pointer; list-style: none;
}
.inquiry-mine-item summary::-webkit-details-marker { display: none; }
.inquiry-state {
  flex: 0 0 auto; padding: 2px 8px; border-radius: 999px;
  background: color-mix(in srgb, #f59e0b 18%, transparent); color: #f59e0b; font-size: 0.74rem; font-weight: 800;
}
.inquiry-mine-item.answered .inquiry-state { background: color-mix(in srgb, #22c55e 18%, transparent); color: #22c55e; }
.inquiry-mine-item.unread .inquiry-state { background: color-mix(in srgb, #facc15 22%, transparent); color: #facc15; }
.inquiry-mine-kind { flex: 0 0 auto; color: var(--muted); font-size: 0.78rem; font-weight: 700; }
.inquiry-mine-title { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; }
.inquiry-mine-item summary time { flex: 0 0 auto; color: var(--muted); font-size: 0.76rem; font-variant-numeric: tabular-nums; }
.inquiry-mine-content { margin: 0; padding: 0 12px 12px; white-space: pre-wrap; word-break: break-word; line-height: 1.5; font-size: 0.86rem; }
.inquiry-answer { margin: 0 12px 12px; padding: 10px 12px; border-left: 3px solid #22c55e; border-radius: 6px; background: var(--card); font-size: 0.86rem; }
.inquiry-answer b { color: #22c55e; font-size: 0.78rem; }
.inquiry-answer time { margin-left: 8px; color: var(--muted); font-size: 0.74rem; }
.inquiry-answer p { margin: 6px 0 0; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.inquiry-modal .modal-foot [data-new] { display: inline-flex; align-items: center; gap: 6px; }
.inquiry-modal .modal-foot [data-new] .ui-icon { width: 16px; height: 16px; }
.inquiry-title-field { display: block; margin-bottom: 8px; }
.inquiry-title-field input { width: 100%; box-sizing: border-box; }

/* 어드민 문의: 제목, 답변 보기·입력 */
.inquiry-card .inquiry-card-title { margin: 0; font-size: 1rem; }
.inquiry-card .inquiry-answer { margin: 4px 0 0; }
.inquiry-card .inquiry-answer .seat-action { margin-top: 8px; }
.inquiry-answer-form { display: grid; gap: 8px; margin-top: 4px; }
/* 문의 대화: 회원 글은 왼쪽 회색 줄, 운영자 답변은 초록 줄 (web/inquiry.js, 어드민 문의 카드) */
.inquiry-thread { display: grid; gap: 8px; max-height: 320px; overflow: auto; overscroll-behavior: contain; }
.inquiry-mine-item .inquiry-thread { max-height: none; overflow: visible; padding: 0 12px; }
.inquiry-mine-list:has(.inquiry-mine-item[open]) { max-height: min(60vh, 520px); } /* 펼친 대화는 목록을 늘려 한 번에 본다 */
.inquiry-msg { padding: 8px 12px; border-left: 3px solid var(--line); border-radius: 6px; background: var(--card); font-size: 0.86rem; }
.inquiry-msg.admin { border-left-color: #22c55e; }
.inquiry-msg b { font-size: 0.78rem; color: var(--muted); }
.inquiry-msg.admin b { color: #22c55e; }
.inquiry-msg time { margin-left: 8px; color: var(--muted); font-size: 0.74rem; font-variant-numeric: tabular-nums; }
.inquiry-msg p { margin: 4px 0 0; white-space: pre-wrap; word-break: break-word; line-height: 1.5; }
.inquiry-reply { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px 12px; }
.inquiry-reply textarea { flex: 1 1 auto; min-width: 0; resize: vertical; line-height: 1.5; }
.inquiry-reply .auth-button { flex: 0 0 auto; }
.inquiry-reply .auth-button:disabled { opacity: 0.5; cursor: not-allowed; }
.inquiry-answer-form[hidden] { display: none; }
.inquiry-answer-form textarea { width: 100%; box-sizing: border-box; resize: vertical; line-height: 1.5; }
.inquiry-answer-actions { display: flex; justify-content: flex-end; gap: 6px; }

/* 어드민 사냥터 설정: 대륙 칩 순서 (끌어서 바꾸기) */
.admin-region-order { margin-bottom: 18px; }
.admin-region-order h3 em { color: var(--muted); font-style: normal; font-size: 0.8rem; font-weight: 700; }
.region-order-list { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 0; padding: 0; }
.region-chip {
  display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px 0 8px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--card);
  font-size: 0.86rem; font-weight: 800; cursor: grab; user-select: none;
}
.region-chip small { padding: 0 6px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.72rem; }
.region-chip.empty { opacity: 0.55; }
.region-chip.dragging { opacity: 0.4; cursor: grabbing; }
.region-chip.drop-before { box-shadow: -3px 0 0 var(--accent); }
.region-chip.drop-after { box-shadow: 3px 0 0 var(--accent); }
.admin-tab-order { margin-bottom: 14px; }
.region-chip.tab-divider-chip { color: var(--muted); font-weight: 600; }

/* 로비 타이머: 파티장은 시간 왼쪽 톱니바퀴로 고친다. 시간 글자와 입력칸은 같은 폭(고정)이라 고칠 때 줄이 흔들리지 않는다.
   바꾼 타이머는 이름 옆에 점 */
.timer-row { --timer-w: 5.8em; }
.timer-row .timer-left { box-sizing: border-box; width: var(--timer-w); text-align: right; white-space: nowrap; }
.timer-gear {
  display: inline-grid; place-items: center; flex: 0 0 auto; width: 26px; height: 26px; padding: 0;
  border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer;
}
.timer-gear .ui-icon { width: 16px; height: 16px; }
.timer-gear:hover, .timer-gear.on { border-color: var(--line); color: var(--accent); }
.timer-row .timer-custom { margin-left: 4px; color: var(--accent); font-style: normal; }
.timer-edit-form { display: flex; flex: 0 1 auto; align-items: center; gap: 4px; min-width: 0; }
.timer-row .timer-edit-input {
  flex: 0 0 auto; height: 28px; margin: 0; padding: 0 4px; border: 1px solid var(--accent); border-radius: 6px;
  background: var(--bg); color: var(--ink); font: inherit; font-size: 1.15rem; font-weight: 800; font-variant-numeric: tabular-nums;
}

/* ---- 캐릭터: 스탯창 캡처로 생성·갱신 ---- */
.capture-page { display: grid; gap: 16px; max-width: 980px; }
.capture-privacy { margin: 0; padding: 10px 14px; border-radius: 8px; background: rgba(34, 197, 94, 0.1); color: var(--ink); font-size: 0.92rem; line-height: 1.6; }
.capture-steps { display: grid; gap: 6px; margin: 0; padding-left: 22px; color: var(--ink); line-height: 1.6; }
.capture-steps kbd, .capture-drop kbd {
  padding: 1px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 5px;
  background: var(--card); font: 700 0.8rem ui-monospace, Consolas, monospace;
}
.capture-drop {
  display: grid; place-items: center; gap: 6px; min-height: 150px; padding: 20px;
  border: 2px dashed var(--line); border-radius: 14px; background: var(--card); text-align: center; cursor: pointer;
}
.capture-drop strong { font-size: 1.05rem; }
.capture-drop span { color: var(--muted); font-size: 0.86rem; }
.capture-drop:focus-visible, .capture-drop.over { outline: none; border-color: var(--accent); }
.capture-drop.busy { opacity: 0.6; cursor: progress; }
.capture-page .status.error { color: #f87171; white-space: pre-line; } /* 서버 안내가 줄바꿈(1. 2.)으로 온다 */
.capture-result { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.capture-result[hidden] { display: none; }
@media (max-width: 820px) { .capture-result { grid-template-columns: 1fr; } }
.capture-preview { margin: 0; min-width: 0; }
.capture-preview img { display: block; max-width: 100%; border: 1px solid var(--line); border-radius: 10px; }
.capture-fields { display: grid; gap: 12px; min-width: 0; }
.capture-read { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.capture-read div { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.capture-read div:last-child { grid-column: 1 / -1; }
.capture-read dt { color: var(--muted); font-size: 0.82rem; font-weight: 700; }
.capture-read dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.capture-read dd small { color: var(--muted); font-weight: 600; }
.capture-need { color: #f59e0b; font-style: normal; }
.capture-field { display: grid; gap: 4px; font-size: 0.86rem; font-weight: 700; }
.capture-field[hidden] { display: none; }
.capture-field small { color: var(--muted); font-weight: 600; }
.capture-actions { display: flex; justify-content: flex-end; gap: 8px; }
.buff-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, #ef4444 18%, transparent); color: #f87171; font-size: 0.72rem; font-weight: 800; vertical-align: middle; }
.capture-missing { color: #f59e0b; font-size: 0.78rem; font-weight: 700; }

/* 로비 파티원 스공: 눌러서 인증 사진 */

/* 캐릭터 캡처: [게임 화면 가져오기] (화면 공유로 게임 창 한 장) */
.capture-grab { display: grid; justify-items: start; gap: 8px; padding: 20px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
.capture-grab-button { min-height: 46px; padding: 0 22px; font-size: 1rem; }
.capture-grab-button.busy, .capture-grab-button:disabled { opacity: 0.6; cursor: progress; }

/* 로비 파티원 줄: 스탯공격력은 직업 뱃지 바로 오른쪽 (맨 오른쪽 칸은 지참금·버튼에 가려졌다). 좁으면 닉네임이 먼저 줄어든다 */
.lobby-page .seat-member .seat-atk { flex: 0 0 auto; }
.lobby-page .seat-member .seat-nick { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }


/* 창 아래 버튼을 hidden 으로 숨길 때 (.auth-button 의 display 가 hidden 을 이기지 않게). 사냥터 선택 창은 누르면 바로 확정 */
.modal-foot .auth-button[hidden] { display: none; }

/* ---- 사용안내: 15초 시연 (첫 화면 소개 바로 아래) ---- */
.ov-demo { display: grid; justify-items: center; gap: 8px; margin: 0 auto 8px; max-width: 760px; }
.ov-demo picture, .ov-demo img { display: block; width: 100%; max-width: 720px; height: auto; }
.ov-demo img { aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 14px; background: #000; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35); }
.ov-demo figcaption { color: var(--muted); font-size: 0.82rem; font-weight: 700; }

/* 상단 탭: [자리매매]는 기존 탭과 세로선으로 구분 */
.tabs .tab-divider { align-self: center; width: 1px; height: 18px; margin: 0 8px; background: var(--line); }
.tabs .tab-divider[hidden], .tabs a[hidden] { display: none; }
/* [자리매매]: 상단 메뉴 아래 남은 높이를 시안 페이지(iframe)가 채운다 */

/* 사냥터 선택 창: 지금 파티원을 찾는 로비가 있는 사냥터 */
.map-pick-live {
  display: inline-flex; align-items: center; gap: 4px; flex: 0 0 auto; padding: 1px 8px; border-radius: 999px;
  background: color-mix(in srgb, #22c55e 22%, transparent); color: #4ade80; font-size: 0.72rem; font-weight: 900;
}
.map-pick-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #22c55e; animation: live-pulse-green 1.6s ease-out infinite; }
@keyframes live-pulse-green { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); } 70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); } 100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); } }
@media (prefers-reduced-motion: reduce) { .map-pick-live::before { animation: none; } }
.map-pick.has-bg .map-pick-live { background: rgba(0, 0, 0, 0.55); color: #4ade80; }

/* ---- 어드민 [캐릭터] 탭 ---- */
.admin-characters h2 em { color: var(--muted); font-size: 0.82rem; font-style: normal; font-weight: 700; margin-left: 6px; }
.char-admin-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 10px 0 12px; }
.char-admin-tools input[type="search"] { flex: 1 1 260px; min-width: 0; }
.char-admin-check { display: inline-flex; align-items: center; gap: 6px; font-size: 0.86rem; font-weight: 700; cursor: pointer; }
.char-admin-table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.char-admin-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; white-space: nowrap; }
.char-admin-table th, .char-admin-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; }
.char-admin-table th { position: sticky; top: 0; background: var(--surface); color: var(--muted); font-size: 0.76rem; font-weight: 800; }
.char-admin-table .n { text-align: right; font-variant-numeric: tabular-nums; }
.char-admin-table td small, .char-admin-table .muted { color: var(--muted); }
.char-admin-table tbody tr:hover { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.char-admin-table a { color: var(--accent); font-weight: 800; }

/* 어드민 [현황] 그래프 기간: 최근 24시간 · 하루 시간대별(날짜 선택) · 일자별 */
.chart-range { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 18px 0 -4px; }
.chart-range button { height: 32px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); color: var(--muted); font: inherit; font-size: 0.84rem; font-weight: 800; cursor: pointer; }
.chart-range button.on { border-color: var(--accent); background: var(--accent); color: #fff; }
.chart-range input[type="date"] { height: 32px; padding: 0 10px; border: 1px solid var(--accent); border-radius: 8px; background: var(--card); color: var(--ink); font: inherit; font-size: 0.84rem; color-scheme: dark; }
.chart-range input[hidden] { display: none; }
.chart-range-state { color: var(--muted); font-size: 0.8rem; font-weight: 700; }

/* [사용안내] 첫 화면 "오늘 방문자 수" */
.ov-visitors { margin: 16px 0 0; color: var(--muted); font-size: 0.9rem; font-weight: 700; }
.ov-visitors b { color: var(--ink); font-size: 1.05rem; font-variant-numeric: tabular-nums; }
.ov-visitors-in { animation: ov-visitors-in 0.6s ease-out both; }
@keyframes ov-visitors-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

/* 어드민 그래프 범례: 회원(실선) · 비로그인(점선) */
.chart-legend { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--muted); font-size: 0.76rem; font-weight: 700; }
.chart-legend i { display: inline-block; width: 16px; height: 0; border-top: 2px solid var(--c); }
.chart-legend i.dashed { margin-left: 6px; border-top-style: dashed; }

/* [스킬 시뮬레이터] (web/pages/skill-sim.js): 위 한 줄에 레벨·직업·분류, 아래 1차~4차 스킬창을 옆으로 나란히 */
.skill-sim { --stat-label-size: 0.85rem; --stat-input-height: 29px; display: grid; gap: 14px; }
.skill-sim-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; padding: 14px 18px; }
.skill-sim-bar .job-select-field { min-width: 150px; }
.skill-sim-level { min-width: 0 !important; }
.skill-sim-level input { width: 5.5em; height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font-size: 0.9rem; font-weight: 600; box-sizing: border-box; }
.skill-sim-category { display: grid; gap: 6px; }
/* 1차~4차 카드 줄은 폭 100%를 똑같이 나눈다 (좁으면 내용 너비 아래로 줄지 않고 옆으로 민다). 카드 사이는 위 레벨·직업 카드와의 간격(.skill-sim gap 14px)과 같다 */
.skill-sim-windows { width: 100%; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(max-content, 1fr); gap: 14px; align-items: start; overflow-x: auto; padding-bottom: 4px; }
.skill-sim-empty { grid-column: 1 / -1; display: grid; place-items: center; min-height: 240px; margin: 0; border: 1px dashed var(--line); border-radius: 12px; }
.skill-sim-window { position: relative; align-content: start; padding: 14px; }
.skill-sim-window.is-locked .skill-list { opacity: 0.4; }
.skill-sim-window-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.skill-sim-sp { padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.78rem; font-weight: 800; }
.skill-sim-sp[hidden] { display: none; }
/* 카드 아래: 총 SP · 남은 SP · [리셋] */
.skill-sim-window .stat-ap { grid-template-columns: 1fr 1fr auto; align-items: end; }
.skill-sim-reset { height: var(--stat-input-height); padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); font-size: 0.78rem; font-weight: 800; cursor: pointer; }
.skill-sim-reset:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.skill-sim-reset:disabled { opacity: 0.5; cursor: not-allowed; }
/* 창 안의 행들이 한 격자를 같이 쓴다: 스킬 이름 칸이 남는 폭을 차지해 선택칸·ALL은 카드 오른쪽 끝(왼쪽과 같은 여백)에 붙는다 */
.skill-sim .skill-list { grid-template-columns: 32px minmax(max-content, 1fr) max-content; column-gap: 4px; row-gap: 8px; align-items: center; }
.skill-sim .skill-row { display: contents; }
.skill-sim .skill-meta { margin-right: 0; }
.skill-sim .skill-level-controls { grid-template-columns: 2.1rem 34px; gap: 4px; } /* 레벨 선택칸은 처음(4.2rem)의 50% */
.skill-sim .skill-level { padding: 0 2px; appearance: none; -webkit-appearance: none; text-align-last: center; cursor: pointer; } /* 좁아서 화살표는 숨기고 숫자만 가운데 */
@media (max-width: 768px) {
  .skill-sim-bar .job-select-field { flex: 1 1 140px; min-width: 0; }
}

/* 탭이 많아지면(자리매매·메랜백과·스킬 시뮬레이터) 좁은 화면에서 글자가 세로로 꺾이지 않게 한 줄로 두고 가로로 밀어 본다 */
.tabs a { white-space: nowrap; }
@media (max-width: 768px) {
  .tabs { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .tabs::-webkit-scrollbar { display: none; }
  .tabs a { padding: 8px 12px; }
}

/* 탭이 많아져도 상단 [효과음] 버튼 글자가 세로로 꺾이지 않게 */
.top-menu [data-menu-button] { white-space: nowrap; flex-shrink: 0; }

/* ---- [프로필] (web/pages/profile.js) ---- */
.profile-page { max-width: 720px; }
.profile-card { display: flex; align-items: center; gap: 18px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 12px; }
.profile-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; }
.profile-info { display: grid; grid-template-columns: max-content 1fr; gap: 6px 16px; margin: 0; }
.profile-info dt { color: var(--muted); }
.profile-info dd { margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.profile-withdraw { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); }
.profile-withdraw h2 { margin: 0 0 8px; font-size: 1.1rem; }
.profile-withdraw p { margin: 0 0 14px; color: var(--muted); line-height: 1.7; }
.profile-withdraw a { color: var(--accent); text-decoration: underline; }

/* ---- [개인정보처리방침] (web/pages/privacy.js) ---- */
.policy-page { max-width: 860px; line-height: 1.75; }
.policy-page h2 { margin: 28px 0 8px; font-size: 1.1rem; }
.policy-page p, .policy-page ul { margin: 0 0 10px; }
.policy-page ul { padding-left: 22px; }
.policy-page a { color: var(--accent); text-decoration: underline; }
.policy-table { width: 100%; margin: 0 0 10px; border-collapse: collapse; font-size: 0.92rem; }
.policy-table th, .policy-table td { padding: 8px 10px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.policy-table th { color: var(--muted); font-weight: 700; white-space: nowrap; }

/* ---- 사이트 하단 (web/index.html) ---- */
.site-foot { flex: none; display: flex; justify-content: center; gap: 16px; padding: 14px 16px 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.site-foot a { color: inherit; }
.site-foot a:hover { color: var(--ink); text-decoration: underline; }
@media (max-width: 640px) {
  .profile-card { flex-direction: column; align-items: flex-start; }
  .policy-table { display: block; overflow-x: auto; }
}

/* ---- 로비 배치: 왼쪽 파티원은 6자리 높이로 고정(5자리 이하면 아래를 비워 둔다), 오른쪽은 사냥터 카드가
   줄어들어 왼쪽과 높이를 맞춘다. 소환 몬스터·드롭 아이템은 두 칸 아래에 가로 한 줄로 ---- */
.lobby-page .lobby-info-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin-top: 14px; align-items: stretch; }
.lobby-page .lobby-info-row > .lobby-panel { min-width: 0; margin: 0; }
@media (min-width: 961px) {
  .lobby-page .lobby-layout { align-items: stretch; }
  .lobby-page .lobby-seats { height: calc(60px * 6 + 6px * 5); align-content: start; } /* 자리 60px · 간격 6px */
  /* 오른쪽은 높이 계산에서 빠지고(contain) 왼쪽이 정한 높이에 맞춰 늘어난다. 남는·모자라는 높이는 사냥터 카드가 맡는다 */
  .lobby-page .lobby-side { contain: size; min-height: 0; }
  .lobby-page .lobby-side .lobby-map,
  .lobby-page .lobby-side .lobby-map.no-map { flex: 1 1 0; height: auto; min-height: 88px; }
  .lobby-page .lobby-side .lobby-map-empty-mark { font-size: 48px; }
}
@media (max-width: 960px) {
  .lobby-page .lobby-info-row { grid-template-columns: minmax(0, 1fr); }
}
/* 로비 타이머 줄: 기존 44px의 80%. 줄어든 높이만큼 위 사냥터 카드가 늘어난다 (.lobby-side .lobby-map flex) */
.lobby-page .lobby-timers .timer-row { box-sizing: border-box; height: 35px; padding-top: 0; padding-bottom: 0; }
.lobby-page .lobby-timers .timer-row .timer-edit-input { height: 26px; }
/* 스킬 시뮬레이터: 아직 열지 않은 직업 계열 탭 (web/pages/skill-sim.js DISABLED_CATEGORIES) */
.category-tab.disabled { cursor: not-allowed; }
.category-tab.disabled span { opacity: 0.4; }
/* 소환 몬스터 카드는 높이 계산에서 빠지고(contain) 옆 드롭 아이템(3줄) 카드 높이에 맞춘다. 넘치면 안에서 스크롤 */
.lobby-page .lobby-info-row > .lobby-mobs { contain: size; display: flex; flex-direction: column; }
.lobby-page .lobby-info-row > .lobby-mobs .mob-grid { flex: 1 1 auto; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; }
@media (max-width: 960px) {
  .lobby-page .lobby-info-row > .lobby-mobs { contain: none; }
}
/* 파티원찾기 중 빈 자리의 "매칭중…": 자리 줄 가로 가운데 */
.lobby-page .lobby-seat .seat-searching { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); pointer-events: none; }
/* 예전 오른쪽 아래 작은 "매칭중…"(::after)은 가운데 글자와 겹치므로 그리지 않는다 */
.lobby-page .lobby-seat.empty.searching::after { content: none; }
/* 상단 [파티매칭] 탭: 파티매칭 대기 중 "찾는중 00:00..." (web/pages/party.js paintNavQueue). 점 개수가 바뀌어도 폭은 그대로 */
.tabs a.matching { color: var(--accent); font-variant-numeric: tabular-nums; }
.tabs a .tab-dots { display: inline-block; width: 1.1em; text-align: left; }
/* 로비 사냥터 카드: 이름은 (제목 줄과 상관없이) 카드 전체의 세로 가운데, 배경 위에서 또렷하게 겹 그림자 */
.lobby-page .lobby-side .lobby-map .lobby-map-name { position: absolute; inset: 0; z-index: 1; padding: 0 16px; margin: 0; pointer-events: none; }
.lobby-page .lobby-side .lobby-map h2 { position: relative; z-index: 2; }
.lobby-page .lobby-side .lobby-map .lobby-map-name strong {
  font-weight: 800;
  letter-spacing: -0.01em;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9), 0 3px 10px rgba(0, 0, 0, 0.75), 0 0 24px rgba(0, 0, 0, 0.55);
}

/* 사냥터 선택 창 아래 안내: 찾는 사냥터가 없으면 [문의하기] (web/pages/party.js openMapPicker) */
.modal-foot .map-pick-note { flex: 1 1 auto; margin: 0; color: var(--muted); font-size: 0.86rem; line-height: 1.5; }
.modal-foot .map-pick-note .link-button { padding: 0; border: 0; background: none; color: var(--accent); font: inherit; font-weight: 800; text-decoration: underline; cursor: pointer; }


/* ==== 모바일 정리 (768px 이하). PC(769px 이상)에는 적용되지 않는다 ==== */
@media (max-width: 768px) {
  /* 상단: 1줄 = 로고 · 효과음 · 계정, 2줄 = 메뉴 탭 (가로로 넘겨 본다) */
  .top {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: "brand . sfx auth" "tabs tabs tabs tabs";
    align-items: center;
    gap: 8px 8px;
    padding: 10px 16px 0;
  }
  .top .brand { grid-area: brand; }
  .top .sfx-menu { grid-area: sfx; margin: 0; }
  .top .auth { grid-area: auth; width: auto; margin: 0; order: 0; min-height: 0; }
  .top .auth-cluster { width: auto; }
  .top .tabs {
    grid-area: tabs;
    margin: 0 -16px;
    padding: 0 12px 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top .tabs::-webkit-scrollbar { display: none; }
  .top .tabs a { flex: 0 0 auto; padding: 8px 12px; font-size: 0.9rem; }
  .sfx-toggle > span { display: none; } /* 효과음: 아이콘만 */
  .sfx-toggle { padding: 0 8px; }
  .auth-user { max-width: 140px; }
  .auth-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (max-width: 768px) {
  /* 캐릭터 직접 입력 폼(캐릭터 관리·N방컷): PC용 고정 폭(240·320px)을 풀고 화면 폭을 다 쓴다 */
  .form-side-left,
  .form-side-left .form-col-identity,
  .form-side-left .form-col-stats,
  .split-col .form-col-skills { width: 100%; min-width: 0; max-width: none; }

  /* 캐릭터 관리: 슬롯은 한 줄에 하나. 빈 슬롯은 낮게, 캐릭터 카드는 4:5 */
  .char-slots .char-slot { aspect-ratio: 4 / 5; }
  .char-slots .char-slot.empty { aspect-ratio: auto; min-height: 88px; }

  /* 파티매칭 첫 화면: [파티매칭]을 위 한 줄로 넓게, 아래에 [파티 생성] · [초대 코드 · 코드 입장] */
  .party-home .char-portrait { height: 260px; }
  .party-home .party-cta-row.three { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 6px; }
  .party-home .party-cta-row.three > [data-action="find"] { grid-column: 1 / -1; order: -1; height: 56px; }
  .party-home .party-cta-row.three > .cta-side,
  .party-home .party-cta-row.three > .cta-stack { height: 44px; min-height: 0; }
  .party-home .party-cta-row.three > .cta-stack { display: flex; gap: 6px; }
  .party-home .party-cta-row.three > .cta-stack > * { flex: 1 1 0; min-width: 0; height: 44px; min-height: 0; }

  /* 사냥터 선택 창: 자리 칩이 글자 단위로 줄바꿈되지 않게 (넘치는 칩은 가린다) */
  .map-pick-seat { flex: 0 0 auto; white-space: nowrap; }
  .map-pick-title { min-width: 0; }
  .modal-foot .map-pick-note { font-size: 0.8rem; }
}

@media (max-width: 768px) {
  /* 파티매칭 첫 화면 2줄째: [파티 생성] | [초대 코드 입력 · 코드 입장] — 글자가 줄바꿈되지 않게 */
  .party-home .party-cta-row.three { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
  .party-home .party-cta-row.three .match-cta-label { white-space: nowrap; font-size: 0.95rem; }
  .party-home .party-cta-row.three > .cta-side .ui-icon { display: none; }
  .party-home .party-cta-row.three > .cta-stack > .code-input { flex: 1 1 auto; padding: 0 10px; font-size: 0.9rem; letter-spacing: 0.1em; }
  .party-home .party-cta-row.three > .cta-stack > .match-cta { flex: 0 0 auto; width: auto; padding: 0 14px; }

  /* 파티 로비 위: 코드 · 코드 복사 · 링크 복사를 한 줄에 */
  .lobby-page .lobby-share { flex-wrap: nowrap; gap: 6px; }
  .lobby-page .lobby-code { flex: 0 1 auto; min-width: 0; font-size: 0.95rem; letter-spacing: 0.12em; }
  .lobby-page .lobby-share .auth-button { flex: 0 0 auto; padding: 6px 10px; font-size: 0.8rem; white-space: nowrap; }

  /* 파티원 줄: 레벨·닉네임·직업·스공·배지가 한 줄에 다 안 들어가면 두 줄로 */
  .lobby-page .lobby-seats > .seat-slot > .seat-row,
  .lobby-page .lobby-seats .lobby-seat { height: auto; min-height: 60px; padding-top: 6px; padding-bottom: 6px; }
  .lobby-page .seat-member { flex-wrap: wrap; row-gap: 4px; column-gap: 6px; align-content: center; }
  .lobby-page .seat-nick { max-width: 9em; font-size: 0.9rem; }
}

@media (max-width: 768px) {
  /* 파티원 줄: 오른쪽 지참금 칸 자리를 비워 두고, 배지는 줄어들지 않고 다음 줄로 넘어가게 */
  .lobby-page .lobby-seats .lobby-seat.has-meso { padding-right: calc(10px + var(--seat-meso-w) + 10px); }
  .lobby-page .seat-member > .cell-badge,
  .lobby-page .seat-member > .seat-atk,
  .lobby-page .seat-member > .name-tags { flex: 0 0 auto; }
  .lobby-page .seat-member > .seat-nick { flex: 0 1 auto; }
}

/* 태블릿(561~768px): 캐릭터 슬롯은 PC처럼 세 칸 (한 칸에 하나면 카드가 너무 커진다) */
@media (min-width: 561px) and (max-width: 768px) {
  .char-slots { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .char-slots .char-slot,
  .char-slots .char-slot.empty { aspect-ratio: 9 / 16; min-height: 0; }
}

@media (max-width: 768px) {
  /* 파티원 줄: 자리 이름 칸은 왼쪽에 고정(좁게), 나머지만 두 줄로 */
  .lobby-page .lobby-seats > .seat-slot > .seat-row,
  .lobby-page .lobby-seats .lobby-seat { flex-wrap: nowrap !important; }
  .lobby-page .seat-no { flex: 0 0 52px; padding: 0 4px; }
}
@media (min-width: 561px) and (max-width: 768px) {
  /* 태블릿 캐릭터 카드 버튼: 좁은 칸에서도 한 줄로 */
  .char-card-info .char-slot-actions .auth-button,
  .char-card-info .char-slot-actions a,
  .char-card-info .char-slot-actions button { padding-left: 4px; padding-right: 4px; font-size: 0.78rem; white-space: nowrap; }
}

/* 지참금 부호: 내는 돈 −, 프리/비숍 자리(받는 돈) + (web/pages/party.js mesoSign). 금액이 없으면 숨긴다 */
.meso-sign { flex: 0 0 auto; margin-left: auto; margin-right: -3px; color: #f87171; font-style: normal; font-weight: 800; } /* − 내는 돈: 빨강 */
.meso-sign.plus { color: #4ade80; } /* + 받는 돈(프리/비숍 자리): 초록 */
/* 부호가 숫자에 붙도록: 금액 칸은 글자 폭만큼만 (부호·금액·만을 오른쪽에 모은다) */
.rank-meso.has input,
.seat-meso-badge.has input { flex: 0 0 auto; width: auto; field-sizing: content; min-width: 1ch; }
.seat-meso-badge.has strong { flex: 0 0 auto; }
.rank-meso:not(.has) .meso-sign,
.seat-meso-badge:not(.has) .meso-sign { display: none; }

/* 로비: 사냥터를 고르기 전에도 드롭 아이템 칸은 3줄 높이 (고른 뒤와 같은 크기) */
.lobby-loot > .status { display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-height: calc(38px * 4 + 4px * 3); margin: 0; }
.lobby-info-row .lobby-mobs.is-disabled .mob-grid > .status { display: flex; align-items: center; justify-content: center; min-height: calc(38px * 4 + 4px * 3); margin: 0; }


/* 캐릭터 카드: 캡처 방식은 [캡처로 갱신][스킬 등록] / [메인][삭제] 두 줄 */
.char-slot-actions.with-skill .char-delete { grid-column: auto; }
/* [스킬 등록] (스킬 시뮬레이터 화면을 캐릭터 모드로): 직업·레벨 고르는 줄은 숨긴다 */
.skill-sim-bar[hidden] { display: none; }


/* 비로그인 초대 손님 입장 폼 */
.guest-join-form { display: grid; grid-template-columns: 90px 1fr 150px; gap: 10px; margin: 12px 0 4px; }
.guest-join-form label { display: grid; gap: 4px; font-size: 0.82rem; color: var(--muted); }

@media (max-width: 768px) { .guest-join-form { grid-template-columns: 1fr; } }
/* [사용안내] 시연 영상 (패치노트는 상단 [패치노트] 버튼으로 옮겼다) */
.ov-demo-row { display: grid; justify-content: center; gap: 20px; margin: 0 auto 8px; }
.ov-demo-row .ov-demo { margin: 0; width: 100%; }
/* 어드민 [패치노트] */
.patch-note-form { display: flex; gap: 8px; margin: 12px 0; }
.patch-note-form input { flex: 1; }
.patch-note-admin-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.patch-note-admin-list li { display: grid; grid-template-columns: 90px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; }
.patch-note-admin-list time { color: var(--muted); }
.lobby-seat .seat-dummy-fields .guest-atk-input { width: 92px; }
/* 초대 링크로 들어온 비로그인 게스트: [파티장] 뱃지와 같은 모양, 회색 */
.seat-badge.guest, .lobby-page .seat-badge.guest { border-color: #71717a; background: rgba(161, 161, 170, 0.15); color: #d4d4d8 !important; }
/* [파티로비] 타이머: 링 게이지 칸 (디자인 시안 T1). 3칸 나란히, 남은 비율만큼 원이 채워진다 */
.lobby-page .lobby-timers .timer-rows,
.lobby-side .timer-rows { grid-template-columns: repeat(auto-fit, minmax(104px, 1fr)); gap: 8px; }
.lobby-page .lobby-timers .timer-row.timer-tile,
.timer-row.timer-tile { --timer-w: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; align-content: start; gap: 4px 6px; height: auto; padding: 10px 6px; border-radius: 10px; text-align: center; }
.timer-tile .timer-ring-box { position: relative; flex: 0 0 100%; display: grid; place-items: center; height: 88px; }
.timer-tile .timer-ring { position: absolute; width: 88px; height: 88px; left: 50%; top: 0; transform: translateX(-50%); }
.timer-ring-track { fill: none; stroke: var(--surface); stroke-width: 7; }
.timer-ring-bar { fill: none; stroke: var(--line); stroke-width: 7; stroke-linecap: round; transition: stroke 0.2s; }
.timer-tile.running .timer-ring-bar { stroke: var(--accent); }
.timer-tile.paused .timer-ring-bar { stroke: #ca8a04; }
.timer-tile.soon .timer-ring-bar { stroke: #f59e0b; }
.timer-tile.soon { border-color: #f59e0b; background: color-mix(in srgb, #f59e0b 8%, var(--card)); }
.timer-tile.soon .timer-left { color: #fbbf24; }
.timer-row.timer-tile .timer-left { position: relative; width: auto; font-size: 0.86rem; text-align: center; letter-spacing: -0.02em; }
.timer-row.timer-tile strong { flex: 0 1 auto; font-size: 0.84rem; }
.timer-tile .timer-gear { width: 24px; height: 24px; }
.timer-tile .timer-row-buttons { flex: 0 0 100%; justify-content: center; }
.timer-tile .timer-edit-form { flex: 0 0 100%; flex-wrap: wrap; justify-content: center; }
.timer-tile .timer-paused { flex: 0 0 auto; }

/* ---- [N방컷] (web/pages/nhit.js) · 디자인 시안 [N방컷 시안](스킬 시뮬레이터 기준) ----
   제목 줄(제목 | 저장 칸) → 한 줄 바(레벨·직업·분류 | 무기·공격 스킬 | 적용 스탯공)
   → 왼쪽(스탯 229px | 공격력 196px | 버프) · 세로 선 · 오른쪽 323px(방컷 → 몬스터) */
.nhit-page { --stat-input-height: 30px; }
/* 제목 → 설명 → 저장 칸 줄을 위아래로 쌓는다 */
.nhit-head { flex-direction: column; align-items: flex-start; gap: 14px; margin-bottom: 20px; }
.nhit-head > div:first-child { min-width: 0; }
.nhit-head h1 { margin: 0 0 6px; }
.nhit-head .summary { margin: 0; }
.nhit-form { display: grid; gap: 20px; }
.nhit-card { position: relative; align-content: start; gap: 12px; min-width: 0; padding: 16px; box-sizing: border-box; }
.nhit-card.is-locked { opacity: 0.55; }
.nhit-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.nhit-pill { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.nhit-pill:empty { display: none; }
.nhit-pill.on { color: var(--accent); }
.nhit-pill.ready { color: var(--exp); }
.nhit-pill.over { color: var(--boss); }
.nhit-row-name { display: grid; min-width: 0; line-height: 1.25; }
.nhit-row-name b { overflow: hidden; color: var(--ink); font-size: 0.875rem; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.nhit-row-name small { color: var(--muted); font-size: 0.6875rem; font-weight: 600; }
.nhit-page .skill-icon { flex: 0 0 32px; width: 32px; height: 32px; image-rendering: pixelated; }

/* 저장 칸 1~3 · 이름 · 저장 · 삭제 */
.nhit-saves { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; align-self: flex-end; gap: 8px; } /* 제목·설명 아래 줄에서 오른쪽 정렬 */
.nhit-slots { display: flex; flex-wrap: wrap; gap: 8px; }
.nhit-slot { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.8125rem; font-weight: 700; cursor: pointer; }
.nhit-slot i { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--card); font-size: 0.6875rem; font-style: normal; }
.nhit-slot small { color: var(--muted); font-size: 0.75rem; font-weight: 700; }
.nhit-slot:not(.empty) { color: var(--ink); }
.nhit-slot.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); color: var(--ink); font-weight: 800; }
.nhit-slot.on i { background: var(--accent); color: #fff; }
.nhit-slot.on small { color: var(--accent); }
.nhit-save-actions { display: flex; gap: 8px; }
.nhit-save-actions .nhit-label { width: 120px; height: 40px; box-sizing: border-box; padding: 0 10px; border-radius: 6px; }
.nhit-save, .nhit-delete { height: 40px; padding: 0 18px; border: 0; border-radius: 10px; background: var(--accent); color: #fff; font: inherit; font-size: 0.875rem; font-weight: 800; cursor: pointer; }
.nhit-delete { padding: 0 12px; border: 1px solid var(--line); background: transparent; color: var(--muted); }
.nhit-delete:hover:not(:disabled) { border-color: var(--boss); color: var(--boss); }
.nhit-delete:disabled { opacity: 0.45; cursor: not-allowed; } /* 빈 칸에서도 자리를 지켜, 저장한 칸을 눌러도 버튼이 새로 튀어나오지 않게 */
.nhit-save { min-width: 72px; }

/* 한 줄 바 */
.nhit-topbar { position: relative; z-index: 5; display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; padding: 16px 20px; } /* 공격 스킬 목록(펼침)이 아래 카드 위에 오게 */
.nhit-bar-group { display: flex; flex-wrap: wrap; align-items: end; gap: 10px; min-width: 0; }
.nhit-bar-divider { align-self: stretch; flex: none; width: 1px; background: var(--line); }
.nhit-topbar .job-select-field { font-size: 0.8125rem; }
.nhit-topbar .job-select-field > .job-select { width: 100px; min-width: 0; text-overflow: ellipsis; } /* 직업 고르기 전 긴 안내 문구(1차 분류를 선택하세요)에 폭이 늘지 않게 고정 */
.nhit-level input { width: 72px; height: 36px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 1rem; font-weight: 600; }
.nhit-category .category-tabs { display: flex; width: auto; }
.nhit-category .category-tab span { height: 36px; padding: 0 10px; box-sizing: border-box; font-size: 0.8125rem; }
.nhit-skill-picker { position: relative; display: block; }
.nhit-skill-button { display: grid; grid-template-columns: 24px minmax(0, 1fr) 16px; align-items: center; gap: 8px; width: 170px; height: 36px; box-sizing: border-box; padding: 0 8px 0 6px; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 700; text-align: left; cursor: pointer; }
.nhit-skill-button > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nhit-skill-button > span.muted { grid-column: 1 / 3; color: var(--muted); font-size: 0.8125rem; }
.nhit-skill-button::after { content: "▾"; grid-column: 3; color: var(--muted); text-align: center; }
.nhit-skill-button:disabled { border-color: var(--line); cursor: default; opacity: 0.7; }
.nhit-skill-button .skill-icon { width: 24px; height: 24px; }
.nhit-skill-list { position: absolute; top: calc(100% + 4px); left: 0; z-index: 30; display: grid; gap: 2px; min-width: 260px; max-height: 320px; margin: 0; padding: 4px; overflow-y: auto; list-style: none; border: 1px solid var(--line); border-radius: 10px; background: var(--bg); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4); }
.nhit-skill-list[hidden] { display: none; }
.nhit-skill-option { display: flex; align-items: center; gap: 8px; width: 100%; height: 38px; padding: 0 10px 0 6px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; font-size: 0.86rem; font-weight: 700; text-align: left; cursor: pointer; }
.nhit-skill-option small { margin-left: auto; color: var(--muted); font-size: 0.72rem; font-weight: 700; }
.nhit-skill-option:hover, .nhit-skill-option.on { border-color: var(--accent); background: var(--card); }
.nhit-skill-option .skill-icon { width: 28px; height: 28px; }
.nhit-applied { display: grid; justify-items: end; gap: 2px; flex: none; margin-left: auto; padding: 6px 14px; border: 1px solid color-mix(in srgb, var(--accent) 60%, transparent); border-radius: 10px; background: color-mix(in srgb, var(--accent) 14%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 8%, transparent); }
.nhit-applied span { color: var(--muted); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
.nhit-applied strong { color: var(--accent); font-size: 1.375rem; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 왼쪽 · 세로 선 · 오른쪽 */
.nhit-layout { display: grid; grid-template-columns: minmax(0, 1fr) 1px 323px; gap: 24px; align-items: start; } /* 왼쪽 | 세로 선 | 오른쪽(방컷·몬스터) */
.nhit-divider { align-self: stretch; background: var(--line); }
.nhit-left { position: relative; display: flex; align-items: stretch; gap: 16px; min-width: 0; }
.nhit-right { display: grid; gap: 16px; align-content: start; min-width: 0; }
.nhit-stat-card { flex: none; width: 229px; } /* 스탯 줄 [ALL](44px + 간격 6px)만큼 넓히고, 오른쪽 결과 칸을 그만큼 줄였다 */
.nhit-attack-card { flex: none; width: 229px; } /* 스탯 카드 아래, 같은 폭 */
/* 스탯 → 공격력을 위아래로 쌓은 묶음(.nhit-fixed, 폭 229px). 버프 카드를 따라 늘지 않고 내용 높이 그대로이며,
   버프 카드는 줄 높이를 따르므로 최소 이 묶음 높이이고, 버프가 많아지면 늘어난다 */
.nhit-fixed { display: flex; flex-direction: column; flex: none; align-self: flex-start; gap: 16px; width: 229px; min-width: 0; }
.nhit-buff-card { flex: none; align-self: flex-start; width: 324px; } /* 예전(남은 폭 463px)의 70%, 오른쪽은 비워 둔다. 높이는 버프 줄 수만큼 */

/* 스탯: 이름 | 기본 | 추가 (입력칸 30px) · 아래 남은 AP | 총 AP | 리셋 */
.nhit-stat-grid { display: grid; grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr) 44px; column-gap: 6px; row-gap: 8px; align-items: center; }
.nhit-page .nhit-stat-grid .stat-row { display: contents; }
.nhit-stat-grid b { font-size: 0.8125rem; }
.nhit-col-head { color: var(--muted); font-size: 0.6875rem; font-weight: 700; text-align: center; }
.nhit-page .stat-field input { padding: 0 4px; }
.nhit-sum { padding-top: 10px; border-top: 1px solid var(--line); }
.nhit-stat-card .nhit-sum { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 44px; gap: 6px; align-items: end; }
.nhit-stat-card .stat-ap-item strong { padding: 0 4px; }
/* [ALL]·[리셋]: 같은 버튼 모양 (전역 .stat-all-btn 의 파란 바탕·작은 글씨는 쓰지 않는다) */
.nhit-stat-card .skill-sim-reset { width: 44px; height: 30px; min-height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 6px; background: var(--card); color: var(--muted); font-size: 0.78rem; font-weight: 800; letter-spacing: 0; line-height: 1; }
.nhit-stat-card .skill-sim-reset:hover:not(:disabled) { border-color: var(--accent); background: var(--card); color: var(--accent); }
.nhit-stat-card .skill-sim-reset:disabled { opacity: 0.5; cursor: not-allowed; }

/* 공격력: 이름·보조줄 | 48px 입력 (전역 .attack-grid 의 칸 나눔은 쓰지 않는다) */
.nhit-page .nhit-attack-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.nhit-attack-row { display: grid; grid-template-columns: minmax(0, 1fr) 48px; align-items: center; gap: 4px; margin: 0; }
.nhit-attack-row input { width: 48px; height: 30px; box-sizing: border-box; padding: 0 4px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 600; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.nhit-attack-row input::-webkit-outer-spin-button, .nhit-attack-row input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.nhit-attack-row input:disabled { opacity: 0.6; }
.nhit-total { display: grid; place-items: center; width: 48px; height: 30px; box-sizing: border-box; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); border-radius: 6px; background: var(--surface); color: var(--accent); font-size: 0.875rem; font-weight: 800; font-variant-numeric: tabular-nums; }

/* 버프: 아이콘 | 이름·효과 | Lv·켜기 */
.nhit-buff-list { display: grid; gap: 8px; }
.nhit-buff-list > .status { margin: 0; }
.nhit-buff { display: grid; grid-template-columns: 32px minmax(0, 1fr) max-content; align-items: center; column-gap: 8px; margin: 0; }
.nhit-buff-main { display: contents; cursor: pointer; }
.nhit-buff-main > * { cursor: pointer; }
.nhit-buff-ctrl { display: flex; align-items: center; gap: 6px; }
.nhit-buff input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); }
/* [Lv.] 뱃지 = 레벨 선택칸. 크기는 늘 52×24px로 고정 (레벨 글자 수와 관계없이) */
.nhit-lv { flex: none; width: 52px; min-width: 52px; max-width: 52px; height: 24px; padding: 0 4px; box-sizing: border-box; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 700; line-height: 22px; text-align: center; text-align-last: center; font-variant-numeric: tabular-nums; appearance: none; -webkit-appearance: none; cursor: pointer; }
.nhit-lv:hover:not(:disabled) { border-color: var(--accent); }
.nhit-lv:disabled { cursor: default; }
.nhit-buff.on .nhit-lv { border-color: var(--accent); color: var(--accent); }
.nhit-buff.on .skill-icon { outline: 1px solid var(--accent); outline-offset: 1px; border-radius: 6px; }
.nhit-buff.off { opacity: 0.5; }
.nhit-buff.off .nhit-buff-main, .nhit-buff.off .nhit-buff-main > * { cursor: default; }

/* 방컷 결과 */
.nhit-result { min-height: 300px; border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.nhit-result > .status { margin: 0; color: var(--muted); }
.nhit-mob-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.nhit-mob-card .sprite.large, .nhit-mob-card .missing { width: 64px; height: 64px; object-fit: contain; }
.nhit-mob-card > div { display: grid; gap: 4px; min-width: 0; }
.nhit-mob-card strong { font-size: 1.125rem; font-weight: 800; }
.nhit-mob-card span { color: var(--muted); font-size: 0.8125rem; }
.nhit-mob-card span b { color: var(--ink); }
.nhit-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.nhit-table th, .nhit-table td { padding: 5px 0; text-align: left; }
.nhit-table thead th { color: var(--muted); font-size: 0.6875rem; font-weight: 700; }
.nhit-table th:first-child { width: 4.25em; padding-right: 10px; white-space: nowrap; } /* 가장 긴 'NN방 ↑' 기준 */
.nhit-table td:nth-child(2) { width: 64px; padding-right: 10px; }
.nhit-table thead th:nth-child(2) { white-space: nowrap; }
.nhit-table tr.rest th, .nhit-table tr.rest td { color: var(--muted); }
.nhit-table tr.rest .nhit-bar > span { background: var(--muted); }
.nhit-table tbody th, .nhit-table tbody td:nth-child(2) { font-size: 1rem; font-weight: 800; }
.nhit-table tr.sure td:nth-child(2) { color: var(--exp); }
.nhit-bar { display: block; height: 8px; border-radius: 999px; background: var(--surface); overflow: hidden; }
.nhit-bar > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); }
.nhit-table tr.sure .nhit-bar > span { background: var(--exp); }

/* 몬스터 목록: 줄 40px · 7줄 높이, 넘치면 안에서 스크롤 */
.nhit-search .text-input { height: 36px; box-sizing: border-box; padding: 0 10px; border-radius: 6px; font-size: 0.875rem; }
.nhit-results { display: grid; grid-auto-rows: 40px; align-content: start; gap: 6px; height: calc(40px * 7 + 6px * 6); margin: 0; padding: 0; overflow-y: auto; list-style: none; overscroll-behavior: contain; }
.nhit-results > .status { margin: 0; }
.nhit-mob { display: grid; grid-template-columns: 28px minmax(0, 1fr) max-content; align-items: center; gap: 8px; width: 100%; height: 40px; box-sizing: border-box; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; }
.nhit-mob:hover { border-color: var(--accent); }
.nhit-mob.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.nhit-mob .sprite, .nhit-mob .missing { width: 28px; height: 28px; object-fit: contain; }
.nhit-mob > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nhit-mob em { color: var(--muted); font-size: 0.75rem; font-style: normal; }
.nhit-mob.on em { color: var(--accent); }

@media (max-width: 1100px) {
  .nhit-applied { margin-left: 0; justify-items: start; }
  .nhit-bar-divider { display: none; } /* 바가 두 줄로 접히면 줄 끝에 홀로 남는다 */
}
@media (max-width: 768px) {
  .nhit-head > div:first-child { flex: 0 0 auto; } /* 모바일 page-head 는 세로라 420px 기준 폭이 높이가 된다 */
}
@media (max-width: 960px) {
  .nhit-layout { grid-template-columns: minmax(0, 1fr); }
  .nhit-divider { display: none; }
}
@media (max-width: 640px) {
  .nhit-topbar .job-select-field > .job-select { width: 100%; }
  .nhit-left { flex-wrap: wrap; }
  .nhit-fixed { flex: 1 1 100%; width: auto; }
  .nhit-stat-card, .nhit-attack-card { flex: none; width: auto; }
  .nhit-buff-card { flex: 1 1 100%; width: auto; }
  .nhit-bar-group, .nhit-bar-group > .job-select-field { flex: 1 1 auto; }
  .nhit-skill-button { width: 100%; }
  .nhit-save-actions { flex: 1 1 100%; }
  .nhit-save-actions .nhit-label { flex: 1 1 auto; }
}

/* 상단 오른쪽 묶음: [패치노트] · 효과음(아이콘만) · 계정. 사이 간격 12px (index.html .top-right, app.js) */
.top-right { display: flex; align-items: center; gap: 12px; margin-left: auto; min-height: 36px; } /* 계정·효과음 버튼이 늦게 채워져도 상단바 높이가 그대로 */
.top-right .auth { margin-left: 0; }
.top-right .sfx-menu { margin: 0; }
.top-right .sfx-toggle { justify-content: center; width: 36px; height: 36px; padding: 0; }
.top-right .sfx-toggle .ui-icon { width: 18px; height: 18px; }
.patch-badge { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.8rem; font-weight: 700; white-space: nowrap; cursor: pointer; }
.patch-badge:hover { border-color: var(--accent); color: var(--ink); }
.patch-modal .modal-head { align-items: center; }
.patch-modal .modal-head h2 { margin: 0; font-size: 1.05rem; }
/* 패치노트 창: 줄마다 배경, 안 읽은 줄(지난번 연 뒤 올라온 줄)은 노란 테두리·바탕 + New */
.patch-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.patch-list li { display: grid; grid-template-columns: 42px 1fr auto; align-items: start; gap: 10px; padding: 8px 12px; border: 1px solid transparent; border-radius: 8px; background: var(--surface); font-size: 0.9rem; line-height: 1.5; }
.patch-list li.unread { border-color: rgba(250, 204, 21, 0.7); background: color-mix(in srgb, #facc15 12%, var(--surface)); }
.patch-list li .patch-new { position: static; margin-top: 3px; font-style: normal; }
.patch-list time { color: var(--muted); font-variant-numeric: tabular-nums; }
@media (max-width: 768px) {
  .top { grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "brand . right" "tabs tabs tabs"; }
  .top .top-right { grid-area: right; }
  .patch-badge { height: 32px; padding: 0 10px; }
  .top-right .sfx-toggle { width: 32px; height: 32px; }
  .top-right { min-height: 32px; }
}
/* N방컷 버프 카드: 공격력 버프 · 데미지 증가 · 무기 마스터리 묶음 제목 */
.nhit-buff-sub { margin: 4px 0 -2px; color: var(--muted); font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.02em; }
.nhit-buff-sub:first-child { margin-top: 0; }
.nhit-result .nhit-card-head .nhit-pill { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.nhit-table tbody th { white-space: nowrap; }
/* N방컷: 결과를 보려면 꼭 채워야 하는 칸 (nhit.js paintRequired) */
.nhit-page .nhit-need { border-color: #facc15 !important; box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.28); animation: nhit-need 1.6s ease-in-out infinite; }
@keyframes nhit-need { 50% { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.08); } }
@media (prefers-reduced-motion: reduce) { .nhit-page .nhit-need { animation: none; } }
/* [패치노트] 안 읽음: 작은 New 뱃지 + 노란 테두리 (app.js installPatchNotes, localStorage party.patchSeen) */
.patch-badge { position: relative; } /* New 뱃지는 모서리에 띄워서 읽기 전·후 버튼 크기가 같다 */
.patch-badge.unread { border-color: #facc15; color: var(--ink); box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25); animation: patch-new 1.6s ease-in-out infinite; }
.patch-new { position: absolute; top: -7px; right: -8px; display: inline-grid; place-items: center; pointer-events: none; min-width: 16px; height: 16px; padding: 0 4px; box-sizing: border-box; border-radius: 999px; background: #facc15; color: #1f1f1f; font-size: 0.625rem; font-weight: 900; line-height: 1; }
@keyframes patch-new { 50% { box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.08); } }
@media (prefers-reduced-motion: reduce) { .patch-badge.unread { animation: none; } }
/* N방컷 표: 늘 3줄 + 'N방 ↑' 한 줄 높이 (99.9%에 일찍 닿으면 남는 줄은 보이지 않는 빈 줄) */
.nhit-table tbody tr { height: 34px; }
.nhit-table tr.empty { visibility: hidden; }

/* ---- 파티 로비 시안 F 배치 (.lobby-v2, 2026-10-11, 디자인 캔버스 '파티로비 시안 6종' F) ----
   머리 → 위 한 줄 바 → 파티원 75% | 사냥터 · 타이머 · 버튼 25% → 소환 몬스터 | 드롭 아이템 (반반). 카드 간격 14px.
   PC(961px 이상)에서는 카드 높이·바 높이·칸 폭을 모두 고정해서, 채널 입력·타이머 수정·자리 채움·사냥터 변경·
   파티장/파티원 화면 차이 등 어떤 조작에도 배치가 움직이지 않는다. 넘치는 내용은 카드 안에서 말줄임 또는 스크롤 */
.lobby-v2 { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; }
.lobby-v2 .lobby-panel { margin: 0; padding: 14px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(22, 27, 34, 0.72); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); box-sizing: border-box; min-width: 0; }
.lobby-v2 .lobby-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 8px 16px; }
.lobby-v2 .lobby-top-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.lobby-v2 .lobby-top h1 { margin: 0; font-size: 1.5rem; font-weight: 900; }
.lobby-v2 .lobby-top .summary { margin: 0; color: var(--muted); font-size: 0.875rem; }
.lobby-v2 .lobby-share { flex-wrap: nowrap; }
.lobby-v2 .lobby-share .auth-button { height: 32px; min-height: 0; padding: 0 12px; }
.lobby-v2 .lobby-code { display: inline-flex; align-items: center; height: 32px; box-sizing: border-box; }
/* 위 한 줄 바: 높이 46px 고정, 줄바꿈 없음. 채널·심 칸은 폭 고정(오른쪽 정렬)이라 편집칸이 열려도 왼쪽 칸 폭이 그대로 */
.lobby-v2 .lobby-bar { display: flex; flex-wrap: nowrap; align-items: center; gap: 30px; height: 46px; padding: 0 18px; overflow: hidden; }
.lobby-v2 .lobby-bar .panel-label { flex: 0 0 auto; color: var(--muted); font-size: 0.6875rem; font-weight: 800; }
.lobby-v2 .lobby-bar-summary { display: flex; align-items: center; flex: 1 1 0; min-width: 0; height: 32px; }
.lobby-v2 .lobby-bar-map { display: flex; align-items: center; gap: 8px; min-width: 0; flex: 1 1 auto; white-space: nowrap; }
.lobby-v2 .lobby-bar-map .lobby-head-map { flex: 0 1 auto; min-width: 0; font-size: 1.125rem; font-weight: 900; }
.lobby-v2 .lobby-bar-map .lobby-head-tools { flex: 0 0 auto; margin-left: 22px; }
.lobby-v2 .lobby-bar-map .lobby-head-tools .auth-button { height: 30px; }
.lobby-v2 .lobby-bar .lobby-channel-row { flex: 0 0 440px; width: 440px; height: 32px; justify-content: flex-end; flex-wrap: nowrap; gap: 6px; padding: 0; border: 0; background: none; box-shadow: none; white-space: nowrap; overflow: hidden; }
.lobby-v2 .lobby-bar .lobby-channel-form { display: flex; flex-wrap: nowrap; gap: 6px; }
.lobby-v2 .lobby-bar .lobby-channel-input { width: 96px; height: 30px; box-sizing: border-box; }
.lobby-v2 .lobby-bar .lobby-channel-row .auth-button { height: 30px; min-height: 0; padding: 0 12px; }
.lobby-v2 .lobby-bar .lobby-channel-badge { height: 30px; box-sizing: border-box; display: inline-flex; align-items: center; }
/* 채널 칸: 채널 · 뱃지/입력칸(80px 고정) · 연필을 고정 폭 상자에 왼쪽부터 → 편집해도 아무것도 안 움직인다 */
.lobby-v2 .lobby-bar .lobby-channel-box { display: flex; flex: 0 0 auto; align-items: center; gap: 6px; width: 136px; }
.lobby-v2 .lobby-bar .lobby-channel-form { display: contents; }
.lobby-v2 .lobby-bar .lobby-channel-input,
.lobby-v2 .lobby-bar .lobby-channel-badge { flex: 0 0 80px; width: 80px; justify-content: center; }
.lobby-v2 .lobby-bar .lobby-channel-badge { display: block; overflow: hidden; text-overflow: ellipsis; line-height: 27px; padding: 0 8px; text-align: center; }
.lobby-v2 .lobby-bar .lobby-channel-input { padding: 0 8px; }
.lobby-v2 .lobby-bar .lobby-channel-edit { margin: 0; }
.lobby-v2 .lobby-bar .lobby-sim-label { margin-left: 24px; }
.lobby-v2 .lobby-bar .lobby-sim { margin-left: 0; flex: 0 0 auto; }
/* 카드 머리: 제목 왼쪽 + 둥근 pill 오른쪽 */
.lobby-v2 .lobby-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 26px; margin: 0 0 10px; }
.lobby-v2 .lobby-card-head h2 { margin: 0; font-size: 0.95rem; font-weight: 800; }
/* 파티원 카드 머리: 제목 + 인원 pill 왼쪽, [프리셋 관리] 오른쪽 (머리 높이 26px 안에 맞춘 작은 버튼) */
.lobby-v2 .lobby-card-title { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.lobby-v2 .lobby-party-tools { display: inline-flex; flex: 0 0 auto; }
.lobby-v2 .lobby-preset-button { height: 26px; min-height: 0; padding: 0 10px; font-size: 0.78rem; }
.lobby-v2 .lobby-preset-button .ui-icon { width: 14px; height: 14px; }
.lobby-v2 .lobby-preset-button.on { border-color: var(--accent); color: var(--accent); }
.lobby-v2 .lobby-pill { flex: 0 0 auto; padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
/* 위 칸: 파티원 75% | 오른쪽 25%. 아래 칸: 소환 몬스터 | 드롭 아이템 반반 */
.lobby-v2 .lobby-cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; margin: 0; align-items: stretch; }
.lobby-v2 .lobby-cols.lobby-layout { grid-template-columns: minmax(0, 733fr) minmax(0, 324fr); } /* 캔버스 '적용본'에서 사용자가 맞춘 폭 733 : 324 */
.lobby-v2 .lobby-side { display: flex; flex-direction: column; gap: 14px; min-width: 0; contain: none; }
.lobby-v2 .lobby-side .lobby-timers { margin: 0; }
/* 사냥터 카드(좁은 칸): 이름은 카드 가운데, 제목 줄은 숨긴다 */
.lobby-v2 .lobby-side .lobby-map { padding: 10px; }
.lobby-v2 .lobby-side .lobby-map > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lobby-v2 .lobby-side .lobby-map .lobby-map-name { padding: 0 10px; text-align: center; justify-content: center; }
.lobby-v2 .lobby-side .lobby-map .lobby-map-name strong { font-size: 1.125rem; line-height: 1.3; white-space: normal; }
/* 타이머(좁은 칸): 링 타일 대신 한 줄(30px) — 이름 · 톱니 · 남은 시간 · 버튼 */
.lobby-v2 .lobby-timers > header { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: 6px; height: 30px; margin: 0 0 8px; }
.lobby-v2 .lobby-timers > header h2 { margin: 0; font-size: 0.95rem; flex: 0 0 auto; }
.lobby-v2 .lobby-timers .timer-tools { display: flex; flex-wrap: nowrap; align-items: center; gap: 4px; min-width: 0; }
.lobby-v2 .lobby-timers .timer-all { gap: 2px; }
.lobby-v2 .lobby-timers .timer-tools .timer-button { width: 26px; height: 26px; min-height: 0; padding: 0; }
.lobby-v2 .lobby-timers .pip-button,
.lobby-v2 .lobby-timers .sound-toggle { width: 28px; height: 28px; min-height: 0; padding: 0; justify-content: center; font-size: 0; gap: 0; }
.lobby-v2 .lobby-timers .pip-button .ui-icon,
.lobby-v2 .lobby-timers .sound-toggle .ui-icon { width: 15px; height: 15px; }
.lobby-v2 .lobby-timers .timer-tools .summary { display: none; }
.lobby-v2 .lobby-timers .timer-rows { display: flex; flex-direction: column; gap: 6px; }
.lobby-v2 .lobby-timers .timer-row.timer-tile { display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; grid-template-areas: "name gear time btns"; align-items: center; gap: 4px; height: 30px; padding: 0 4px 0 10px; box-sizing: border-box; border-radius: 8px; text-align: left; overflow: hidden; }
.lobby-v2 .lobby-timers .timer-tile .timer-ring-box { grid-area: time; display: block; flex: none; height: auto; position: static; }
.lobby-v2 .lobby-timers .timer-tile .timer-ring { display: none; }
.lobby-v2 .lobby-timers .timer-row.timer-tile .timer-left { position: static; width: auto; font-size: 0.875rem; font-weight: 900; text-align: right; visibility: visible; }
.lobby-v2 .lobby-timers .timer-row.timer-tile strong { grid-area: name; justify-self: start; max-width: 100%; font-size: 0.8125rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lobby-v2 .lobby-timers .timer-tile .timer-paused { display: none; }
.lobby-v2 .lobby-timers .timer-tile .timer-gear { grid-area: gear; width: 22px; height: 22px; }
.lobby-v2 .lobby-timers .timer-tile .timer-gear .ui-icon { width: 14px; height: 14px; }
.lobby-v2 .lobby-timers .timer-tile .timer-row-buttons { grid-area: btns; flex: none; gap: 2px; justify-content: flex-end; }
.lobby-v2 .lobby-timers .timer-tile .timer-row-buttons .timer-button { width: 24px; height: 24px; min-height: 0; padding: 0; }
/* 시간 수정 중: 남은 시간·버튼 자리에 입력칸과 [저장][취소]가 같은 높이로 들어간다 */
.lobby-v2 .lobby-timers .timer-tile.editing .timer-ring-box { display: none; }
.lobby-v2 .lobby-timers .timer-tile .timer-edit-form { grid-column: 3 / 5; grid-row: 1; display: flex; flex: none; flex-wrap: nowrap; align-items: center; justify-content: flex-end; gap: 3px; }
.lobby-v2 .lobby-timers .timer-tile .timer-edit-form .timer-edit-input { position: static; width: 64px; height: 24px; padding: 0 4px; box-sizing: border-box; font-size: 0.8125rem; text-align: center; transform: none; }
.lobby-v2 .lobby-timers .timer-tile .timer-edit-form .seat-action { height: 24px; padding: 0 6px; font-size: 0.75rem; white-space: nowrap; }
/* 파티 조작 카드 (아래 도크 대신 오른쪽 칸 맨 아래) */
.lobby-v2 .lobby-actions-card { display: flex; flex-direction: column; gap: 8px; padding: 10px; }
.lobby-v2 .lobby-actions-card .lobby-action-buttons { display: flex; height: 52px; margin: 0; }
.lobby-v2 .lobby-actions-card .lobby-action-buttons > * { flex: 1 1 auto; width: 100%; min-height: 0; height: 52px; margin: 0; }
.lobby-v2 .lobby-actions-card .lobby-action-buttons .summary { display: flex; align-items: center; justify-content: center; padding: 0 8px; font-size: 0.875rem; text-align: center; }
.lobby-v2 .lobby-actions-card .lobby-dock-end { display: flex; height: 36px; }
.lobby-v2 .lobby-actions-card .lobby-dock-end .auth-button { flex: 1 1 auto; width: 100%; min-height: 0; height: 36px; padding: 0 12px; justify-content: center; }
.lobby-v2 .lobby-mobs h2 small, .lobby-v2 .lobby-loot h2 small { display: none; }
@media (min-width: 961px) {
  /* 파티원: 6자리(60px · 간격 6px) 높이 고정. 자리가 적으면 아래를 비워 둔다 */
  .lobby-v2 .lobby-party { height: calc(14px * 2 + 26px + 10px + 60px * 6 + 6px * 5 + 2px); overflow: hidden; }
  .lobby-v2 .lobby-party .lobby-seats { height: calc(60px * 6 + 6px * 5); align-content: start; overflow: hidden; }
  /* 오른쪽: 왼쪽과 같은 높이. 타이머 3줄 · 버튼 카드는 고정, 남는 높이는 사냥터 카드 */
  .lobby-v2 .lobby-side { height: calc(14px * 2 + 26px + 10px + 60px * 6 + 6px * 5 + 2px); }
  .lobby-v2 .lobby-side .lobby-map,
  .lobby-v2 .lobby-side .lobby-map.no-map { flex: 1 1 0; height: auto; min-height: 0; overflow: hidden; }
  .lobby-v2 .lobby-timers { flex: 0 0 auto; height: calc(14px * 2 + 30px + 8px + 36px * 3 + 6px * 2 + 2px); overflow: hidden; } /* 타이머 줄 36px × 3 */
  .lobby-v2 .lobby-timers .timer-rows { height: calc(36px * 3 + 6px * 2); overflow-y: auto; }
  .lobby-v2 .lobby-actions-card { flex: 0 0 auto; height: calc(10px * 2 + 52px + 8px + 36px + 2px); overflow: hidden; }
  /* 소환 몬스터 · 드롭 아이템: 같은 높이(230px, 드롭 4줄) 고정, 넘치면 안에서 스크롤 */
  .lobby-v2 .lobby-info-row > .lobby-panel { contain: none; display: flex; flex-direction: column; height: calc(14px * 2 + 26px + 10px + 38px * 4 + 4px * 3 + 2px); overflow: hidden; } /* 드롭 아이템 4줄 높이 (230px) */
  .lobby-v2 .lobby-info-row .mob-grid,
  .lobby-v2 .lobby-info-row .lobby-loot .icon-grid { flex: 1 1 auto; min-height: 0; }
  .lobby-v2 .lobby-info-row .mob-grid { overflow-y: auto; }
  .lobby-v2 .lobby-info-row .lobby-loot > .status,
  .lobby-v2 .lobby-info-row .lobby-mobs .mob-grid > .status { min-height: 0; height: 100%; }
}
@media (max-width: 960px) {
  .lobby-v2 .lobby-cols, .lobby-v2 .lobby-cols.lobby-layout { grid-template-columns: minmax(0, 1fr); }
  .lobby-v2 .lobby-bar { flex-wrap: wrap; gap: 10px 16px; height: auto; padding: 10px 14px; }
  .lobby-v2 .lobby-bar-summary { flex: 1 1 100%; height: auto; }
  .lobby-v2 .lobby-bar-map { flex-wrap: wrap; row-gap: 8px; white-space: normal; }
  .lobby-v2 .lobby-bar-map .lobby-head-map { flex: 1 1 calc(100% - 60px); }
  .lobby-v2 .lobby-bar-map .lobby-head-tools { margin-left: 0; }
  .lobby-v2 .lobby-bar .lobby-channel-row { flex: 1 1 100%; width: auto; justify-content: flex-start; }
  .lobby-v2 .lobby-bar .lobby-sim { margin-left: auto; }
  .lobby-v2 .lobby-share { flex-wrap: wrap; }
  .lobby-v2 .lobby-side .lobby-map { min-height: 140px; }
}
/* 로비 시안 F: 좁은 타이머 줄에서 이름(홀리심볼 등)이 잘리지 않게 시간 글자·버튼을 조금 줄인다 */
.lobby-v2 .lobby-timers .timer-row.timer-tile { gap: 3px; padding: 0 3px 0 8px; }
.lobby-v2 .lobby-timers .timer-row.timer-tile .timer-left { font-size: 0.78rem; letter-spacing: -0.03em; }
.lobby-v2 .lobby-timers .timer-tile .timer-gear { width: 20px; height: 20px; }
.lobby-v2 .lobby-timers .timer-tile .timer-row-buttons { gap: 1px; }
.lobby-v2 .lobby-timers .timer-tile .timer-row-buttons .timer-button { width: 22px; height: 22px; }
.lobby-v2 .lobby-timers .timer-tile .timer-row-buttons .timer-button .ui-icon { width: 12px; height: 12px; }
/* 로비 시안 F (2026-10-11 후반): [PIP]는 아이콘 + 글자, 타이머 줄 버튼은 [재생↔일시정지][리셋] 두 개 */
.lobby-v2 .lobby-timers .pip-button { width: auto; padding: 0 8px; gap: 4px; font-size: 0.75rem; font-weight: 800; }
.lobby-v2 .lobby-timers .timer-tile .timer-row-buttons .timer-button.pause { color: #ca8a04; }
/* 스킬 시뮬레이터: .skill-meta가 칸보다 넓어지지 않게 */
.skill-row .skill-meta { min-width: 0; }
/* 스킬 시뮬레이터: 아주 긴 스킬 이름(메이플 용사 / 레지스탕스 용사)은 두 줄로 감아 4차 칸이 화면 밖으로 밀리지 않게 */
.skill-sim-windows .skill-name { max-width: 12em; }
/* 로비 오른쪽 사냥터 카드: 이름 아래 "N인" 뱃지 (위 바의 인원 뱃지와 같은 모양) */
.lobby-v2 .lobby-side .lobby-map .lobby-map-name .lobby-map-cap { font-size: 0.75rem; color: #111827; text-shadow: none; }
/* 로비 타이머: 남은 시간을 따로 떼어 낸 어두운 칸에 크게 (2026-10-11). 줄 36px, 늘어난 높이는 위 사냥터 카드가 줄어 맞춘다 */
.lobby-v2 .lobby-timers .timer-row.timer-tile { height: 36px; gap: 6px; padding: 0 4px 0 10px; }
.lobby-v2 .lobby-timers .timer-tile .timer-ring-box { display: flex; align-items: center; justify-content: center; height: 28px; min-width: 4.4rem; padding: 0 8px; box-sizing: border-box; border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 6px; background: #0b0f14; }
.lobby-v2 .lobby-timers .timer-row.timer-tile .timer-left { font-family: ui-monospace, "JetBrains Mono", SFMono-Regular, Menlo, Consolas, monospace; font-size: 1.125rem; font-weight: 800; letter-spacing: 0; line-height: 1; color: #a1a1aa; }
.lobby-v2 .lobby-timers .timer-tile.running .timer-ring-box { border-color: rgba(59, 130, 246, 0.45); }
.lobby-v2 .lobby-timers .timer-tile.running .timer-left { color: #e0f2fe; }
.lobby-v2 .lobby-timers .timer-tile.paused .timer-ring-box { border-color: rgba(202, 138, 4, 0.5); }
.lobby-v2 .lobby-timers .timer-tile.paused .timer-left { color: #a1a1aa; }
.lobby-v2 .lobby-timers .timer-tile.soon .timer-ring-box { border-color: #f59e0b; background: rgba(245, 158, 11, 0.12); }
.lobby-v2 .lobby-timers .timer-tile.soon .timer-left { color: #fde68a; }
.lobby-v2 .lobby-timers .timer-tile .timer-edit-form .timer-edit-input { height: 28px; width: 4.4rem; font-size: 0.9rem; }
.lobby-v2 .lobby-timers .timer-tile .timer-edit-form .seat-action { height: 26px; }
/* 로비 머리: 코드·복사 버튼 아래 안내 한 줄 (오른쪽 정렬) */
.lobby-v2 .lobby-share-box { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; }
.lobby-v2 .lobby-share-note { margin: 0; color: var(--muted); font-size: 0.75rem; font-weight: 600; text-align: right; }
@media (max-width: 960px) {
  .lobby-v2 .lobby-share-box { align-items: flex-start; }
  .lobby-v2 .lobby-share-note { text-align: left; }
}
/* 패치노트 유형 뱃지 (사냥터 추가 · 신규 기능 · 기능개선 · 버그 수정). 유형 없는 예전 줄은 빈 칸으로 자리만 맞춘다 */
.patch-type { display: inline-flex; align-items: center; justify-content: center; min-width: 4.6rem; height: 20px; padding: 0 8px; box-sizing: border-box; border-radius: 999px; font-size: 0.6875rem; font-style: normal; font-weight: 800; white-space: nowrap; }
.patch-type.none { visibility: hidden; }
.patch-type.map { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.patch-type.new { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.patch-type.improve { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; }
.patch-type.fix { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.patch-type.etc { background: var(--surface); color: var(--muted); }
.patch-list li { grid-template-columns: 42px auto 1fr auto; align-items: center; }
.patch-list li .patch-type { margin-top: 1px; }
.patch-note-admin-list li { grid-template-columns: 90px auto 1fr auto auto; }
.patch-note-form .patch-type-select { flex: 0 0 8rem; }
/* 공지사항 줄 오른쪽: [New] + 따봉 버튼 */
.patch-list .patch-tail { display: inline-flex; align-items: center; gap: 6px; }
.patch-like { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: inherit; font-size: 0.75rem; font-weight: 800; cursor: pointer; }
.patch-like svg { width: 14px; height: 14px; }
.patch-like:hover { border-color: var(--accent); color: var(--ink); }
.patch-like.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 18%, transparent); color: #93c5fd; }
.patch-like:disabled { opacity: 0.6; cursor: default; }
.patch-admin-likes { color: var(--muted); font-size: 0.75rem; font-weight: 700; white-space: nowrap; }
/* 사냥터를 고르기 전에는 이름 칸(hidden)을 정말 숨긴다 (display:flex 가 hidden 속성을 덮어쓰지 않게) */
.lobby-map-name[hidden] { display: none !important; }
/* 로비 드롭 아이템: "(아이콘) 이름" 3열 × 4줄(38px 줄) 보이고, 넘치면 칸 안에서 위아래 스크롤 (2026-10-11) */
.lobby-v2 .lobby-loot .icon-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 38px; gap: 4px; align-content: start; }
.lobby-v2 .lobby-loot .icon-cell.named { display: flex; align-items: center; justify-content: flex-start; gap: 6px; width: auto; min-width: 0; height: 38px; padding: 0 8px 0 4px; box-sizing: border-box; }
.lobby-v2 .lobby-loot .icon-cell.named .icon { flex: 0 0 30px; }
.lobby-v2 .lobby-loot .icon-cell-name { min-width: 0; overflow: hidden; color: var(--ink); font-size: 0.75rem; font-weight: 600; white-space: nowrap; text-overflow: ellipsis; }

/* ---- [주문서 시뮬레이터] /scrolls (web/pages/scroll-sim.js, 시안 A). 머리 → 위 한 줄 바 → 같은 폭 3열 (설명창 | 주문서 | 기록) ---- */
.scroll-sim { display: flex; flex-direction: column; gap: 14px; }
.scroll-sim-bar, .scroll-sim-card { box-sizing: border-box; min-width: 0; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.12); background: rgba(22, 27, 34, 0.72); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
.scroll-sim-bar { display: flex; flex-wrap: wrap; align-items: end; gap: 12px 16px; padding: 14px 18px; }
.scroll-sim-label { margin: 0; color: var(--muted); font-size: 0.6875rem; font-weight: 800; }
.scroll-sim-pick { position: relative; display: flex; flex-direction: column; gap: 6px; flex: 1 1 280px; min-width: 0; }
.scroll-sim-search { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 10px; border-radius: 8px; border: 1px solid var(--accent); background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.scroll-sim-current-icon { width: 26px; height: 26px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; border: 0; background: transparent; }
.scroll-sim-input { flex: 1 1 auto; min-width: 0; height: 34px; border: 0; background: transparent; color: var(--ink); font: inherit; font-size: 0.875rem; font-weight: 800; outline: none; }
.scroll-sim-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 20; display: grid; gap: 2px; margin-top: 4px; padding: 4px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.scroll-sim-results[hidden] { display: none; }
.scroll-sim-result { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 38px; padding: 0 8px; border: 0; border-radius: 8px; background: transparent; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.scroll-sim-result:hover, .scroll-sim-result:focus-visible { background: var(--surface); outline: none; }
.scroll-sim-result b { overflow: hidden; font-size: 0.8125rem; white-space: nowrap; text-overflow: ellipsis; }
.scroll-sim-result span { color: var(--muted); font-size: 0.6875rem; white-space: nowrap; }
.scroll-sim-result-icon { width: 26px; height: 26px; object-fit: contain; image-rendering: pixelated; border: 0; background: transparent; }
.scroll-sim-counters { display: flex; gap: 8px; }
.scroll-sim-counter { display: flex; flex-direction: column; gap: 2px; min-width: 104px; padding: 6px 12px; border-radius: 8px; background: var(--surface); }
.scroll-sim-counter strong { font-size: 1.125rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.scroll-sim-actions { display: flex; gap: 6px; }
.scroll-sim-actions .auth-button { min-height: 0; height: 38px; padding: 0 14px; }
.scroll-sim-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.scroll-sim-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; }
.scroll-sim-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; height: 26px; }
.scroll-sim-head h2 { margin: 0; font-size: 0.95rem; font-weight: 800; }
.scroll-sim-pill { padding: 2px 10px; border-radius: 999px; background: var(--surface); color: var(--muted); font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
/* 게임 설명창 */
.scroll-tip { box-sizing: border-box; width: 100%; max-width: 300px; margin: 0 auto; padding: 12px 14px; border-radius: 8px; border: 1px solid #5b6b8c; background: rgba(18, 26, 44, 0.94); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.6); color: #e5e7eb; font-size: 12px; line-height: 1.55; }
.scroll-tip hr { margin: 8px 0; border: 0; border-top: 1px dashed rgba(255, 255, 255, 0.22); }
.scroll-tip-name { color: #fff; font-size: 14px; font-weight: 800; text-align: center; }
.scroll-tip-name.upgraded { color: #fbbf24; }
.scroll-tip-name.destroyed { color: #f87171; }
.scroll-tip-top { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 10px; margin-top: 8px; }
.scroll-tip-icon { display: grid; place-items: center; width: 72px; height: 72px; border-radius: 6px; background: rgba(255, 255, 255, 0.08); color: #f87171; font-size: 11px; font-weight: 800; }
.scroll-tip-img { width: 56px; height: 56px; object-fit: contain; image-rendering: pixelated; border: 0; background: transparent; }
.scroll-tip-req { color: #cbd5e1; font-size: 11px; }
.scroll-tip-req .zero { color: #94a3b8; }
.scroll-tip-jobs { display: flex; flex-wrap: wrap; gap: 2px 8px; margin-top: 6px; font-size: 11px; }
.scroll-tip-jobs .no { color: #ef4444; }
.scroll-tip-slots { margin-top: 6px; color: #fcd34d; }
/* 주문서 목록 */
.scroll-sim-scrolls { display: flex; flex-direction: column; gap: 6px; max-height: 560px; overflow-y: auto; scrollbar-width: thin; }
.scroll-sim-scroll { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 46px; padding: 4px 10px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, 0.1); background: var(--surface); color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.scroll-sim-scroll:hover:not(:disabled) { border-color: var(--accent); }
.scroll-sim-scroll.cursed { border-color: rgba(248, 113, 113, 0.35); }
.scroll-sim-scroll:disabled { opacity: 0.45; cursor: not-allowed; }
.scroll-sim-scroll-icon { width: 30px; height: 30px; object-fit: contain; image-rendering: pixelated; border: 0; background: transparent; }
.scroll-sim-scroll-text { display: flex; flex-direction: column; min-width: 0; }
.scroll-sim-scroll-text b { overflow: hidden; font-size: 0.8125rem; white-space: nowrap; text-overflow: ellipsis; }
.scroll-sim-scroll-text span { color: var(--muted); font-size: 0.6875rem; }
.scroll-sim-pct { min-width: 44px; padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; font-weight: 900; text-align: center; }
.scroll-sim-pct.high { background: rgba(74, 222, 128, 0.14); color: #86efac; }
.scroll-sim-pct.mid { background: rgba(251, 191, 36, 0.14); color: #fcd34d; }
.scroll-sim-pct.low { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
/* 사용 기록 */
[data-history] { display: flex; flex-direction: column; gap: 6px; }
.scroll-sim-tally { display: flex; flex-direction: column; gap: 4px; }
.scroll-sim-tally-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 8px; height: 30px; padding: 0 10px; border-radius: 8px; background: var(--surface); font-size: 0.8125rem; }
.scroll-sim-tally-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.scroll-sim-tally-icon { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; border: 0; background: transparent; font-size: 0; }
.scroll-sim-empty { margin: 0; color: var(--muted); font-size: 0.8125rem; }
.scroll-sim-log { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; }
.scroll-sim-log li { display: flex; flex-direction: column; gap: 1px; padding: 6px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); color: var(--muted); font-size: 0.75rem; }
.scroll-sim-log li b { font-weight: 700; }
.scroll-sim-log li span { font-size: 0.6875rem; opacity: 0.85; }
.scroll-sim-log li.ok { background: rgba(74, 222, 128, 0.12); color: #86efac; }
.scroll-sim-log li.broke { background: rgba(248, 113, 113, 0.14); color: #fca5a5; }
@media (max-width: 960px) {
  .scroll-sim-cols { grid-template-columns: minmax(0, 1fr); }
  .scroll-sim-scrolls { max-height: none; }
}
/* 설명창 공용 (item-tooltip.js): 태그 줄과 설명 글 */
.scroll-tip-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; margin-top: 2px; color: #fb923c; font-size: 11px; font-weight: 700; }
.scroll-tip-desc { margin: 6px 0 0; color: #cbd5e1; font-size: 11px; white-space: pre-line; }
.scroll-tip-req { white-space: pre-line; }
/* ---- 메랜백과 아이템 상세 (pages/items.js): 왼쪽 능력치(설명창) | 오른쪽 드롭 몬스터 한 줄씩 ---- */
.item-detail { display: flex; flex-direction: column; gap: 14px; }
.item-detail-cols { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 14px; align-items: start; }
.item-detail .scroll-tip { max-width: none; }
.item-drop-mobs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.item-drop-mobs a { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; min-height: 52px; padding: 4px 12px 4px 6px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.08); background: var(--surface); color: var(--ink); text-decoration: none; }
.item-drop-mobs a:hover, .item-drop-mobs a:focus-visible { border-color: var(--accent); outline: none; }
.item-drop-mobs .sprite { width: 44px; height: 44px; object-fit: contain; border: 0; background: transparent; }
.item-drop-mobs .sprite.missing { font-size: 0.6rem; }
.item-drop-mob-name { overflow: hidden; font-size: 0.875rem; white-space: nowrap; text-overflow: ellipsis; }
.item-drop-mob-name b { color: var(--muted); font-weight: 800; }
.item-drop-mob-hp { color: var(--muted); font-size: 0.75rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.item-drop-mob-rate { min-width: 56px; padding: 2px 8px; border-radius: 999px; background: rgba(74, 222, 128, 0.12); color: #86efac; font-size: 0.75rem; font-weight: 800; text-align: center; white-space: nowrap; }
.item-drop-mob-rate:empty { visibility: hidden; }
@media (max-width: 768px) {
  .item-detail-cols { grid-template-columns: minmax(0, 1fr); }
  .item-drop-mobs a { grid-template-columns: 40px minmax(0, 1fr) auto; }
  .item-drop-mob-hp { display: none; }
}
/* 주문서 시뮬레이터·아이템 상세: 다른 탭과 같은 내용 폭 (--content-width) */
.scroll-sim, .item-detail { width: 100%; max-width: var(--content-width); margin-left: auto; margin-right: auto; box-sizing: border-box; }
/* [새 아이템]은 아이템 옵션(설명창) 바로 아래 */
.scroll-sim-new { width: 100%; max-width: 300px; min-height: 0; height: 40px; margin: 0 auto; }
/* 메랜백과 검색칸·결과: 다른 탭(N방컷 등)과 같은 내용 폭 (2026-10-11, 760px에서 늘림) */
.search-box { width: min(var(--content-width), 100%); }
/* 어드민 [사이트 설정] 스위치: 설정마다 한 줄 = [스위치 | 이름 | 설명 | ON/OFF] (2026-10-11, 세로로 쌓이며 깨지던 것 수정) */
.admin-site .admin-switches { max-width: none; gap: 6px; }
.admin-site .admin-switch { display: grid !important; grid-template-columns: 40px minmax(150px, 230px) minmax(0, 1fr) 36px; align-items: center; gap: 14px; flex-direction: row; min-height: 52px; padding: 8px 14px; text-align: left; }
.admin-site .admin-switch-text { display: contents; }
.admin-site .admin-switch-text strong { font-size: 0.875rem; line-height: 1.3; }
.admin-site .admin-switch-text small { font-size: 0.78rem; line-height: 1.4; }
.admin-site .admin-switch-state { text-align: right; font-size: 0.8125rem; }
@media (max-width: 768px) {
  .admin-site .admin-switch { grid-template-columns: 40px minmax(0, 1fr) 36px; }
  .admin-site .admin-switch-text { display: grid; gap: 2px; }
}
/* 로비 드롭 아이템 → 능력치 창 (pages/party.js openItemModal). 설명창만 보이고 오른쪽 위에 × */
.lobby-v2 .lobby-loot .icon-cell[data-item] { cursor: pointer; }
.item-tip-modal { position: relative; width: min(320px, calc(100vw - 32px)); padding: 0; border: 0; background: transparent; box-shadow: none; overflow: visible; }
.item-tip-modal .scroll-tip { max-width: none; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.item-tip-close { position: absolute; top: -12px; right: -12px; z-index: 1; display: grid; place-items: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--card); color: var(--ink); font-size: 1rem; line-height: 1; cursor: pointer; }
.patch-type.notice { background: rgba(244, 63, 94, 0.18); color: #fda4af; } /* 공지사항 유형 */
/* 로비 아이템 능력치 창: 설명창 글자를 모두 1px 크게 (2026-10-11 요청) */
.item-tip-modal .scroll-tip { font-size: 13px; }
.item-tip-modal .scroll-tip-name { font-size: 15px; }
.item-tip-modal .scroll-tip-req,
.item-tip-modal .scroll-tip-jobs,
.item-tip-modal .scroll-tip-desc,
.item-tip-modal .scroll-tip-tags { font-size: 12px; }
/* 주문서 시뮬레이터: 글자를 모두 1px 크게 (2026-10-11 요청) */
.scroll-sim .scroll-sim-label { font-size: 12px; }
.scroll-sim .scroll-sim-input { font-size: 15px; }
.scroll-sim .scroll-sim-counter strong { font-size: 19px; }
.scroll-sim .scroll-sim-actions .auth-button, .scroll-sim .scroll-sim-new { font-size: calc(0.875rem + 1px); }
.scroll-sim .scroll-sim-head h2 { font-size: calc(0.95rem + 1px); }
.scroll-sim .scroll-sim-pill { font-size: 13px; }
.scroll-sim .scroll-sim-result b { font-size: 14px; }
.scroll-sim .scroll-sim-result span { font-size: 12px; }
.scroll-sim .scroll-sim-scroll-text b { font-size: 14px; }
.scroll-sim .scroll-sim-scroll-text span { font-size: 12px; }
.scroll-sim .scroll-sim-pct { font-size: 13px; }
.scroll-sim .scroll-sim-tally-row, .scroll-sim .scroll-sim-empty { font-size: 14px; }
.scroll-sim .scroll-sim-log li { font-size: 13px; }
.scroll-sim .scroll-sim-log li span { font-size: 12px; }
.scroll-sim .scroll-tip { font-size: 13px; }
.scroll-sim .scroll-tip-name { font-size: 15px; }
.scroll-sim .scroll-tip-req, .scroll-sim .scroll-tip-jobs, .scroll-sim .scroll-tip-desc, .scroll-sim .scroll-tip-tags { font-size: 12px; }
/* 주문서 시뮬레이터: 글자 1px 더 (2026-10-11 두 번째 요청, 처음보다 2px) */
.scroll-sim .scroll-sim-label { font-size: 13px; }
.scroll-sim .scroll-sim-input { font-size: 16px; }
.scroll-sim .scroll-sim-counter strong { font-size: 20px; }
.scroll-sim .scroll-sim-actions .auth-button, .scroll-sim .scroll-sim-new { font-size: calc(0.875rem + 2px); }
.scroll-sim .scroll-sim-head h2 { font-size: calc(0.95rem + 2px); }
.scroll-sim .scroll-sim-pill { font-size: 14px; }
.scroll-sim .scroll-sim-result b { font-size: 15px; }
.scroll-sim .scroll-sim-result span { font-size: 13px; }
.scroll-sim .scroll-sim-scroll-text b { font-size: 15px; }
.scroll-sim .scroll-sim-scroll-text span { font-size: 13px; }
.scroll-sim .scroll-sim-pct { font-size: 14px; }
.scroll-sim .scroll-sim-tally-row, .scroll-sim .scroll-sim-empty { font-size: 15px; }
.scroll-sim .scroll-sim-log li { font-size: 14px; }
.scroll-sim .scroll-sim-log li span { font-size: 13px; }
.scroll-sim .scroll-tip { font-size: 14px; }
.scroll-sim .scroll-tip-name { font-size: 16px; }
.scroll-sim .scroll-tip-req, .scroll-sim .scroll-tip-jobs, .scroll-sim .scroll-tip-desc, .scroll-sim .scroll-tip-tags { font-size: 13px; }
/* 설명창 직업 줄: 양옆으로 균등하게 (모든 설명창 공통) */
.scroll-tip-jobs { justify-content: space-between; gap: 2px 4px; }
/* 주문서 성공·실패 효과: 아이템 옵션(설명창) 위에 잠깐 떴다 사라진다 */
.scroll-sim-tipwrap { position: relative; max-width: 300px; margin: 0 auto; border-radius: 8px; }
.scroll-sim-tipwrap .scroll-tip { max-width: none; }
.scroll-fx { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-radius: 8px; pointer-events: none; text-align: center; opacity: 0; animation: scroll-fx-show 1.4s ease-out forwards; }
.scroll-fx b { font-size: 28px; font-weight: 900; letter-spacing: 0.02em; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.8); }
.scroll-fx span { padding: 2px 10px; border-radius: 999px; background: rgba(0, 0, 0, 0.55); font-size: 13px; font-weight: 700; }
.fx-ok .scroll-fx { background: radial-gradient(circle, rgba(74, 222, 128, 0.35), rgba(74, 222, 128, 0.08) 70%); color: #bbf7d0; }
.fx-ok .scroll-fx b { color: #86efac; }
.fx-ok .scroll-tip { animation: scroll-fx-glow 1.2s ease-out; }
.fx-fail .scroll-fx { background: rgba(127, 29, 29, 0.35); color: #fecaca; }
.fx-fail .scroll-fx b { color: #fca5a5; }
.fx-fail .scroll-tip { animation: scroll-fx-shake 0.45s ease-in-out; }
.fx-broke .scroll-fx { background: rgba(127, 29, 29, 0.6); color: #fecaca; animation-duration: 2.2s; }
.fx-broke .scroll-fx b { color: #f87171; }
.fx-broke .scroll-tip { animation: scroll-fx-shake 0.6s ease-in-out; }
@keyframes scroll-fx-show { 0% { opacity: 0; transform: scale(0.92); } 15% { opacity: 1; transform: scale(1.04); } 30% { transform: scale(1); } 70% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scroll-fx-glow { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); } 40% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.35), 0 0 28px rgba(74, 222, 128, 0.45); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@keyframes scroll-fx-shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-6px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
@media (prefers-reduced-motion: reduce) {
  .scroll-fx, .fx-ok .scroll-tip, .fx-fail .scroll-tip, .fx-broke .scroll-tip { animation: none; }
  .scroll-fx { opacity: 1; }
}
/* 주문서 효과 글은 한 줄 (넘치면 말줄임, 전체는 마우스를 올려 title로) */
.scroll-sim .scroll-sim-scroll-text span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* ---- 게임 설명창 모양 (item-tooltip.js, 2026-10-11: 메이플랜드 설명창 이미지 기준) ---- */
.scroll-tip { border: 2px solid #c7cadf; border-radius: 6px; background: rgba(78, 82, 112, 0.97); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35), 0 8px 24px rgba(0, 0, 0, 0.35); color: #fff; }
.scroll-tip-name { color: #fff; font-weight: 800; }
.scroll-tip-name.upgraded { color: #ffd166; }
.scroll-tip-tags { color: #ffa040; font-weight: 700; }
.scroll-tip-icon { background: #fff; border-radius: 2px; }
.scroll-tip-icon .missing { color: #6b7280; }
.scroll-tip-req, .scroll-tip-req .zero { color: #fff; }
.scroll-tip-req .dim { color: #a3a6c2; }
.scroll-tip-jobs { color: #fff; }
.scroll-tip-jobs .no { color: #ff6b6b; }
.scroll-tip hr { border-top: 1px solid rgba(255, 255, 255, 0.85); }
.scroll-tip-stats { display: grid; gap: 1px; color: #fff; text-align: center; }
.scroll-tip-slots { margin-top: 0; color: #fff; }
.scroll-tip-desc { color: #e5e7f5; }
/* 설명창 REQ 칸은 줄바꿈 글자를 무시하고, 소비·기타 설명 글(.text)만 줄바꿈을 살린다 */
.scroll-tip-req { white-space: normal; line-height: 1.5; }
.scroll-tip-req.text { white-space: pre-line; }
/* 주문서 시뮬레이터: 방금 바뀐 능력치 "(+1)" 초록 / "(-2)" 빨강, 사용 기록 "성공 N, 실패 N" */
.scroll-tip-delta { font-style: normal; font-weight: 800; }
.scroll-tip-delta.up { color: #4ade80; }
.scroll-tip-delta.down { color: #ff6b6b; }
.scroll-sim .scroll-sim-tally-row b { font-weight: 800; white-space: nowrap; }
.scroll-sim .scroll-sim-tally-row em { font-style: normal; }
.scroll-sim .scroll-sim-tally-row em.ok { color: #86efac; }
.scroll-sim .scroll-sim-tally-row em.fail { color: #fca5a5; }
.scroll-sim .scroll-sim-tally-row em.items { color: #93c5fd; } /* [새 아이템]으로 넘긴 아이템 개수 */
/* 어드민 상단 탭 순서 칩의 ON/OFF (그 탭의 사이트 설정을 바로 켜고 끈다) */
.admin-tab-order .region-chip { gap: 6px; }
.tab-toggle { min-width: 36px; height: 20px; margin-left: 2px; padding: 0 6px; border: 1px solid transparent; border-radius: 999px; font: inherit; font-size: 0.6875rem; font-weight: 900; cursor: pointer; }
.tab-toggle.on { background: rgba(74, 222, 128, 0.18); border-color: rgba(74, 222, 128, 0.5); color: #86efac; }
.tab-toggle.off { background: var(--surface); border-color: var(--line); color: var(--muted); }
.tab-toggle:disabled { opacity: 0.5; cursor: default; }
.admin-tab-order .region-chip.empty .tab-toggle { opacity: 1; }
/* 사용안내 첫 화면 버튼: [파티매칭 시작하기][캐릭터 등록하기] 두 칸 + 그 아래 두 칸을 합친 [검은색 허리띠 혼줌작하기] (주문서 시뮬레이터가 켜져 있을 때) */
.ov-cta.ov-cta-grid { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; }
.ov-cta .ov-cta-scroll { grid-column: 1 / -1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; border: 1px solid #a78bfa; background: linear-gradient(135deg, #5b21b6, #7e22ce); color: #fff; box-shadow: 0 6px 20px rgba(126, 34, 206, 0.35); }
.ov-cta .ov-cta-scroll:hover { border-color: #c4b5fd; background: linear-gradient(135deg, #6d28d9, #9333ea); }
.ov-cta .ov-cta-scroll img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
@media (max-width: 768px) {
  .ov-cta.ov-cta-grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
}
/* 사용안내 [검은색 허리띠 혼줌작하기]: 기본 버튼 색(파랑→보라)보다 우선해서 혼돈의 주문서 같은 진보라 */
.overview-page .ov-cta a.auth-button.ov-cta-scroll { border: 1px solid #a78bfa; background: #4c1d95; background-image: linear-gradient(135deg, #3b0764, #6b21a8 55%, #86198f); color: #f5f3ff; box-shadow: 0 6px 22px rgba(134, 25, 143, 0.4); }
.overview-page .ov-cta a.auth-button.ov-cta-scroll:hover { border-color: #e9d5ff; background-image: linear-gradient(135deg, #4c1d95, #7e22ce 55%, #a21caf); }
/* 상단 탭 [주문서 시뮬레이터]: 혼돈의 주문서 그림 + 글자 */
.tabs a.tab-with-icon { display: inline-flex; align-items: center; gap: 6px; }
.tabs a.tab-with-icon[hidden] { display: none; }
.tabs a.tab-with-icon img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; flex: 0 0 auto; }
/* 몬스터 그림(주황버섯·훈련용 짚인형)은 60~80px 원본을 줄이므로 부드럽게 줄인다 */
.tabs a.tab-with-icon img.tab-mob { image-rendering: auto; }
/* 다크 모드 주 버튼 규칙(html.dark .auth-button:not(...))보다 우선해서 [검은색 허리띠 혼줌작하기]를 진보라로 */
html.dark .overview-page .ov-cta a.auth-button.ov-cta-scroll:not(.secondary):not(.danger),
html .overview-page .ov-cta a.auth-button.ov-cta-scroll:not(.secondary):not(.danger) { border: 1px solid #a78bfa; background: linear-gradient(135deg, #3b0764, #6b21a8 55%, #86198f); color: #f5f3ff; box-shadow: 0 6px 22px rgba(134, 25, 143, 0.4); }
html.dark .overview-page .ov-cta a.auth-button.ov-cta-scroll:not(.secondary):not(.danger):hover,
html .overview-page .ov-cta a.auth-button.ov-cta-scroll:not(.secondary):not(.danger):hover { border-color: #e9d5ff; background: linear-gradient(135deg, #4c1d95, #7e22ce 55%, #a21caf); }
/* [공지사항] 창: 줄마다 위아래 여백 2px */
.patch-modal .patch-list li { padding-top: 2px; padding-bottom: 2px; }
/* 공지사항 유형 뱃지 색 (어드민에서 유형마다 고른다: site_settings.PATCH_TYPE_COLORS) */
.patch-type.c-rose { background: rgba(244, 63, 94, 0.18); color: #fda4af; }
.patch-type.c-green { background: rgba(34, 197, 94, 0.16); color: #4ade80; }
.patch-type.c-blue { background: rgba(59, 130, 246, 0.18); color: #93c5fd; }
.patch-type.c-purple { background: rgba(168, 85, 247, 0.18); color: #d8b4fe; }
.patch-type.c-amber { background: rgba(245, 158, 11, 0.18); color: #fbbf24; }
.patch-type.c-teal { background: rgba(20, 184, 166, 0.18); color: #5eead4; }
.patch-type.c-gray { background: var(--surface); color: var(--muted); }
/* 어드민 [공지사항]: 줄마다 유형 고르기, 아래에 유형 관리 */
.patch-note-admin-list li { grid-template-columns: 90px 8.5rem 1fr auto auto; }
.patch-note-type { height: 30px; padding: 0 8px; font-size: 0.8125rem; font-weight: 700; }
.patch-type-editor { display: grid; gap: 8px; margin-top: 22px; }
.patch-type-editor h3 { margin: 0; font-size: 0.95rem; }
.patch-type-editor h3 em { margin-left: 6px; color: var(--muted); font-size: 0.75rem; font-style: normal; font-weight: 600; }
#patch-type-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.patch-type-row { display: grid; grid-template-columns: 6rem minmax(0, 14rem) auto 1fr auto; align-items: center; gap: 10px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 10px; }
.patch-type-row .text-input { height: 32px; padding: 0 8px; font-size: 0.8125rem; }
.patch-type-row .patch-type { justify-self: start; }
.patch-type-row [data-type-remove] { grid-column: 5; }
.patch-type-actions { display: flex; gap: 8px; }
/* [검은색 허리띠 혼줌작하기] 높이를 [파티매칭 시작하기]와 같게: 아이콘(28px)이 버튼 높이를 늘리지 않도록 위아래로 겹친다 */
.overview-page .ov-cta a.auth-button.ov-cta-scroll img { margin-top: -8px; margin-bottom: -8px; }
/* 어드민 [공지사항]: 줄마다 [수정][삭제], 수정 중에는 내용 칸에 입력칸 */
.patch-note-buttons { display: inline-flex; gap: 4px; }
.patch-note-admin-list li { grid-template-columns: 90px 8.5rem minmax(0, 1fr) auto auto; }
.patch-note-edit { display: flex; align-items: center; gap: 4px; min-width: 0; }
.patch-note-edit .text-input { flex: 1 1 auto; min-width: 0; height: 30px; padding: 0 8px; font-size: 0.875rem; }
.patch-note-edit .seat-action, .patch-note-buttons .seat-action { flex: 0 0 auto; white-space: nowrap; }
/* 캐릭터 관리 (휴대폰, 560px 이하): 캐릭터 카드 높이 140px 가로형 — 일러스트는 오른쪽 배경, 왼쪽에 Lv·이름/직업/스탯공, 아래에 버튼 한 줄 */
@media (max-width: 560px) {
  .char-slots .char-slot.filled.char-card { position: relative; display: block; height: 140px; min-height: 140px; }
  .char-slots .char-slot.filled.char-card.has-art {
    background-color: #000;
    background-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, 0.92) 40%, rgba(0, 0, 0, 0.45) 70%, rgba(0, 0, 0, 0.2) 100%), var(--job-art);
    background-size: 100% 100%, 62% auto;
    background-position: center, right -10px top 12%;
  }
  .char-slots .char-card .char-card-info { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px 10px; background: transparent; text-align: left; }
  .char-slots .char-card.has-art .char-card-info::before { content: none; }
  .char-slots .char-card .char-portrait-namerow { justify-content: flex-start; }
  .char-slots .char-card .char-portrait-name { font-size: 1.05rem; }
  .char-slots .char-card .char-portrait-job, .char-slots .char-card .char-portrait-atk { font-size: 0.8125rem; }
  .char-slots .char-card .capture-missing { max-width: 100%; overflow: hidden; font-size: 0.6875rem; white-space: nowrap; text-overflow: ellipsis; }
  .char-slots .char-card-main { top: 10px; right: 12px; left: auto; }
  .char-slots .char-card > .char-portrait-mark { display: none; }
  .char-slots .char-card-info .char-slot-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; width: 100%; margin-top: auto; }
  .char-slots .char-card-info .char-slot-actions > * { min-height: 0; height: 30px; padding: 0 4px; font-size: 0.75rem; white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; }
  .char-slots .char-card-info .char-slot-actions .char-delete { grid-column: auto; }
}
@media (max-width: 560px) {
  .char-slots .char-slot.filled.char-card { width: 100%; box-sizing: border-box; }
}

/* ---- 페이지 제목·부제목: [N방컷] 기준으로 통일 (2026-10-13 요청) ----
   페이지 위 20px(main 위 여백 12px 더해 32px) · 제목 1.75rem · 제목 아래 6px · 부제목 1rem · 제목 줄 아래 20px.
   어드민 카드 제목(.compact)과 '← 캐릭터 관리'가 붙는 폼 제목(.char-form-head)은 따로 둔다. */
.scroll-sim { margin-top: 20px; }
.page-head:not(.compact):not(.char-form-head) { margin-bottom: 20px; }
.page-head:not(.compact):not(.char-form-head) h1 { margin: 0 0 6px; font-size: 1.75rem; }
.page-head:not(.compact):not(.char-form-head) .summary { margin: 0; font-size: 1rem; }
/* 칸 사이를 gap 14px 로 띄우는 화면은 그만큼 빼서 제목 줄 아래가 20px 이 되게 */
.scroll-sim > .page-head, .skill-sim > .page-head:not(.char-form-head) { margin-bottom: 6px; }

/* 공지사항 창 폭 700px, 따봉은 임시로 숨김 (2026-10-13 요청. 다시 보이려면 아래 display:none 줄만 지운다) */
.modal-card.modal-narrow.patch-modal { width: min(700px, 100%); }
.patch-list .patch-like { display: none; }

/* 로비 타이머 시안 F (2026-10-19, 캔버스 '파티로비 타이머 시안 6종'): 스킬 쿨타임 아이콘 줄.
   아이콘 32px(남은 비율 --p만큼 밝은 부채꼴) | 이름 + 보조 줄 | 남은 시간 | [재생↔일시정지]. 줄 38px × 3, 카드 높이는 예전과 같은 188px */
.lobby-v2 .lobby-timers > header { height: 26px; margin: 0 0 6px; }
.lobby-v2 .lobby-timers .timer-title { display: flex; align-items: center; gap: 6px; min-width: 0; }
.lobby-v2 .lobby-timers .timer-count { padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); font-size: 0.66rem; font-weight: 800; white-space: nowrap; }
html.dark .lobby-v2 .lobby-timers .timer-count { color: #9fbfff; }
.lobby-v2 .lobby-timers .timer-tools .pip-button,
.lobby-v2 .lobby-timers .timer-tools .sound-toggle,
.lobby-v2 .lobby-timers .timer-tools .timer-button { height: 24px; min-height: 0; border-radius: 999px; }
.lobby-v2 .lobby-timers .timer-tools .pip-button { width: auto; padding: 0 9px; gap: 4px; font-size: 0.69rem; }
.lobby-v2 .lobby-timers .timer-tools .sound-toggle,
.lobby-v2 .lobby-timers .timer-tools .timer-button.icon-only { width: 26px; padding: 0; }
.lobby-v2 .lobby-timers .timer-tools .timer-button.with-text { width: auto; gap: 4px; padding: 0 9px; font-size: 0.69rem; font-weight: 800; }
.lobby-v2 .lobby-timers .timer-tools .ui-icon { width: 12px; height: 12px; }
.lobby-v2 .lobby-timers .timer-tools .timer-button.pause { color: #ca8a04; }
.lobby-v2 .lobby-timers .timer-all { gap: 4px; }
.lobby-v2 .lobby-timers .timer-rows { display: flex; flex-direction: column; gap: 6px; }

.timer-cd { --p: 100; display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 6px 0 3px; box-sizing: border-box; border: 1px solid transparent; border-radius: 9px; background: color-mix(in srgb, var(--ink) 5%, var(--card)); }
.timer-cd.running { background: color-mix(in srgb, var(--accent) 7%, var(--card)); }
.timer-cd.soon { background: color-mix(in srgb, #f59e0b 11%, var(--card)); }
.timer-cd.paused { background: color-mix(in srgb, var(--ink) 4%, var(--card)); }
.timer-cd.ringing { border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent); }
/* 아이콘: 남은 비율만큼 밝고 나머지는 어둡게 덮는다 (게임 쿨타임 모양) */
.timer-cd-ico { position: relative; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 7px; overflow: hidden; display: flex; align-items: center; justify-content: center; background: #334155; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.12); }
.timer-cd-ico img { display: block; width: 32px; height: 32px; image-rendering: pixelated; }
.timer-cd-ico svg { width: 32px; height: 32px; fill: none; stroke: #cfe0ff; stroke-width: 1.8; stroke-linecap: round; }
.timer-cd-ico b { color: #b8f0c8; font-size: 0.62rem; font-weight: 900; letter-spacing: -0.02em; }
.timer-cd-ico i { position: absolute; inset: 0; background: conic-gradient(transparent 0 calc(var(--p) * 1%), rgba(5, 8, 12, 0.62) 0); pointer-events: none; }
.timer-cd[data-timer="one_time"] .timer-cd-ico { background: #1e3a6e; }
.timer-cd[data-timer="gyeongku"] .timer-cd-ico { background: #0b0f14; } /* 경쿠 아이콘 그림이 자체 배경을 가진다 */
.timer-cd[data-timer="holy_symbol"] .timer-cd-ico { background: #0b0f14; }
.timer-cd.running .timer-cd-ico { box-shadow: inset 0 0 0 1.5px var(--accent); }
.timer-cd.soon .timer-cd-ico { box-shadow: 0 0 0 1.5px #f59e0b, 0 0 10px rgba(245, 158, 11, 0.55); }
.timer-cd:not(.running) .timer-cd-ico,
.timer-cd.paused .timer-cd-ico { filter: grayscale(0.8); }
.timer-cd-text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; line-height: 1.2; }
.timer-cd-name { display: block; max-width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; font-size: 0.8125rem; font-weight: 700; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-cd.paused .timer-cd-name { color: var(--muted); }
.timer-cd-text small { color: var(--muted); font-size: 0.66rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.timer-cd.soon .timer-cd-text small { color: #b45309; }
html.dark .timer-cd.soon .timer-cd-text small { color: #e9a23b; }
.timer-cd .timer-custom { margin-left: 3px; color: var(--accent); font-style: normal; }
.timer-cd > .timer-left { flex: 0 0 auto; color: var(--muted); font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.timer-cd.running > .timer-left { color: var(--ink); }
.timer-cd.paused > .timer-left { color: var(--muted); }
.timer-cd.soon > .timer-left { color: #b45309; }
/* 끝나기 10초 전: 줄 배경과 시간 글자가 0.5초마다 깜빡인다 */
@keyframes timer-cd-blink { 50% { background: color-mix(in srgb, #f59e0b 30%, var(--card)); } }
@keyframes timer-cd-blink-text { 50% { opacity: 0.25; } }
.timer-cd.blink { animation: timer-cd-blink 1s steps(1, end) infinite; }
.timer-cd.blink > .timer-left { animation: timer-cd-blink-text 1s steps(1, end) infinite; }
html.dark .timer-cd.soon > .timer-left { color: #fbbf24; }
.timer-cd > .timer-button { flex: 0 0 auto; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 7px; }
.timer-cd > .timer-button .ui-icon { width: 11px; height: 11px; }
.timer-cd > .timer-button.pause { color: #ca8a04; }
/* 시간 왼쪽 연필 버튼 (파티장만): 누르면 시간 칸이 입력칸으로, 다시 누르면 취소 */
.timer-cd-edit { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; margin-right: -6px; padding: 0; border: 1px solid transparent; border-radius: 6px; background: none; color: var(--muted); cursor: pointer; }
.timer-cd-edit .ui-icon { width: 13px; height: 13px; }
.timer-cd-edit:hover { border-color: var(--line); color: var(--accent); }
.timer-cd-edit[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
/* 남은 시간 칸은 폭 고정 (수정 입력칸과 같은 자리·같은 크기라 눌러도 줄이 움직이지 않는다) */
.timer-cd > .timer-left,
.timer-cd .timer-edit-input { box-sizing: border-box; width: 4.4rem; text-align: right; }
/* 시간 수정 중: 아이콘·이름·보조 줄은 그대로, 시간 칸만 입력칸, [재생↔일시정지] 자리만 [저장] */
.timer-cd .timer-edit-form { display: contents; }
.timer-cd .timer-edit-input { flex: 0 0 auto; height: 26px; padding: 0 5px; margin: 0; border: 1px solid var(--accent); border-radius: 6px; background: var(--card); color: var(--ink); font: inherit; font-size: 1.125rem; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; outline: none; }
.timer-cd .timer-edit-form .timer-save { flex: 0 0 auto; width: 26px; height: 26px; min-height: 0; padding: 0; border-radius: 7px; color: var(--accent); }
.timer-cd .timer-edit-form .timer-save .ui-icon { width: 13px; height: 13px; }
@media (min-width: 961px) {
  .lobby-v2 .lobby-timers { height: calc(14px * 2 + 26px + 6px + 38px * 3 + 6px * 2 + 2px); } /* 188px, 예전과 같다 */
  .lobby-v2 .lobby-timers .timer-rows { height: calc(38px * 3 + 6px * 2); }
}

/* ---- [자리매매] (/trade): trade-preview4.html 시안을 앱 화면으로 옮김 (2026-10-20). 색은 사이트 테마 변수를 따르고 팝니다/삽니다 색만 따로 ---- */
.trade-page {
  --sell: #58a6ff; --buy: #3fb950; --done: #6e7681; --warn: #e3b341; --meso: #fb923c;
}
.trade-page button, .trade-page input, .trade-page select, .trade-page textarea { font: inherit; color: inherit; }
.trade-page { font-size: 0.875rem; line-height: 1.5; }
.trade-page .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 24px; }
.trade-page .page-head .grow { flex: 1; }
/* 3차: mapleland.gg 아이템 거래 화면(https://mapleland.gg/item/1382007) 구성을 그대로 따르고 "아이템" 자리에 "사냥터 자리"를 넣었다.
       왼쪽 정보 카드(따라 내려옴) · 오른쪽 위 필터 · 정렬 버튼 · 팝니다 | 삽니다 두 칸. 팝니다 = 파랑, 삽니다 = 초록 */
    .trade-page .pill-btn { height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-weight: 700; font-size: 0.82rem; }

    .trade-page .layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
    @media (max-width: 920px) { .trade-page .layout { grid-template-columns: 1fr; } .trade-page .info { position: static !important; } }

    /* ---- 왼쪽: 사냥터 정보 카드 (아이템 정보 카드 자리) ---- */
    .trade-page .info { position: sticky; top: 14px; display: grid; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); }
    .trade-page .scene { position: relative; height: 150px; border-radius: 10px; overflow: hidden; background: #0b0f19 var(--bg-img, none) center / cover; isolation: isolate; }
    .trade-page .scene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(0,0,0,.75)); z-index: 0; }
    .trade-page .scene .mob { position: absolute; right: 8%; top: 50%; height: 120%; transform: translateY(-50%); image-rendering: pixelated; z-index: 0; }
    .trade-page .scene .tr-name { position: absolute; left: 12px; bottom: 10px; z-index: 1; color: #fff; }
    .trade-page .scene .tr-name small { display: block; color: rgba(255,255,255,.75); font-size: 0.78rem; font-weight: 700; }
    .trade-page .scene .tr-name strong { font-size: 1.15rem; }
    .trade-page .scene .cap { position: absolute; right: 10px; top: 10px; z-index: 1; padding: 1px 8px; border-radius: 999px; background: #fff; color: #111827; font-size: 0.74rem; font-weight: 900; }
    .trade-page .kv { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; margin: 0; font-size: 0.86rem; }
    .trade-page .kv dt { color: var(--muted); font-weight: 700; }
    .trade-page .kv dd { margin: 0; text-align: right; font-weight: 700; }
    .trade-page .tr-seat-chips { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
    .trade-page .tr-seat-chip { padding: 1px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); font-size: 0.76rem; font-weight: 800; }
    .trade-page .mobs { display: grid; gap: 6px; }
    .trade-page .mob-row { display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: var(--surface); font-size: 0.8rem; }
    .trade-page .mob-row img { max-width: 34px; max-height: 30px; image-rendering: pixelated; justify-self: center; }
    .trade-page .mob-row b { display: block; font-size: 0.82rem; }
    .trade-page .mob-row span { color: var(--muted); }
    .trade-page .mob-row em { font-style: normal; color: var(--muted); font-variant-numeric: tabular-nums; text-align: right; }
    /* 시세: 메소를 다 적으면 길어서 한 줄에 하나씩 (이름 왼쪽, 값 오른쪽) */
    .trade-page .market { display: grid; gap: 4px; }
    .trade-page .market div { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 7px 10px; border-radius: 8px; background: var(--surface); }
    .trade-page .market small { color: var(--muted); font-size: 0.74rem; font-weight: 700; }
    .trade-page .market strong { font-size: 0.88rem; font-variant-numeric: tabular-nums; }
    /* 시세 색: 최저 팝니다 = 파랑, 최고 삽니다 = 초록, 거래완료 평균 = 흰색(라이트 모드는 기본 글자색) */
    .trade-page .market .lo { --meso: var(--sell); } .trade-page .market .hi { --meso: var(--buy); } .trade-page .market .avg { --meso: var(--ink); }
    .trade-page .meso { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; color: var(--meso); }
    .trade-page .meso img { width: 16px; height: 16px; image-rendering: pixelated; }
    .trade-page .meso em { margin-left: 1px; color: var(--meso); opacity: .75; font-size: 0.78em; font-style: normal; font-weight: 700; }
    .trade-page .primary { height: 42px; border: 0; border-radius: 10px; background: var(--grad); color: #fff; font-weight: 900; font-size: 0.95rem; cursor: pointer; }

    /* ---- 오른쪽 ---- */
    .trade-page .main { display: grid; gap: 12px; min-width: 0; }
    .trade-page .tr-notice { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); font-size: 0.86rem; }
    .trade-page .new { padding: 1px 7px; border-radius: 999px; background: #ef4444; color: #fff; font-size: 0.7rem; font-weight: 900; }
    .trade-page .bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
    .trade-page .bar .tr-check { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 0.86rem; cursor: pointer; }
    .trade-page .bar .grow { flex: 1; }
    .trade-page .refresh { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 0.78rem; font-weight: 700; font-variant-numeric: tabular-nums; }
    .trade-page .refresh button { height: 26px; padding: 0 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--card); cursor: pointer; font-size: 0.76rem; font-weight: 800; }
    .trade-page .refresh.busy button { opacity: .5; }
    .trade-page .refresh[hidden] { display: none; } /* 자동 새로고침은 그대로 돌고 표시만 숨긴다 */
    .trade-page .cols.flash .post { animation: flash .6s ease; }
    @keyframes flash { from { background: color-mix(in srgb, var(--accent) 12%, var(--card)); } }
    @media (prefers-reduced-motion: reduce) { .trade-page .cols.flash .post { animation: none; } }
    .trade-page .sort { display: inline-flex; padding: 3px; border-radius: 10px; background: var(--surface); }
    .trade-page .sort button { height: 30px; padding: 0 14px; border: 0; border-radius: 8px; background: transparent; cursor: pointer; font-weight: 800; color: var(--muted); }
    .trade-page .sort button.on { background: var(--card); color: var(--ink); box-shadow: 0 1px 3px rgba(0,0,0,.2); }

    .trade-page .cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
    @media (max-width: 760px) { .trade-page .cols { grid-template-columns: 1fr; } }
    .trade-page .col { display: grid; gap: 8px; min-width: 0; }
    .trade-page .col-head { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; color: #fff; font-weight: 900; }
    .trade-page .col-head.sell { background: var(--sell); } .trade-page .col-head.buy { background: var(--buy); }
    .trade-page .col-head small { margin-left: auto; padding: 0 8px; border-radius: 999px; background: rgba(255,255,255,.25); font-size: 0.76rem; }
    .trade-page .post { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-left: 4px solid var(--side); border-radius: 10px; background: var(--card); }
    .trade-page .post.sell { --side: var(--sell); } .trade-page .post.buy { --side: var(--buy); }
    /* 거래완료: 흑백·반투명 위에 빨간 "거래완료" 도장. 마우스를 올리면 잠깐 선명하게 (지난 거래 가격 확인) */
    .trade-page .post { transition: opacity .45s ease, filter .45s ease; }
    .trade-page .post.done { --side: var(--done); opacity: .55; filter: grayscale(1); }
    .trade-page .post.done::after {
      content: "거래완료"; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-8deg);
      padding: 2px 14px; border: 3px solid #ef4444; border-radius: 8px; color: #ef4444; font-size: 1.15rem; font-weight: 900; letter-spacing: .08em;
      background: color-mix(in srgb, var(--card) 70%, transparent); pointer-events: none;
    }
    .trade-page .post.done.just-done::after { animation: stamp .35s cubic-bezier(.2, 1.6, .4, 1); } /* 방금 거래완료로 바꾼 글만 도장이 찍힌다 */
    .trade-page @keyframes stamp { from { transform: translate(-50%, -50%) rotate(-8deg) scale(1.8); opacity: 0; } }
    @media (prefers-reduced-motion: reduce) { .trade-page .post.done.just-done::after { animation: none; } }
    .trade-page .post.done:hover { opacity: .85; filter: none; }
    .trade-page .post.mine { box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 45%, transparent); }
    .trade-page .price { font-size: 1.15rem; font-weight: 900; font-variant-numeric: tabular-nums; }
    .trade-page .map-name { grid-column: 1; color: var(--muted); font-size: 0.78rem; font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .trade-page .price .meso img { width: 20px; height: 20px; }
    /* 코멘트: 배경 박스로 가격·시간과 구분 (두 줄까지, 넘치면 말줄임) */
    .trade-page .memo {
      grid-column: 1 / -1; min-width: 0; margin: 6px 0 2px; padding: 7px 10px;
      border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 0.84rem; line-height: 1.45;
      display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; overflow-wrap: anywhere;
    }
    .trade-page .side { grid-column: 2; grid-row: 1 / span 2; display: grid; justify-items: end; align-content: start; gap: 4px; }
    .trade-page .when { margin-right: 2px; color: var(--muted); font-size: 0.74rem; font-weight: 700; white-space: nowrap; }
    .trade-page .state { padding: 1px 8px; border-radius: 999px; font-size: 0.72rem; font-weight: 900; }
    .trade-page .state.open { color: var(--buy); background: color-mix(in srgb, var(--buy) 16%, transparent); }
    .trade-page .state.done { color: var(--done); background: color-mix(in srgb, var(--done) 18%, transparent); }
    .trade-page .map-name .me { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: var(--accent); color: #fff; font-weight: 900; }
    .trade-page .more { position: absolute; right: 8px; bottom: 6px; width: 26px; height: 22px; border: 0; border-radius: 6px; background: transparent; color: var(--muted); cursor: pointer; font-weight: 900; }
    .trade-page .more:hover { background: var(--surface); }
    .trade-page .menu { position: absolute; right: 8px; bottom: 30px; z-index: 5; display: grid; min-width: 120px; padding: 4px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); box-shadow: 0 10px 30px rgba(0,0,0,.35); }
    .trade-page .menu button { height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; text-align: left; cursor: pointer; font-weight: 700; }
    .trade-page .menu button:hover { background: var(--surface); }
    .trade-page .menu .danger { color: #ef4444; }
    .trade-page .empty { display: grid; place-items: center; gap: 6px; padding: 30px 10px; border: 1px dashed var(--line); border-radius: 10px; color: var(--muted); text-align: center; }
    .trade-page .empty img { width: 46px; image-rendering: pixelated; opacity: .8; }

    /* ---- 자리 등록 창 ---- */
    .trade-page .backdrop { position: fixed; inset: 0; z-index: 20; display: grid; place-items: center; padding: 16px; background: rgba(0,0,0,.6); }
    .trade-page .backdrop[hidden] { display: none; }
    .trade-page .dialog { width: min(480px, 100%); display: grid; gap: 12px; padding: 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 20px 60px rgba(0,0,0,.45); }
    .trade-page .dialog h2 { margin: 0; font-size: 1.1rem; display: flex; align-items: center; }
    .trade-page .dialog h2 button { margin-left: auto; border: 0; background: none; font-size: 1.4rem; cursor: pointer; color: var(--muted); }
    .trade-page .field { display: grid; gap: 5px; font-size: 0.82rem; font-weight: 800; color: var(--muted); }
    .trade-page .field input, .trade-page .field select, .trade-page .field textarea { height: 38px; padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font-weight: 600; }
    .trade-page .field textarea { height: 76px; padding: 8px 10px; resize: vertical; }
    .trade-page .seg { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
    .trade-page .seg button { height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font-weight: 900; color: var(--muted); }
    .trade-page .seg button.on.sell { border-color: var(--sell); background: var(--sell); color: #fff; }
    .trade-page .seg button.on.buy { border-color: var(--buy); background: var(--buy); color: #fff; }
    .trade-page .two { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
    .trade-page .quick { display: flex; flex-wrap: wrap; gap: 4px; }
    .trade-page .quick button { height: 26px; padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; background: transparent; cursor: pointer; font-size: 0.74rem; font-weight: 800; }
    .trade-page .hint { color: var(--muted); font-size: 0.74rem; font-weight: 600; }
    .trade-page .actions { display: flex; justify-content: flex-end; gap: 8px; }
    .trade-page .actions button { height: 38px; padding: 0 16px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); cursor: pointer; font-weight: 900; }
    .trade-page .actions .go { border: 0; background: var(--grad); color: #fff; }
    .trade-page .tr-toast { position: fixed; left: 50%; bottom: 24px; z-index: 30; transform: translateX(-50%); padding: 10px 16px; border-radius: 10px; background: #111827; color: #fff; font-weight: 700; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
    .trade-page .tr-toast[hidden] { display: none; }

    /* ---- 첫 화면: 사냥터 검색 ---- */
    .trade-page .layout[hidden], .trade-page .search[hidden], .trade-page .tr-back[hidden] { display: none; }
    .trade-page .search { display: grid; justify-items: center; gap: 14px; padding: 40px 0 10px; }
    .trade-page .search-title { margin: 0; font-size: 1.6rem; text-wrap: balance; text-align: center; }
    .trade-page .tr-search-box { position: relative; width: min(640px, 100%); }
    .trade-page .tr-search-box input { width: 100%; height: 54px; padding: 0 18px; border: 2px solid var(--line); border-radius: 14px; background: var(--card); font-size: 1.05rem; font-weight: 600; }
    .trade-page .tr-search-box input:focus { outline: none; border-color: var(--accent); }
    .trade-page .results { position: absolute; left: 0; right: 0; top: 60px; z-index: 10; margin: 0; padding: 6px; list-style: none; max-height: 420px; overflow: auto;
      border: 1px solid var(--line); border-radius: 14px; background: var(--card); box-shadow: 0 16px 40px rgba(0,0,0,.35); }
    .trade-page .results[hidden] { display: none; }
    .trade-page .result { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 12px; padding: 8px; border-radius: 10px; cursor: pointer; }
    .trade-page .result:hover, .trade-page .result.active { background: var(--surface); }
    .trade-page .thumb { position: relative; width: 72px; height: 42px; border-radius: 8px; overflow: hidden; background: #0b0f19 var(--bg-img, none) center / cover; }
    .trade-page .thumb img { position: absolute; left: 50%; top: 50%; max-width: 64px; max-height: 40px; transform: translate(-50%, -50%); image-rendering: pixelated; }
    .trade-page .result b { display: block; font-size: 0.95rem; }
    .trade-page .result span { color: var(--muted); font-size: 0.8rem; font-weight: 600; }
    .trade-page .result mark { background: none; color: var(--accent); font-weight: 900; }
    .trade-page .counts { display: flex; gap: 6px; font-size: 0.74rem; font-weight: 900; }
    .trade-page .counts .s { color: var(--sell); } .trade-page .counts .b { color: var(--buy); }
    .trade-page .search-hint { margin: 0; color: var(--muted); font-size: 0.84rem; }
    .trade-page .hot-title { margin: 18px 0 0; color: var(--muted); font-size: 0.86rem; }
    .trade-page .hot { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; width: min(900px, 100%); }
    .trade-page .hot-card { display: grid; gap: 8px; padding: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); overflow: hidden; cursor: pointer; text-align: left; }
    .trade-page .hot-card:hover { border-color: var(--accent); }
    .trade-page .hot-card .scene { height: 96px; border-radius: 0; }
    .trade-page .hot-card .counts { padding: 0 12px; }
/* 자리매매: .char-page 의 label(세로 쌓기) 규칙이 체크박스 줄에 닿지 않게 */
.trade-page .bar .tr-check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; }
.trade-page .bar .tr-check input { display: inline-block; margin: 0; }

/* ---- 파티로비 자리 줄 (2026-10-24): 직업 배지를 직업군 색으로 (전사 빨강 · 마법사 파랑 · 궁수 초록 · 도적 보라 · 해적 노랑) ---- */
/* .lobby-seat 가 --job 을 var(--line) 으로 덮으므로(3482줄) 배지는 따로 --seat-job 을 쓴다 */
.lobby-seat.job-tone-warrior { --seat-job: #ef4444; }
.lobby-seat.job-tone-magician { --seat-job: #3b82f6; }
.lobby-seat.job-tone-bowman { --seat-job: #22c55e; }
.lobby-seat.job-tone-thief { --seat-job: #a855f7; }
.lobby-seat.job-tone-pirate { --seat-job: #eab308; }
.lobby-page .lobby-seat[class*="job-tone-"] .seat-member .seat-job-badge {
  border-color: color-mix(in srgb, var(--seat-job) 85%, transparent);
  background: color-mix(in srgb, var(--seat-job) 32%, rgba(16, 18, 21, 0.72));
  color: #fff;
}
/* PC: 채워진 자리의 Lv · 닉네임 · 직업 · 스공을 줄마다 같은 x 위치의 고정 칸에 두고, 칸 안에서 가운데 정렬.
   [파티장]·[나]·[게스트] 등 뱃지는 닉네임 칸 위쪽 작은 줄 (오른쪽 지참금·버튼 칸과 겹치지 않게 한 칸을 같이 씀) */
@media (min-width: 961px) {
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member {
    display: grid !important;
    grid-template-columns: 52px 136px 112px 96px;
    grid-template-rows: auto auto;
    grid-template-areas: "lv tags job atk" "lv nick job atk";
    column-gap: 6px;
    row-gap: 2px;
    align-content: center;
    align-items: center;
    justify-items: center;
  }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .cell-badge.lv { grid-area: lv; }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-nick { grid-area: nick; max-width: 100%; }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-job-badge { grid-area: job; max-width: 100%; }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-atk { grid-area: atk; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .name-tags { grid-area: tags; }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member:not(:has(> .name-tags)) > .seat-nick { grid-row: 1 / span 2; grid-column: 2; }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .cell-badge.lv,
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-job-badge,
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-atk { grid-row: 1 / span 2; }
}
/* 드롭 아이템: 이름 없이 아이콘만 38px 칸으로 촘촘히 (이름은 마우스를 올리면 말풍선으로) */
.lobby-v2 .lobby-loot .icon-grid { grid-template-columns: repeat(auto-fill, 38px); justify-content: start; }
.lobby-v2 .lobby-loot .icon-grid .icon-cell { display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; box-sizing: border-box; }

/* ===== 파티로비 3단 시안(2026-10-24, 2026-10-25 좌우 맞바꿈): 왼쪽 260 사냥터·몬스터·드롭 | 가운데 파티원 | 오른쪽 290 채널·타이머·버튼 (2026-10-25 두 번 바꿨다가 처음 배치로) =====
   PC(961px 이상)는 세 칸 높이를 616px로 고정하고, 칸 안 목록만 스크롤한다 */
.lobby-v3 .lobby-3col { display: grid; grid-template-columns: 260px minmax(0, 1fr) 290px; gap: 14px; align-items: stretch; }
.lobby-v3 .lobby-3col > * { min-width: 0; }
.lobby-v3 .lobby-side { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: auto; contain: none; }
.lobby-v3 .lobby-side > .lobby-panel { margin: 0; }
/* 왼쪽: 사냥터 그림 카드 140px */
.lobby-v3 .lobby-col-left .lobby-map { flex: 0 0 140px; height: 140px; min-height: 0; padding: 10px; overflow: hidden; }
.lobby-v3 .lobby-col-left .lobby-map > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.lobby-v3 .lobby-col-left .lobby-map .lobby-map-name { padding: 0 10px; text-align: center; justify-content: center; }
.lobby-v3 .lobby-col-left .lobby-map .lobby-map-name strong { font-size: 1.05rem; line-height: 1.3; white-space: normal; }
.lobby-v3 .lobby-col-left .lobby-map .lobby-map-name .lobby-map-cap { font-size: 0.75rem; color: #111827; text-shadow: none; }
/* 소환 몬스터: 한 줄에 한 마리 */
.lobby-v3 .lobby-mobs, .lobby-v3 .lobby-loot { display: flex; flex-direction: column; min-height: 0; overflow: hidden; contain: none; }
.lobby-v3 .lobby-mobs .mob-grid { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; scrollbar-width: thin; }
.lobby-v3 .lobby-mobs .mob-grid > .mob-card { flex: 0 0 auto; }
/* 드롭 아이템: 아이콘만, 남는 높이를 다 쓰고 넘치면 안에서 스크롤 */
.lobby-v3 .lobby-loot .icon-grid { flex: 1 1 auto; height: auto; min-height: 0; }
.lobby-v3 .lobby-loot > .status { flex: 1 1 auto; min-height: 0; }
/* 오른쪽: 채널 · 심 방식 두 줄 카드 */
.lobby-v3 .lobby-settings.lobby-bar { display: block; height: auto; padding: 10px 14px; overflow: visible; }
.lobby-v3 .lobby-settings .lobby-channel-row { display: grid; grid-template-columns: auto auto; grid-auto-rows: 32px; align-items: center; justify-content: space-between; row-gap: 6px; column-gap: 8px; width: auto; height: auto; flex: none; }
.lobby-v3 .lobby-settings .lobby-channel-box { grid-column: 1 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 6px; width: auto; }
.lobby-v3 .lobby-settings .lobby-channel-box > .panel-label { margin-right: auto; }
.lobby-v3 .lobby-settings .lobby-sim-label { margin: 0; }
.lobby-v3 .lobby-settings .lobby-sim { justify-self: end; margin: 0; }
/* 파티 조작: 카드 없이 아래에 붙인다 */
.lobby-v3 .lobby-actions-card { display: flex; flex-direction: column; gap: 8px; margin-top: auto; padding: 0; height: auto; background: none; border: 0; box-shadow: none; }
.lobby-v3 .lobby-actions-card .lobby-action-buttons { display: flex; height: 56px; margin: 0; }
.lobby-v3 .lobby-actions-card .lobby-action-buttons > * { flex: 1 1 auto; width: 100%; min-height: 0; height: 56px; margin: 0; font-size: 1.05rem; }
.lobby-v3 .lobby-actions-card .lobby-dock-end { display: flex; height: 40px; }
.lobby-v3 .lobby-actions-card .lobby-dock-end .auth-button { flex: 1 1 auto; width: 100%; height: 40px; min-height: 0; justify-content: center; }
@media (min-width: 961px) {
  .lobby-v3 .lobby-3col { height: 616px; }
  .lobby-v3 .lobby-party { height: 616px; }
  .lobby-v3 .lobby-side { height: 616px; }
  .lobby-v3 .lobby-mobs { flex: 0 0 196px; height: 196px; }
  .lobby-v3 .lobby-loot { flex: 1 1 0; height: auto; }
}
@media (max-width: 960px) {
  /* 좁은 화면: 파티원 → 오른쪽(채널·타이머·버튼) → 왼쪽(사냥터·몬스터·드롭) 순서로 한 줄씩 */
  .lobby-v3 .lobby-3col { grid-template-columns: minmax(0, 1fr); }
  .lobby-v3 .lobby-party { order: 1; }
  .lobby-v3 .lobby-col-right { order: 2; }
  .lobby-v3 .lobby-col-left { order: 3; }
  .lobby-v3 .lobby-loot .icon-grid { height: calc(38px * 5 + 4px * 4); flex: none; }
}
@media (min-width: 961px) {
  /* 3단은 다른 탭(1080px)보다 넓게: 최대 1280px(--wide-width), 화면 양옆 24px 여백 */
  .lobby-v3 { width: min(var(--wide-width), calc(100vw - 48px)); margin-left: calc(50% - min(var(--wide-width) / 2, 50vw - 24px)); }
}
/* 자리 글자(시안 A): 52px 칸에서 왼쪽 12px부터 큰 반투명 흰 글자를 줄 뒤에 깐다. 넘치는 부분은 Lv 뱃지 뒤로 지나간다 */
.lobby-v3 .lobby-seats .lobby-seat { isolation: isolate; }
.lobby-v3 .lobby-seats .lobby-seat .seat-no {
  display: block; position: relative; z-index: -1; flex: 0 0 52px; width: 52px; align-self: center; padding: 0 0 0 12px; overflow: visible;
  font-family: "Black Han Sans", "Noto Sans KR", sans-serif; font-size: 56px; font-weight: 400; line-height: 1; letter-spacing: -0.03em;
  color: rgba(255, 255, 255, 0.28); text-align: left; white-space: nowrap; pointer-events: none; transform: translateY(3%);
}
.lobby-v3 .lobby-seats .lobby-seat:not(.filled) .seat-no { color: rgba(139, 148, 158, 0.17); }

/* ===== 2026-10-25: 넓은 탭 폭 1280px =====
   파티 로비·캐릭터 관리·자리매매·N방컷·스킬 시뮬레이터·주문서 시뮬레이터·어드민은 PC에서 1280px.
   사용안내·메랜백과·처리방침·프로필은 예전 폭(--content-width 1080px) 그대로 */
:root { --wide-width: 1280px; }
@media (min-width: 961px) {
  .char-page:not(.policy-page):not(.profile-page):not(.capture-page),
  .scroll-sim,
  .admin-page { width: min(var(--wide-width), calc(100vw - 48px)); max-width: none; margin-left: calc(50% - min(var(--wide-width) / 2, 50vw - 24px)); margin-right: 0; }
}
/* 상단 메뉴줄도 내용과 같은 1280px 안에 (양끝이 아래 내용 칸과 줄을 맞춘다). 탭 간격·여백은 예전 그대로 (2026-10-25 줄였다가 되돌림) */
@media (min-width: 961px) {
  /* 내용 칸과 같은 식(min(1280px, 100vw - 48px))으로 폭을 잡아 양끝을 맞춘다 */
  .top { padding-left: calc((100% - min(var(--wide-width), 100vw - 48px)) / 2); padding-right: calc((100% - min(var(--wide-width), 100vw - 48px)) / 2); }
  .tabs { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; } /* 넘치면 탭 줄만 가로로 민다 */
  .tabs::-webkit-scrollbar { display: none; }
  .top .brand, .top .top-right { flex: none; }
}
/* N방컷: 넓어진 폭은 오른쪽(방컷·몬스터) 칸이 받는다. 왼쪽은 1080px 때와 같은 708px (버프 카드 오른쪽 여백도 그대로) */
@media (min-width: 961px) {
  .nhit-layout { grid-template-columns: minmax(0, 708px) 1px minmax(323px, 1fr); }
}

/* ===== 2026-10-25 로비 손질 ===== */
@media (min-width: 961px) {
  /* 드롭 아이콘은 세로 5줄 (줄 38px + 4px 단위로 끊어 반만 보이는 줄이 없게, 넘치면 안에서 스크롤).
     드롭 카드는 내용 높이 그대로이고, 왼쪽 칸에 남는 높이는 사냥터 카드가 맡는다 */
  .lobby-v3 .lobby-loot { flex: 0 0 auto; height: auto; }
  .lobby-v3 .lobby-loot .icon-grid { flex: 0 0 auto; height: calc(38px * 5 + 4px * 4); }
  .lobby-v3 .lobby-col-left .lobby-map { flex: 1 1 0; height: auto; min-height: 100px; }
  /* 채워진 자리: 오른쪽 지참금(·[삭제]/[내보내기]) 칸만큼 비워 두고, 좁으면 닉네임·직업·스공 칸이 줄어든다 (스공이 버튼에 가리지 않게) */
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member { grid-template-columns: 52px minmax(0, 136px) minmax(0, 112px) minmax(0, 96px); justify-content: start; box-sizing: border-box; }
  .lobby-v2 .lobby-seat.filled.has-meso:not(.editing) .seat-member { padding-right: calc(var(--seat-meso-w) + 6px); }
  .lobby-v2 .lobby-seat.filled.has-recruit:not(.editing) .seat-member { padding-right: calc(var(--seat-meso-w) + var(--seat-recruit-w) + 12px); }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-job-badge { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}
/* 소환 몬스터 3마리가 칸(130px)에 딱 맞게 (40px × 3 + 5px × 2) */
.lobby-v3 .lobby-mobs .mob-grid { gap: 5px; }
/* 타이머 진행 수: 숫자 동그라미 (좁은 머리에서 [PIP]과 겹치지 않게) */
.lobby-v2 .lobby-timers .timer-count { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; font-size: 0.7rem; }

/* 모바일: 로비의 작은 버튼을 누르기 쉽게 (최소 36px) */
@media (max-width: 768px) {
  .lobby-v2 .timer-cd-edit, .lobby-v2 .lobby-channel-box .timer-cd-edit { width: 36px; height: 36px; }
  .lobby-v2 .timer-cd { height: 44px; }
  .lobby-v2 .timer-cd > .timer-button, .lobby-v2 .timer-cd .timer-edit-form .timer-save { width: 36px; height: 36px; }
  .lobby-v2 .lobby-timers > header { height: auto; min-height: 36px; }
  .lobby-v2 .lobby-timers .timer-tools .pip-button,
  .lobby-v2 .lobby-timers .timer-tools .sound-toggle,
  .lobby-v2 .lobby-timers .timer-tools .timer-button { height: 36px; }
  .lobby-v2 .lobby-timers .timer-tools .sound-toggle,
  .lobby-v2 .lobby-timers .timer-tools .timer-button.icon-only { width: 36px; }
  .lobby-v2 button.seat-badge.seat-badge-button { min-height: 30px; padding: 0 10px; }
  .lobby-v2 .lobby-party-tools .auth-button { min-height: 36px; }
}

/* 파티로비 자리 끌어 옮기기 (2026-10-25): 놓을 자리를 파란 점선 테두리로 보인다.
   줄 크기가 바뀌지 않게 border 대신 안쪽 outline, 채워진 줄의 직업 그림 위에도 보이게 안쪽 그림자를 겹친다 */
.lobby-v2 .lobby-seats .lobby-seat.drop-over {
  outline: 2px dashed #58a6ff; outline-offset: -2px;
  box-shadow: inset 0 0 0 999px rgba(88, 166, 255, 0.12), 0 0 0 3px rgba(88, 166, 255, 0.25);
}
.lobby-v2 .lobby-seats .lobby-seat.dragging { opacity: 0.45; outline: 1px dashed rgba(255, 255, 255, 0.35); outline-offset: -1px; }

/* ===== 파티로비 왼쪽 칸 시안 G (2026-10-25, 캔버스 '파티로비 사냥터 칸 시안' G) =====
   한 장 카드: 위 168px 사냥터 그림이 카드 바탕색으로 사라지는 그라데이션 + 아래 차분한 소환 몬스터·드롭 */
.lobby-v3 .lobby-col-left { gap: 0; }
.lobby-v3 .lobby-g { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; margin: 0; padding: 0; overflow: hidden; }
.lobby-g-map {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 168px; height: 168px;
  background: var(--map-bg, none) center / cover no-repeat, color-mix(in srgb, var(--ink) 12%, var(--card));
  cursor: pointer; outline-offset: -3px;
}
.lobby-g-map .map-mob { --mob-scale: 1.5; --mob-dim: 0.9; }
.lobby-g-fade { position: absolute; inset: 0; z-index: 0; background: linear-gradient(180deg, transparent 30%, var(--card) 100%); pointer-events: none; }
.lobby-g-title { position: absolute; left: 14px; right: 14px; bottom: 10px; z-index: 1; display: flex; flex-direction: column; gap: 4px; color: var(--ink); }
.lobby-g-title strong { font-size: 1.15rem; font-weight: 900; line-height: 1.25; text-shadow: 0 1px 8px var(--card), 0 0 2px var(--card); }
.lobby-g-sub { display: flex; align-items: center; gap: 6px; font-size: 0.7rem; font-weight: 700; color: color-mix(in srgb, var(--ink) 80%, transparent); text-shadow: 0 1px 6px var(--card); }
.lobby-g-cap { padding: 1px 8px; border-radius: 999px; background: #fff; color: #111827; font-size: 0.7rem; font-weight: 900; text-shadow: none; }
.lobby-g-title.empty { align-items: center; justify-content: center; top: 0; bottom: 0; text-align: center; }
.lobby-g-change { position: absolute; top: 10px; right: 10px; z-index: 1; padding: 3px 8px; border-radius: 8px; background: rgba(13, 17, 23, 0.7); color: #e6edf3; font-size: 0.7rem; font-weight: 800; }
.lobby-g-body { display: flex; flex-direction: column; gap: 18px; flex: 1 1 auto; min-height: 0; padding: 12px 14px 14px; }
.lobby-v3 .lobby-g .lobby-g-sec { display: flex; flex-direction: column; gap: 4px; flex: 0 0 auto; height: auto; min-height: 0; margin: 0; padding: 0; overflow: visible; background: none; border: 0; box-shadow: none; }
.lobby-g-lab { display: flex; align-items: baseline; justify-content: space-between; margin: 0; font-size: 0.72rem; font-weight: 800; color: var(--muted); }
.lobby-g-lab em { font-style: normal; font-weight: 700; color: color-mix(in srgb, var(--muted) 75%, transparent); }
/* 소환 몬스터 줄: 스프라이트 · 이름(아래 Lv) | N방 n% */
.lobby-g .mob-list { display: flex; flex-direction: column; }
.lobby-g .mob-row { display: flex; align-items: center; gap: 8px; height: 44px; border-bottom: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); }
.lobby-g .mob-row:last-child { border-bottom: 0; }
.lobby-g .mob-row .sprite, .lobby-g .mob-row .missing { flex: 0 0 28px; width: 28px; height: 28px; object-fit: contain; opacity: 0.9; font-size: 0.55rem; }
.lobby-g .mob-row-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.lobby-g .mob-row-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; font-weight: 700; color: color-mix(in srgb, var(--ink) 85%, transparent); }
.lobby-g .mob-row-name span { font-size: 0.66rem; font-weight: 700; color: var(--muted); }
.lobby-g .mob-row-cut { display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.lobby-g .mob-row-cut strong { font-size: 0.9rem; font-weight: 900; }
.lobby-g .mob-row-cut small { font-size: 0.7rem; font-weight: 700; color: var(--muted); }
.lobby-g .mob-row-cut.good strong { color: #2da44e; }
.lobby-g .mob-row-cut.mid strong { color: #d97706; }
.lobby-g .mob-row-cut.hard strong { color: #dc2626; }
html.dark .lobby-g .mob-row-cut.good strong { color: #7ee787; }
html.dark .lobby-g .mob-row-cut.mid strong { color: #ffa657; }
html.dark .lobby-g .mob-row-cut.hard strong { color: #ff7b72; }
.lobby-g .lobby-mobs > .status, .lobby-g .lobby-loot > .status { margin: 4px 0 0; font-size: 0.75rem; }
/* 드롭: 테두리 없는 34px 칸, 세로 5줄까지 (넘치면 안에서 스크롤) */
.lobby-v3 .lobby-g .lobby-loot .icon-grid { display: grid; grid-template-columns: repeat(auto-fill, 34px); grid-auto-rows: 34px; gap: 0; justify-content: space-between; flex: 0 0 auto; height: calc(34px * 5); overflow-y: auto; scrollbar-width: thin; }
.lobby-v3 .lobby-g .lobby-loot .icon-grid .icon-cell { width: 34px; height: 34px; padding: 0; border: 0; border-radius: 7px; background: none; box-shadow: none; }
.lobby-v3 .lobby-g .lobby-loot .icon-grid .icon-cell:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); }
.lobby-v3 .lobby-g .lobby-loot .icon-grid .icon-cell img { width: 26px; height: 26px; opacity: 0.85; }
.lobby-g .is-disabled { opacity: 0.55; }
@media (min-width: 961px) {
  .lobby-v3 .lobby-g { height: 616px; }
  /* 드롭은 카드 아래 끝까지 채운다: 칸 크기(32px)는 그대로 두고 남는 높이만큼 줄 수를 늘린다 (192px = 6줄) */
  .lobby-v3 .lobby-g .lobby-g-sec.lobby-loot { flex: 1 1 0; }
  .lobby-v3 .lobby-g .lobby-loot .icon-grid { flex: 1 1 0; height: auto; min-height: 0; grid-template-columns: repeat(auto-fill, 32px); grid-auto-rows: 32px; align-content: start; }
  .lobby-v3 .lobby-g .lobby-loot .icon-grid .icon-cell { width: 32px; height: 32px; }
}

/* ===== [사냥터 선택] 창 시안 A5 (2026-10-25, 캔버스 '사냥터 선택 모달 시안' A5) =====
   왼쪽 [즐겨찾기·최근] · 분류 · 지역 | 오른쪽 검색 + 한 줄 목록 (그림 · 이름/자리 · 인원 · 추천 Lv · 별) */
.modal-card.mp5-card { width: min(960px, 100%); }
.mp5-card .modal-body { padding: 0; }
.mp5 { display: flex; height: min(560px, calc(100dvh - 240px)); min-height: 320px; }
.mp5-nav { flex: 0 0 210px; display: flex; flex-direction: column; gap: 2px; padding: 12px 10px; border-right: 1px solid var(--line); overflow-y: auto; scrollbar-width: thin; }
.mp5-nav-item { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 36px; padding: 0 10px; border: 0; border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 0.82rem; font-weight: 700; text-align: left; cursor: pointer; }
.mp5-nav-item:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mp5-nav-item > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp5-nav-item em { font-style: normal; font-size: 0.72rem; font-weight: 700; color: var(--muted); }
.mp5-nav-item.on { background: color-mix(in srgb, var(--accent) 16%, var(--card)); color: var(--ink); }
.mp5-nav-item.on em { color: var(--accent); }
.mp5-nav-item.empty { color: var(--muted); }
.mp5-star-ico svg { display: block; width: 14px; height: 14px; fill: #f2cc60; }
.mp5-grp { margin: 10px 10px 4px; font-size: 0.68rem; font-weight: 800; color: var(--muted); }
.mp5-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 12px 16px; }
.mp5-search { flex: none; height: 38px; box-sizing: border-box; padding: 0 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface, var(--card)); color: var(--ink); font: inherit; font-size: 0.875rem; }
.mp5-list { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 4px; overflow-y: auto; scrollbar-width: thin; }
.mp5-sec { margin: 6px 4px 2px; font-size: 0.72rem; font-weight: 800; color: var(--muted); }
.mp5-sec:first-child { margin-top: 0; }
.mp5-hint { margin: 0 4px 6px; padding: 12px; border: 1px dashed var(--line); border-radius: 10px; font-size: 0.78rem; color: var(--muted); }
.mp5-row { display: flex; align-items: center; gap: 12px; flex: none; min-height: 58px; padding: 0 6px 0 8px; border: 1px solid transparent; border-radius: 10px; cursor: pointer; }
.mp5-row:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.mp5-row.on { border-color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); }
.mp5-thumb { position: relative; isolation: isolate; overflow: hidden; flex: 0 0 100px; width: 100px; height: 42px; border-radius: 6px; background: color-mix(in srgb, var(--ink) 10%, var(--card)); }
.mp5-thumb.has-bg { background: var(--map-bg) center / cover no-repeat; }
.mp5-thumb .map-mob { --mob-scale: 1.6; --mob-dim: 0.85; }
.mp5-name { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; }
.mp5-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.9rem; font-weight: 800; }
.mp5-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; color: var(--muted); }
.mp5-col { flex: 0 0 56px; text-align: right; font-size: 0.78rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.mp5-star { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 8px; background: none; color: color-mix(in srgb, var(--muted) 70%, transparent); cursor: pointer; }
.mp5-star:hover { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.mp5-star svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
.mp5-star.on { color: #f2cc60; }
.mp5-star.on svg { fill: currentColor; }
@media (max-width: 768px) {
  /* 좁은 화면: 왼쪽 메뉴는 위쪽 가로 칩 줄로 */
  .mp5 { flex-direction: column; height: min(640px, calc(100dvh - 200px)); }
  .mp5-nav { flex: none; flex-direction: row; gap: 4px; padding: 8px 10px; border-right: 0; border-bottom: 1px solid var(--line); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .mp5-nav-item { flex: none; width: auto; min-height: 34px; border: 1px solid var(--line); border-radius: 999px; }
  .mp5-grp { display: none; }
  .mp5-main { padding: 10px; }
  .mp5-thumb { flex-basis: 72px; width: 72px; height: 36px; }
  .mp5-row { gap: 8px; }
  .mp5-col { flex: 0 0 auto; white-space: nowrap; }
}
/* [사냥터 선택] 창 본문은 굵은 글씨를 쓰지 않는다 (2026-10-25 사용자 요청) */
.mp5, .mp5 * { font-weight: 400; }

/* 로비 타이머 [PIP] 버튼: 잘 보이게 초록으로 채운다 (2026-10-25 사용자 요청) */
.lobby-v2 .lobby-timers .timer-tools .pip-button.auth-button {
  border: 1px solid #238636; background: #238636; color: #fff; font-weight: 800;
  box-shadow: 0 0 0 2px rgba(46, 160, 67, 0.25);
}
.lobby-v2 .lobby-timers .timer-tools .pip-button.auth-button:hover { background: #2ea043; border-color: #2ea043; }
.lobby-v2 .lobby-timers .timer-tools .pip-button.auth-button .ui-icon { color: #fff; }

/* 초대 카드 (2026-10-25): 오른쪽 칸 맨 위. 로비 코드 · [코드 복사][링크 복사] · 안내 한 줄 */
.lobby-v3 .lobby-share-card { display: flex; flex-direction: column; gap: 8px; flex: none; height: auto; margin: 0; padding: 12px 14px; }
.lobby-share-card .lobby-share-code { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lobby-share-card .lobby-share-code .panel-label { margin: 0; }
.lobby-share-card .lobby-code { padding: 2px 10px; font-size: 1rem; letter-spacing: 0.18em; }
.lobby-share-card .lobby-share-buttons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.lobby-share-card .lobby-share-buttons .auth-button { min-width: 0; height: 32px; min-height: 0; padding: 0 8px; justify-content: center; gap: 5px; font-size: 0.8rem; }
.lobby-share-card .lobby-share-note { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; line-height: 1.4; color: var(--muted); }

/* 채널 · 심 방식 한 줄 (2026-10-25): [채널 뱃지 64px · 연필] ……… [심 방식 스위치] */
.lobby-v3 .lobby-settings .lobby-channel-row { display: flex; align-items: center; gap: 6px; height: 32px; }
.lobby-v3 .lobby-settings .lobby-channel-box { flex: none; grid-column: auto; gap: 4px; justify-content: flex-start; }
.lobby-v3 .lobby-settings .lobby-channel-box > .panel-label { margin-right: 2px; }
.lobby-v3 .lobby-settings .lobby-channel-badge { flex: 0 0 64px; width: 64px; padding: 0 6px; }
.lobby-v3 .lobby-settings .lobby-channel-input { width: 64px; padding: 0 6px; }
.lobby-v3 .lobby-settings .lobby-sim-label { margin: 0 0 0 auto; white-space: nowrap; }
.lobby-v3 .lobby-settings .lobby-sim { flex: none; }
/* 파티원 줄: 레벨 뱃지 등 각 칸의 내용을 칸 가운데에 (짧은 "Lv.87"이 왼쪽에 붙던 것, 2026-10-25) */
@media (min-width: 961px) {
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .cell-badge.lv,
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-nick,
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-job-badge,
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .seat-atk,
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .name-tags { justify-self: center; text-align: center; }
  .lobby-v2 .lobby-seat.filled:not(.editing) .seat-member > .cell-badge.lv { margin: 0; }
}

/* ===== 파티원 줄 시안 E2 (2026-10-25, 캔버스 '파티원 영역 시안' E2 + 직업색 점 + 스공 가운데) =====
   자리 | 캐릭터(1줄 닉네임·뱃지, 2줄 직업색 점·Lv·직업) | 스공(가운데: 최대 크게, 최소 작게) | 지참금 | 버튼.
   직업 그림 없이 구분선만, 5(또는 6)줄이 카드 높이를 똑같이 나눠 아래 여백 없이 채운다 */
.lobby-v3 .lobby-party { display: flex; flex-direction: column; }
.lobby-v3 .lobby-party .lobby-seats { display: flex; flex-direction: column; flex: 1 1 auto; gap: 0; height: auto; min-height: 0; overflow: visible; }
.lobby-v3 .lobby-party .lobby-seats > .seat-slot { display: flex; flex: 1 1 0; min-height: 56px; }
.lobby-v3 .e2-head, .lobby-v3 .lobby-seat.e2 { display: grid; grid-template-columns: 52px minmax(0, 1fr) 128px 92px 84px; align-items: center; column-gap: 14px; }
.lobby-v3 .e2-head { height: 22px; padding: 0 6px; font-size: 0.66rem; font-weight: 800; color: var(--muted); }
.lobby-v3 .e2-head span:first-child, .lobby-v3 .e2-head span:nth-child(3) { text-align: center; }
.lobby-v3 .e2-head span:nth-child(4) { text-align: right; }
.lobby-v3 .lobby-seat.e2 {
  position: relative; flex: 1 1 auto; width: 100%; height: auto; min-height: 0; margin: 0; padding: 0 6px; box-sizing: border-box;
  border: 0; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); border-radius: 0;
  background: none; box-shadow: none; overflow: visible;
}
.lobby-v3 .seat-slot:last-child > .lobby-seat.e2 { border-bottom: 0; }
.lobby-v3 .lobby-seat.e2::before, .lobby-v3 .lobby-seat.e2::after { display: none !important; }
.lobby-v3 .lobby-seat.e2.draggable { cursor: grab; }
.lobby-v3 .lobby-seat.e2 .e2-seat { font-size: 0.95rem; font-weight: 800; color: var(--muted); text-align: center; white-space: nowrap; }
.lobby-v3 .lobby-seat.e2 .e2-char { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.lobby-v3 .lobby-seat.e2 .e2-l1 { display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: nowrap; overflow: hidden; }
.lobby-v3 .lobby-seat.e2 .e2-nick { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.05rem; font-weight: 700; color: var(--ink); }
.lobby-v3 .lobby-seat.e2 .e2-nick.muted { flex: none; color: var(--muted); font-weight: 500; }
.lobby-v3 .lobby-seat.e2 .name-tags { display: inline-flex; gap: 4px; flex: none; }
.lobby-v3 .lobby-seat.e2 .e2-l2 { display: flex; align-items: center; gap: 6px; min-width: 0; overflow: hidden; white-space: nowrap; font-size: 0.78rem; color: var(--muted); }
.lobby-v3 .lobby-seat.e2 .e2-l2 > span { overflow: hidden; text-overflow: ellipsis; }
.lobby-v3 .lobby-seat.e2 .e2-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 999px; background: var(--seat-job, var(--muted)); }
.lobby-v3 .lobby-seat.e2 .e2-atk { display: flex; flex-direction: column; align-items: center; gap: 2px; font-variant-numeric: tabular-nums; }
.lobby-v3 .lobby-seat.e2 .e2-atk b { font-size: 0.95rem; font-weight: 800; color: #3b82f6; }
html.dark .lobby-v3 .lobby-seat.e2 .e2-atk b { color: #a5d6ff; }
.lobby-v3 .lobby-seat.e2 .e2-atk small, .lobby-v3 .lobby-seat.e2 .e2-meso small { font-size: 0.66rem; color: var(--muted); }
.lobby-v3 .lobby-seat.e2 .e2-meso { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
/* 지참금: 테두리·아이콘 없이 "+300만" 글자만 (파티장은 숫자를 눌러 바로 고친다) */
.lobby-v3 .lobby-seat.e2 .seat-meso-badge { display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 1px; width: auto; min-width: 0; height: auto; padding: 0; border: 0; background: none; box-shadow: none; font-size: 0.95rem; font-weight: 800; color: var(--ink); }
.lobby-v3 .lobby-seat.e2 .seat-meso-badge img { display: none; }
.lobby-v3 .lobby-seat.e2 .seat-meso-badge strong { font: inherit; }
.lobby-v3 .lobby-seat.e2 .seat-meso-badge em { font-style: normal; font-size: 0.8rem; color: var(--muted); }
.lobby-v3 .lobby-seat.e2 .seat-meso-badge input { width: 4.2ch; height: 24px; padding: 0 2px; border: 1px solid transparent; border-radius: 6px; background: none; color: inherit; font: inherit; text-align: right; }
.lobby-v3 .lobby-seat.e2 .seat-meso-badge input:hover, .lobby-v3 .lobby-seat.e2 .seat-meso-badge input:focus { border-color: var(--line); background: var(--surface, var(--card)); outline: none; }
.lobby-v3 .lobby-seat.e2 .meso-sign { font-style: normal; color: #f87171; }
.lobby-v3 .lobby-seat.e2 .meso-sign.plus { color: #3fb950; }
/* 버튼 칸: 같은 너비 테두리 버튼 */
.lobby-v3 .lobby-seat.e2 .e2-act { display: flex; justify-content: flex-end; gap: 4px; }
.lobby-v3 .lobby-seat.e2 .e2-act .seat-action { display: inline-flex; align-items: center; justify-content: center; width: 84px; min-width: 0; height: 30px; min-height: 0; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: none; color: var(--ink); font: inherit; font-size: 0.75rem; font-weight: 700; box-shadow: none; cursor: pointer; }
.lobby-v3 .lobby-seat.e2 .e2-act .seat-action.danger, .lobby-v3 .lobby-seat.e2 .e2-act [data-seat-action="dummy-remove"] { color: #f0a3a3; border-color: color-mix(in srgb, #f87171 45%, var(--line)); }
.lobby-v3 .lobby-seat.e2 .e2-act [data-seat-action="dummy-add"] { border-color: #58a6ff; color: #58a6ff; }
.lobby-v3 .lobby-seat.e2 .e2-act .seat-action.icon-only .ui-icon { width: 14px; height: 14px; }
.lobby-v3 .lobby-seat.e2 .e2-act .seat-save { border-color: var(--accent); color: var(--accent); }
.lobby-v3 .lobby-seat.e2.editing .e2-act .seat-action { width: 52px; }
/* 빈 자리 조건 뱃지는 1줄에 작게 */
.lobby-v3 .lobby-seat.e2 .seat-cond-badge { flex: none; height: 24px; min-height: 0; font-size: 0.72rem; }
.lobby-v3 .lobby-seat.e2 .seat-searching { color: var(--accent); }
/* 편집 줄(채우기·게스트 수정): 입력칸을 캐릭터~지참금 칸에 걸쳐 한 줄로 */
.lobby-v3 .lobby-seat.e2.editing .e2-edit { grid-column: 2 / 5; flex-direction: row; align-items: center; gap: 6px; }
.lobby-v3 .lobby-seat.e2.editing .e2-edit .seat-input { height: 30px; }
/* E2: 예전 규칙(!important grid 고정, 줄 60px, 조건 칸 절대 위치)을 덮는다 */
.lobby-page.lobby-v3 .lobby-party .lobby-seats { display: flex !important; flex-direction: column; height: auto !important; }
.lobby-page.lobby-v3 .lobby-party .lobby-seats > .seat-slot { display: flex !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 {
  display: grid !important; grid-template-columns: 52px minmax(0, 1fr) 128px 92px 84px !important; column-gap: 14px !important; align-items: center !important;
  height: auto !important; min-height: 0 !important; max-height: none !important; padding: 0 6px !important;
  background: none !important; box-shadow: none !important; border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--ink) 8%, transparent) !important; border-radius: 0 !important;
}
.lobby-page.lobby-v3 .lobby-seats .seat-slot:last-child > .lobby-seat.e2 { border-bottom: 0 !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 > * { position: static; grid-column: auto; grid-row: auto; margin: 0; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.drop-over { outline: 2px dashed #58a6ff !important; outline-offset: -2px; background: rgba(88, 166, 255, 0.08) !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 > .seat-pending { position: absolute; inset: 0; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l1.seat-extras { position: static !important; inset: auto; width: auto; height: auto; padding: 0; margin: 0; background: none; }

@media (max-width: 960px) {
  .lobby-v3 .e2-head, .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 { grid-template-columns: 34px minmax(0, 1fr) 76px 64px auto !important; column-gap: 8px !important; }
  .lobby-v3 .lobby-party .lobby-seats > .seat-slot { min-height: 64px; }
  .lobby-v3 .lobby-seat.e2 .e2-act .seat-action { width: auto; padding: 0 8px; }
}
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-char { text-align: left; align-items: stretch; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l1.seat-extras { padding: 0 !important; margin: 0 !important; justify-content: flex-start !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-nick { flex: 0 1 auto; min-width: 2.5em; }
@media (max-width: 960px) {
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 { grid-template-columns: 30px minmax(0, 1fr) 64px 56px auto !important; column-gap: 6px !important; }
  .lobby-v3 .e2-head { grid-template-columns: 30px minmax(0, 1fr) 64px 56px 60px; column-gap: 6px; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l1 { flex-wrap: wrap; row-gap: 3px; overflow: visible; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-nick { font-size: 0.95rem; }
}
@media (max-width: 960px) {
  /* 모바일: 줄 높이는 내용에 맞춘다 (카드 높이 고정이 없으므로) */
  .lobby-page.lobby-v3 .lobby-party .lobby-seats > .seat-slot { flex: none; min-height: 0; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 { padding: 10px 4px !important; min-height: 64px !important; }
}
/* 2줄째 "Lv.162 ● 히어로" (레벨 · 직업색 점 · 직업명), 글자와 점을 위아래 가운데로 */
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-char { justify-content: center; align-self: stretch; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l1, .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l2 { align-items: center; line-height: 1.3; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l2 { gap: 7px; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-lv { flex: none; font-weight: 700; color: var(--ink); }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-job { overflow: hidden; text-overflow: ellipsis; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 > * { align-self: center; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 > .e2-char { align-self: stretch; }

/* ===== 파티원 줄 시안 S1-4 (2026-10-25): 큰 자리 글자 + 아래 직업명(직업색)/매칭중/대기, 원형 직업 그림, 2줄째 레벨만 ===== */
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2, .lobby-v3 .e2-head { grid-template-columns: 72px minmax(0, 1fr) 120px 92px 84px !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-seat-box { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-seat { font-family: "Black Han Sans", "Noto Sans KR", sans-serif; font-size: 30px; font-weight: 400; line-height: 1; letter-spacing: -0.02em; color: var(--ink); white-space: nowrap; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.empty .e2-seat { color: color-mix(in srgb, var(--ink) 18%, transparent); }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-cap { max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.66rem; font-weight: 800; color: var(--muted); }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-cap.job { color: var(--seat-job, var(--muted)); }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-cap.searching { color: #58a6ff; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-char { flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-info { display: flex; flex-direction: column; justify-content: center; gap: 5px; min-width: 0; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-av { position: relative; flex: 0 0 44px; width: 44px; height: 44px; overflow: hidden; border-radius: 999px; background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 8%, transparent); }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-av img { position: absolute; width: auto; height: 66px; max-width: none; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-av.none { background: none; box-shadow: none; border: 1.5px dashed var(--line); box-sizing: border-box; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-lv { font-weight: 700; color: var(--ink); }
@media (max-width: 960px) {
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2, .lobby-v3 .e2-head { grid-template-columns: 48px minmax(0, 1fr) 64px 56px auto !important; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-seat { font-size: 22px; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-cap { max-width: 48px; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-char { gap: 8px; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-av { flex-basis: 36px; width: 36px; height: 36px; }
}
/* 긴 직업명(아크메이지(불,독) 등)이 들어가게 자리 칸 92px, 모바일은 닉네임을 줄이지 않고 뱃지가 아랫줄로 */
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2, .lobby-v3 .e2-head { grid-template-columns: 92px minmax(0, 1fr) 116px 88px 84px !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-cap { max-width: 92px; font-size: 0.64rem; }
@media (max-width: 960px) {
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2, .lobby-v3 .e2-head { grid-template-columns: 56px minmax(0, 1fr) 60px 52px auto !important; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-cap { max-width: 56px; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-nick { flex: none; max-width: 100%; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-av { flex-basis: 32px; width: 32px; height: 32px; }
}
@media (max-width: 600px) {
  /* 휴대폰: 닉네임 자리를 위해 원형 그림은 숨기고 자리 칸을 좁힌다 */
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2, .lobby-v3 .e2-head { grid-template-columns: 50px minmax(0, 1fr) 58px 50px auto !important; column-gap: 6px !important; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-av { display: none; }
  .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-cap { max-width: 50px; }
}

/* ===== 빈 자리 표시 (2026-10-25, 캔버스 '공석 3'): 매칭중은 레이더 동그라미 + 파란빛, 대기는 빗금 줄 + "빈 자리 · 대기" ===== */
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.idle { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--ink) 3%, transparent) 0 8px, transparent 8px 16px) !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.searching { background: radial-gradient(circle at 136px 50%, rgba(56, 139, 253, 0.16), transparent 150px) !important; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-radar { position: relative; flex: 0 0 44px; width: 44px; height: 44px; box-sizing: border-box; border-radius: 999px; border: 1.5px dashed var(--line); }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-radar i, .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-radar b { display: none; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.searching .e2-radar { border: 2px solid #58a6ff; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.searching .e2-radar i { display: block; position: absolute; inset: -7px; border-radius: 999px; border: 1.5px solid rgba(88, 166, 255, 0.45); animation: e2-radar 2s ease-out infinite; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.searching .e2-radar i + i { inset: -14px; border-color: rgba(88, 166, 255, 0.22); animation-delay: 0.6s; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.searching .e2-radar b { display: block; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 999px; background: #58a6ff; }
@keyframes e2-radar { 0% { transform: scale(0.85); opacity: 1; } 100% { transform: scale(1.15); opacity: 0.2; } }
@media (prefers-reduced-motion: reduce) { .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.searching .e2-radar i { animation: none; } }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-vac { font-size: 1rem; font-weight: 800; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.searching .e2-vac { color: #58a6ff; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l2.seat-extras { position: static !important; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 0 !important; margin: 0 !important; background: none; }
@media (max-width: 600px) { .lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-radar { display: none; } }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2 .e2-l2.seat-extras { justify-content: flex-start !important; align-self: stretch; width: auto !important; text-align: left; }
.lobby-page.lobby-v3 .lobby-seats .lobby-seat.e2.empty .e2-info { align-items: flex-start; }
/* [사냥터 선택] 창: 사냥터 이름 등 본문 굵게 표시를 모두 없앤다 (이름 b 의 800 규칙보다 우선, 2026-10-25) */
.mp5, .mp5 * { font-weight: 400 !important; }