:root {
  --bg-base: #090d16;
  --bg-surface: rgba(17, 24, 39, 0.78);
  --bg-elevated: rgba(30, 41, 59, 0.75);
  --bg-glass: rgba(15, 23, 42, 0.65);
  --border: rgba(148, 163, 184, 0.14);
  --border-strong: rgba(56, 189, 248, 0.35);
  --primary: #38bdf8;
  --primary-gradient: linear-gradient(135deg, #38bdf8 0%, #6366f1 100%);
  --primary-glow: rgba(56, 189, 248, 0.25);
  --success: #34d399;
  --danger: #f87171;
  --text-main: #f8fafc;
  --text-sub: #cbd5e1;
  --text-muted: #64748b;
  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 8px;
  --shadow-lg: 0 20px 50px rgba(0, 0, 0, 0.45);
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
  font-family: inherit;
}

html, body {
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  background-color: var(--bg-base);
  background-image:
    radial-gradient(at 10% 10%, rgba(56, 189, 248, 0.12) 0px, transparent 45%),
    radial-gradient(at 90% 15%, rgba(99, 102, 241, 0.12) 0px, transparent 45%),
    radial-gradient(at 50% 95%, rgba(16, 185, 129, 0.08) 0px, transparent 50%);
  color: var(--text-main);
}

.app-shell {
  display: grid;
  grid-template-columns: 300px 1fr;
  height: 100dvh;
  max-width: 1600px;
  margin: 0 auto;
  padding: 14px;
  gap: 14px;
  position: relative;
}

/* 사이드바 (채팅방 목록 + 내 프로필) */
.sidebar {
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  z-index: 30;
  transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.brand-bar {
  padding: 18px 18px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  background: var(--primary-gradient);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.15rem;
  box-shadow: 0 6px 18px var(--primary-glow);
  flex-shrink: 0;
}

.brand-text h1 {
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #f8fafc, #93c5fd);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.brand-text p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.mobile-close-btn {
  display: none;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-sub);
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
}

/* 방 개설 섹션 */
.sidebar-section {
  padding: 14px 16px 8px;
}

.section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  margin-bottom: 10px;
}

.room-count-pill {
  background: rgba(56, 189, 248, 0.14);
  color: var(--primary);
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 700;
}

.room-create-box {
  display: flex;
  gap: 6px;
}

.room-create-box input {
  flex: 1;
  min-width: 0;
  background: rgba(9, 13, 22, 0.65);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 9px 12px;
  border-radius: 10px;
  font-size: 0.84rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.room-create-box input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

.btn-primary {
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  padding: 9px 14px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.2s, opacity 0.2s;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(56, 189, 248, 0.22);
}

.btn-primary:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.35);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 채팅방 리스트 */
#room-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px 14px 14px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.room-item {
  background: rgba(15, 23, 42, 0.45);
  border: 1px solid transparent;
  border-radius: 12px;
  padding: 11px 13px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.room-item:hover {
  background: rgba(30, 41, 59, 0.7);
  border-color: var(--border);
}

.room-item.active {
  background: linear-gradient(135deg, rgba(56, 189, 248, 0.16) 0%, rgba(99, 102, 241, 0.14) 100%);
  border-color: var(--border-strong);
  box-shadow: inset 0 0 18px rgba(56, 189, 248, 0.08);
}

.room-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  font-size: 0.9rem;
}

.room-hash {
  color: var(--primary);
  margin-right: 3px;
  font-weight: 800;
}

.room-status-tag {
  font-size: 0.8125rem;
  padding: 2px 7px;
  border-radius: 999px;
  font-weight: 700;
}

.room-item.active .room-status-tag {
  background: rgba(52, 211, 153, 0.18);
  color: var(--success);
}

.room-item:not(.active) .room-status-tag {
  background: rgba(148, 163, 184, 0.12);
  color: var(--text-sub);
}

.room-item-meta {
  font-size: 0.8125rem;
  color: var(--text-muted);
}

.room-status-wrap {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.unread-badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.8125rem;
  font-weight: 800;
  padding: 1px 6px;
  border-radius: 999px;
  line-height: 1.3;
  box-shadow: 0 2px 6px rgba(239, 68, 68, 0.45);
}

/* 현재 방 온라인 참여자 칩 목록 */
.online-members-box {
  padding: 10px 14px 4px;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.online-members-list {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: 84px;
  overflow-y: auto;
}

.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(30, 41, 59, 0.72);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 3px 9px 3px 5px;
  font-size: 0.8125rem;
  color: var(--text-sub);
}

.member-chip-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 800;
  color: #fff;
}

/* 사이드바 하단 내 프로필 & 키 관리 카드 */
.profile-card {
  margin: 10px 14px 14px;
  padding: 12px;
  background: rgba(9, 13, 22, 0.72);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

.profile-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #38bdf8, #818cf8);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  color: #090d16;
  flex-shrink: 0;
}

.node-meta {
  min-width: 0;
}

.node-meta .key-label {
  font-size: 0.8125rem;
  color: var(--text-muted);
  display: block;
}

.node-meta code {
  font-size: 0.8125rem;
  color: var(--primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-danger-ghost {
  background: rgba(248, 113, 113, 0.12);
  color: var(--danger);
  border: 1px solid rgba(248, 113, 113, 0.3);
  padding: 6px 9px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}

.btn-danger-ghost:hover:not(:disabled) {
  background: var(--danger);
  color: #fff;
}

.nick-edit-row {
  display: flex;
  gap: 6px;
}

.nick-edit-row input {
  flex: 1;
  min-width: 0;
  background: rgba(17, 24, 39, 0.9);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 7px 10px;
  border-radius: 8px;
  font-size: 0.82rem;
  outline: none;
}

.nick-edit-row input:focus {
  border-color: var(--primary);
}

.btn-secondary {
  background: rgba(56, 189, 248, 0.15);
  color: var(--primary);
  border: 1px solid rgba(56, 189, 248, 0.3);
  padding: 7px 11px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.15s;
}

.btn-secondary:hover:not(:disabled) {
  background: var(--primary);
  color: #090d16;
}

/* 우측 메인 채팅 영역 */
.chat-panel {
  background: var(--bg-surface);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  min-width: 0;
  position: relative;
}

/* 상단 채팅 헤더 */
.chat-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(15, 23, 42, 0.45);
}

.chat-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.mobile-menu-btn {
  display: none;
  background: rgba(30, 41, 59, 0.8);
  border: 1px solid var(--border);
  color: var(--text-main);
  width: 38px;
  height: 38px;
  border-radius: 10px;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.1rem;
  flex-shrink: 0;
}

.room-title-box h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  display: flex;
  align-items: center;
  gap: 6px;
}

.e2ee-badge {
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(52, 211, 153, 0.16);
  color: var(--success);
  border: 1px solid rgba(52, 211, 153, 0.35);
  display: none;
}

.e2ee-badge.active {
  display: inline-flex;
  align-items: center;
  gap: 3px;
}

.room-title-box p {
  font-size: 0.8125rem;
  color: var(--text-muted);
  margin-top: 2px;
}

.chat-header-right {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.header-action-btn,
.notify-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(30, 41, 59, 0.7);
  color: var(--text-sub);
  border: 1px solid var(--border);
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}

.header-action-btn:hover,
.notify-btn:hover {
  border-color: var(--border-strong);
  color: var(--text-main);
}

.header-action-btn.active,
.notify-btn.enabled {
  background: rgba(56, 189, 248, 0.14);
  color: var(--primary);
  border-color: rgba(56, 189, 248, 0.4);
}

/* 비밀방 암호화(AES-GCM) 설정 바 */
.secret-room-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 18px;
  background: rgba(15, 23, 42, 0.78);
  border-bottom: 1px solid var(--border);
  font-size: 0.8125rem;
  color: var(--text-sub);
}

.secret-room-bar.open {
  display: flex;
}

.secret-room-bar input {
  flex: 1;
  max-width: 280px;
  background: rgba(9, 13, 22, 0.85);
  border: 1px solid var(--border);
  color: var(--text-main);
  padding: 5px 10px;
  border-radius: 8px;
  font-size: 0.8125rem;
  outline: none;
}

.secret-room-bar input:focus {
  border-color: var(--primary);
}

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.8125rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(51, 65, 85, 0.55);
  color: var(--text-sub);
  border: 1px solid var(--border);
  white-space: nowrap;
}

.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #f59e0b;
  box-shadow: 0 0 8px #f59e0b;
  animation: pulse 1.8s infinite;
}

.status-badge.online {
  background: rgba(16, 185, 129, 0.12);
  color: var(--success);
  border-color: rgba(52, 211, 153, 0.35);
}

.status-badge.online .status-dot {
  background: var(--success);
  box-shadow: 0 0 10px var(--success);
}

@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.45; transform: scale(0.88); }
}

/* 메시지 로그 영역 */
#chat-log {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}

/* 시스템 안내 멘트 (작고 흐리게, 대화에 방해되지 않도록) */
.msg.system {
  align-self: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  opacity: 0.6;
  font-size: 0.8125rem;
  font-weight: 400;
  padding: 1px 8px;
  margin: -3px 0;
  max-width: 92%;
  text-align: center;
  line-height: 1.35;
  letter-spacing: -0.01em;
  animation: fadeIn 0.2s ease-out;
}

.msg.system b {
  font-weight: 500;
  color: var(--text-sub);
}

.msg.system code {
  color: var(--text-sub);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  background: rgba(148, 163, 184, 0.08);
  padding: 0 4px;
  border-radius: 3px;
}

/* 일반 채팅 말풍선 */
.chat-row {
  display: flex;
  gap: 10px;
  max-width: 78%;
  animation: slideUp 0.18s ease-out;
}

.chat-row.me {
  align-self: flex-end;
  flex-direction: row-reverse;
}

.chat-row.peer {
  align-self: flex-start;
}

.chat-avatar {
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.82rem;
  color: #fff;
  flex-shrink: 0;
  margin-top: 2px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
}

.chat-bubble-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.chat-row.me .chat-bubble-group {
  align-items: flex-end;
}

.chat-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8125rem;
  color: var(--text-muted);
  padding: 0 4px;
}

.chat-sender-name {
  font-weight: 700;
  color: var(--text-sub);
}

.chat-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 1rem;
  line-height: 1.6;
  word-break: break-word;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.18);
}

.chat-bubble a.chat-link {
  color: #bae6fd;
  text-decoration: underline;
  text-underline-offset: 2px;
  word-break: break-all;
}

.chat-row.peer .chat-bubble a.chat-link {
  color: var(--primary);
}

.chat-bubble code.inline-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  background: rgba(0, 0, 0, 0.28);
  padding: 1px 5px;
  border-radius: 5px;
}

.chat-bubble pre.code-block {
  margin: 6px 0 2px;
  padding: 8px 10px;
  background: rgba(9, 13, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8125rem;
  overflow-x: auto;
  white-space: pre-wrap;
  color: #e2e8f0;
}

.locked-msg {
  font-size: 0.8125rem;
  color: #fcd34d;
  display: flex;
  align-items: center;
  gap: 5px;
}

.chat-row.peer .chat-bubble {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-main);
  border-top-left-radius: 4px;
}

.chat-row.me .chat-bubble {
  background: var(--primary-gradient);
  color: #ffffff;
  border-top-right-radius: 4px;
  box-shadow: 0 6px 20px rgba(56, 189, 248, 0.22);
}

/* 파일 첨부 카드 & 이미지 미리보기 */
.file-card {
  margin-top: 6px;
  background: rgba(9, 13, 22, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 210px;
}

.file-preview-img {
  max-width: 260px;
  max-height: 220px;
  border-radius: 8px;
  object-fit: cover;
  border: 1px solid var(--border);
  cursor: pointer;
}

.file-card-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.file-info {
  min-width: 0;
}

.file-info .fname {
  font-weight: 700;
  font-size: 0.84rem;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.file-info .fsize {
  font-size: 0.8125rem;
  color: rgba(255, 255, 255, 0.7);
}

.file-dl-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  text-decoration: none;
  padding: 6px 11px;
  border-radius: 8px;
  font-size: 0.8125rem;
  font-weight: 700;
  white-space: nowrap;
  transition: background 0.15s;
}

.file-dl-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

/* 드래그 앤 드롭 오버레이 */
.drop-overlay {
  position: absolute;
  inset: 12px;
  background: rgba(15, 23, 42, 0.88);
  border: 2px dashed var(--primary);
  border-radius: 18px;
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  z-index: 40;
  pointer-events: none;
}

.drop-overlay.active {
  display: flex;
}

/* 상대방 입력 중 표시줄 */
.typing-bar {
  min-height: 20px;
  padding: 3px 20px;
  font-size: 0.8125rem;
  color: var(--primary);
  background: rgba(15, 23, 42, 0.55);
  display: none;
  align-items: center;
  gap: 6px;
}

.typing-bar.active {
  display: flex;
}

/* 하단 메시지 입력바 */
.chat-composer {
  padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  background: rgba(15, 23, 42, 0.65);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: flex-end;
  gap: 10px;
}

.attach-btn {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: rgba(30, 41, 59, 0.85);
  border: 1px solid var(--border);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 1.15rem;
  transition: all 0.15s;
  flex-shrink: 0;
}

.attach-btn:hover {
  background: rgba(56, 189, 248, 0.15);
  border-color: var(--primary);
}

.composer-input-wrap {
  flex: 1;
  display: flex;
  align-items: flex-end;
  background: rgba(9, 13, 22, 0.8);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 5px 6px 5px 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.composer-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.15);
}

#msg-input {
  flex: 1;
  background: transparent;
  border: none;
  color: var(--text-main);
  font-size: 0.92rem;
  line-height: 1.45;
  padding: 6px 0;
  outline: none;
  min-width: 0;
  resize: none;
  max-height: 120px;
  overflow-y: auto;
}

#msg-input::placeholder {
  color: var(--text-muted);
}

#send-btn {
  background: var(--primary-gradient);
  color: #fff;
  border: none;
  padding: 9px 18px;
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.86rem;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s;
  flex-shrink: 0;
}

#send-btn:hover:not(:disabled) {
  box-shadow: 0 4px 14px var(--primary-glow);
}

/* 모바일 백드롭 */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(4px);
  z-index: 25;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* 모바일 반응형 드로어 처리 */
@media (max-width: 820px) {
  .app-shell {
    grid-template-columns: 1fr;
    padding: 0;
    gap: 0;
  }

  .chat-panel {
    border-radius: 0;
    border: none;
    height: 100dvh;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 290px;
    max-width: 85vw;
    border-radius: 0 18px 18px 0;
    transform: translateX(-105%);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar-backdrop.open {
    display: block;
  }

  .mobile-menu-btn,
  .mobile-close-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .chat-row {
    max-width: 88%;
  }
}

/* 절제된 표면과 일관된 글자 크기: 메시지에 시각적 우선순위를 둔다. */
html, body { background-image: none; font-size: 16px; }
:root { --text-muted: #94a3b8; --shadow-lg: 0 8px 28px rgba(0,0,0,.18); }
.brand-icon, .avatar { box-shadow: none; }
.sidebar-settings { padding: 16px; border-top: 1px solid var(--border); }
.sidebar-settings button { width: 100%; min-height: 44px; }
.chat-header-right { flex-wrap: wrap; }
.chat-row { font-size: 1rem; }
#msg-input { font-size: 1rem; line-height: 1.6; }
button, input { min-height: 40px; }
button:focus-visible, input:focus-visible, textarea:focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; }
#settings-dialog { margin: auto; width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; padding: 24px; color: var(--text-main); background: #111827; border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow-lg); }
#settings-dialog::backdrop { background: rgba(0,0,0,.65); }
.settings-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.settings-heading h2 { font-size: 1.25rem; }
.settings-section { padding-top:24px; }
.settings-section h3 { font-size:1rem; margin-bottom:12px; }
#settings-dialog .profile-card { padding:0; border:0; background:none; }
#settings-dialog .profile-top { flex-wrap:wrap; gap:12px; }
#settings-dialog .nick-edit-row { flex-wrap:wrap; }
#settings-dialog input { min-width:0; flex:1 1 180px; font-size:1rem; }
#settings-dialog label, #settings-dialog p { line-height:1.6; }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; }
#settings-dialog .secret-room-bar.open { display:flex; flex-wrap:wrap; padding:16px 0 0; background:none; border:0; }
@media (max-width: 540px) {
  .chat-header { padding:12px; flex-wrap:wrap; }
  .chat-header-right { width:100%; justify-content:space-between; }
  #settings-dialog { padding:20px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation:none !important; transition:none !important; } }

/* 보조 요소의 장식을 줄이고 설정 안내는 긴 URL도 줄바꿈한다. */
.online-members-box .section-header { margin-bottom: 2px; }
.drop-icon { font-size: 2.4rem; }
.drop-title { font-weight: 700; font-size: 1.05rem; }
#relay-settings-status { font-size: .8125rem; overflow-wrap: anywhere; }
.status-dot { animation: none; box-shadow: none; }