html { -webkit-tap-highlight-color: transparent; }
body { font-family: Pretendard, "Noto Sans KR", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
.pb-safe { padding-bottom: env(safe-area-inset-bottom); }
.no-scrollbar::-webkit-scrollbar { display: none; }
.room-type-card { display:flex; flex-direction:column; gap:.35rem; align-items:center; justify-content:center; min-height:108px; background:#fff; border:1px solid #e2e8f0; border-radius:1.4rem; box-shadow:0 1px 2px rgb(15 23 42 / .04); }
.room-type-card b { font-size:.92rem; }
.room-type-card small { color:#94a3b8; font-size:.68rem; }
.filter-chip { flex:0 0 auto; padding:.55rem .9rem; border-radius:999px; background:#fff; border:1px solid #e2e8f0; font-size:.8rem; font-weight:800; color:#64748b; }
.filter-chip.active { background:#4f46e5; color:#fff; border-color:#4f46e5; }
.room-card { background:#fff; border:1px solid #e2e8f0; border-radius:1.35rem; padding:1rem; transition:.15s; cursor:pointer; }
.room-card:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgb(15 23 42 / .06); }
.badge { display:inline-flex; align-items:center; padding:.3rem .55rem; border-radius:999px; font-size:.68rem; font-weight:900; background:#eef2ff; color:#4338ca; }
.unread-bubble { min-width:30px; height:30px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:16px; background:#f43f5e; color:#fff; font-size:.72rem; font-weight:900; position:relative; box-shadow:0 4px 10px rgb(244 63 94 / .2); }
.unread-bubble:after { content:""; position:absolute; bottom:-4px; right:6px; width:9px; height:9px; background:#f43f5e; transform:rotate(45deg); border-radius:1px; }
.input { border:1px solid #cbd5e1; border-radius:1rem; padding:.72rem .85rem; font-size:.9rem; outline:none; background:#fff; }
.input:focus { border-color:#818cf8; box-shadow:0 0 0 3px rgb(129 140 248 / .14); }
.primary-btn { background:#4f46e5; color:#fff; border-radius:1rem; padding:.68rem 1rem; font-size:.82rem; font-weight:900; }
.primary-btn:hover { background:#4338ca; }
.soft-btn { border:1px solid #e2e8f0; background:#fff; border-radius:.9rem; padding:.55rem .8rem; font-size:.75rem; font-weight:800; }
.bottom-nav { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; color:#64748b; font-size:1rem; }
.bottom-nav span { font-size:.63rem; font-weight:800; }
.modal { position:fixed; z-index:80; inset:0; background:rgb(15 23 42 / .48); padding:16px; display:flex; align-items:center; justify-content:center; }
.modal.hidden { display:none; }
.modal-card { width:100%; max-height:90vh; overflow:auto; background:#fff; border-radius:1.5rem; padding:1.25rem; box-shadow:0 24px 60px rgb(15 23 42 / .2); }
.modal-close { width:36px; height:36px; border-radius:50%; background:#f1f5f9; font-size:1.4rem; }
.form-label { display:block; font-size:.75rem; font-weight:900; color:#475569; margin:1rem 0 .45rem; }
.type-select { display:flex; min-height:82px; flex-direction:column; align-items:center; justify-content:center; gap:.25rem; border:1px solid #e2e8f0; border-radius:1rem; background:#fff; font-size:1.4rem; }
.type-select b { font-size:.75rem; }
.type-select.active { border-color:#6366f1; background:#eef2ff; color:#4338ca; box-shadow:0 0 0 2px rgb(99 102 241 / .1); }
.check-row { display:flex; gap:.7rem; align-items:flex-start; padding:.8rem; border:1px solid #e2e8f0; border-radius:1rem; }
.check-row span { display:flex; flex-direction:column; font-size:.8rem; }
.check-row small { color:#94a3b8; margin-top:.15rem; }
.stat-box { background:#f8fafc; border:1px solid #f1f5f9; border-radius:1rem; padding:.8rem; display:flex; flex-direction:column; gap:.2rem; }
.stat-box small { color:#94a3b8; font-size:.67rem; font-weight:800; }
.stat-box strong { font-size:.9rem; }
.toast { position:fixed; z-index:100; top:18px; left:50%; transform:translateX(-50%); max-width:calc(100vw - 32px); background:#0f172a; color:white; padding:.75rem 1rem; border-radius:999px; font-size:.78rem; font-weight:800; box-shadow:0 8px 30px rgb(15 23 42 / .2); }
.message-row { display:flex; gap:.5rem; align-items:flex-end; }
.message-row.mine { flex-direction:row-reverse; }
.message-avatar { width:44px; height:44px; border-radius:50%; background:#e2e8f0; display:flex; align-items:center; justify-content:center; flex:0 0 44px; font-size:.82rem; font-weight:900; color:#64748b; overflow:hidden; }
.message-bubble { max-width:min(78%, 520px); }
.message-name { font-size:.82rem; color:#64748b; margin:0 0 .25rem .2rem; font-weight:600; }
.mine .message-name { text-align:right; margin-right:.2rem; }
.message-text { padding:.65rem .8rem; border-radius:1.1rem; background:#fff; border:1px solid #e2e8f0; font-size:.86rem; line-height:1.4; word-break:break-word; }
.mine .message-text { background:#4f46e5; color:#fff; border-color:#4f46e5; }
@media (min-width:900px) {
  #roomView { max-width:900px; margin:0 auto; }
}


/* ROOM PWA 설치 배너 V1.4
   모바일에서는 JS 감지와 관계없이 기본 표시 */
.mobile-install-banner {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 10px;
  right: 10px;
  bottom: calc(76px + env(safe-area-inset-bottom));
}
.install-inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 9px;
  background: #ffffff;
  border: 1px solid #cbd5e1;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 16px 40px rgb(15 23 42 / 0.22);
}
.install-icon { width:42px; height:42px; border-radius:12px; flex:0 0 auto; }
.install-copy { min-width:0; flex:1; display:flex; flex-direction:column; line-height:1.25; }
.install-copy strong { font-size:13px; color:#0f172a; }
.install-copy span { margin-top:3px; font-size:10px; color:#64748b; }
.install-main-btn {
  flex:0 0 auto; border:0; background:#4f46e5; color:#fff; font-size:12px;
  font-weight:900; border-radius:12px; padding:10px 12px;
}
.install-x {
  flex:0 0 auto; width:26px; height:26px; border:0; border-radius:50%;
  background:#f1f5f9; color:#64748b; font-size:18px; line-height:1;
}
@media (max-width:1024px), (pointer:coarse) {
  .mobile-install-banner { display:block; }
}


/* ROOM V2.2 - 모바일 전송 안정화 */
#sendMessageBtn {
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}

#chatInput {
  font-size: 16px;
}


/* ===== ROOM V2.3 모바일 채팅 전체폭 / 키보드 밀착 ===== */
@media (max-width: 768px) {

  /* 방 안에서는 하단 HOME/LIVE/내 방/MY 메뉴를 숨깁니다.
     키보드와 입력창 사이에 생기던 큰 공백의 핵심 원인입니다. */
  body.room-mode #appShell > nav {
    display: none !important;
  }

  body.room-mode #appShell {
    padding-bottom: 0 !important;
  }

  body.room-mode main {
    max-width: none !important;
    width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-bottom: 0 !important;
  }

  body.room-mode #roomView {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 채팅 위의 기존 방 정보는 읽기 편하게 작은 여백만 유지 */
  body.room-mode #roomView > button[onclick="showHome()"] {
    margin-left: 12px;
    margin-right: 12px;
  }

  body.room-mode #roomView > .bg-white.border.border-slate-200.rounded-3xl:not(#chatPanel),
  body.room-mode #watchPanel,
  body.room-mode #ledgerPanel {
    margin-left: 8px;
    margin-right: 8px;
  }

  /* 채팅 박스 자체 제거 */
  body.room-mode #chatPanel {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    overflow: visible !important;
    background: transparent !important;
  }

  /* 채팅 제목 영역도 좌우 끝까지 */
  body.room-mode #chatPanel > div:first-child {
    padding: 10px 12px !important;
    border-top: 1px solid #f1f5f9 !important;
    background: #fff !important;
  }

  /* 메시지 영역을 넓고 길게 */
  body.room-mode #chatMessages {
    width: 100% !important;
    height: 58dvh !important;
    min-height: 340px !important;
    padding: 10px 8px !important;
    margin: 0 !important;
    background: #f8fafc !important;
    border: 0 !important;
    border-radius: 0 !important;
    overscroll-behavior-y: auto;
    overscroll-behavior-x: none;
    -webkit-overflow-scrolling: touch;
    scroll-padding-bottom: 72px;
  }

  /* 입력창은 키보드가 올라오면 바로 위에 붙습니다. */
  body.room-mode #chatComposer {
    position: sticky !important;
    bottom: 0 !important;
    z-index: 50 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom)) !important;
    gap: 6px !important;
    background: #fff !important;
    border-top: 1px solid #e2e8f0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
    border-radius: 0 !important;
  }

  body.room-mode #chatInput {
    min-width: 0 !important;
    font-size: 16px !important;
    border-radius: 22px !important;
  }

  body.room-mode #sendMessageBtn {
    flex: 0 0 auto !important;
    border-radius: 22px !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  /* 말풍선도 좌우 공간을 더 넓게 사용 */
  body.room-mode .message-bubble {
    max-width: 86% !important;
  }
}

/* 키보드가 올라와 실제 화면 높이가 낮아진 경우 */
@media (max-width: 768px) and (max-height: 700px) {
  body.room-mode #chatMessages {
    height: 43dvh !important;
    min-height: 190px !important;
  }
}


/* ROOM V2.4 즉시 전송 표시 */
.message-row.pending {
  opacity: .72;
}
.message-row.pending .message-name {
  font-size: .62rem;
}


/* ROOM V2.5 - 익명방 메시지 아바타 제거 */
body.room-mode #chatMessages .message-row .message-bubble {
  min-width: 0;
}


/* ===== ROOM V2.6 사진/파일 첨부 ===== */
.chat-attach-btn {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
  border: 0;
  border-radius: 50%;
  background: #f1f5f9;
  color: #475569;
  font-size: 28px;
  line-height: 1;
  font-weight: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  touch-action: manipulation;
}

.attachment-sheet {
  position: fixed;
  inset: 0;
  z-index: 120;
  background: rgba(15, 23, 42, .38);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.attachment-sheet.hidden {
  display: none;
}

.attachment-sheet-card {
  width: 100%;
  max-width: 560px;
  background: #fff;
  border-radius: 24px 24px 0 0;
  padding: 10px 16px calc(16px + env(safe-area-inset-bottom));
  box-shadow: 0 -14px 40px rgba(15, 23, 42, .16);
}

.attachment-sheet-handle {
  width: 42px;
  height: 5px;
  border-radius: 999px;
  background: #cbd5e1;
  margin: 2px auto 14px;
}

.attachment-choice {
  min-height: 112px;
  border: 1px solid #e2e8f0;
  border-radius: 20px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.attachment-choice-icon {
  font-size: 30px;
}

.attachment-choice b {
  font-size: 14px;
}

.attachment-choice small {
  font-size: 10px;
  color: #94a3b8;
}

.chat-image-wrap {
  position: relative;
  max-width: min(72vw, 420px);
}

.chat-image-attachment {
  display: block;
  max-width: 100%;
  max-height: 420px;
  border-radius: 16px;
  object-fit: cover;
  background: #e2e8f0;
}

.chat-upload-progress {
  position: absolute;
  left: 8px;
  right: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(15,23,42,.72);
  color: #fff;
  text-align: center;
  font-size: 10px;
  font-weight: 800;
}

.chat-file-card {
  width: min(76vw, 420px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px;
  border-radius: 16px;
  background: #fff;
  border: 1px solid #e2e8f0;
  color: #0f172a;
  text-decoration: none;
}

.mine .chat-file-card {
  background: rgba(255,255,255,.96);
}

.chat-file-icon {
  font-size: 28px;
  flex: 0 0 auto;
}

.chat-file-info {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.chat-file-info b {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
}

.chat-file-info small {
  margin-top: 2px;
  color: #94a3b8;
  font-size: 10px;
}

.chat-file-download {
  font-size: 20px;
  color: #64748b;
}

@media (max-width: 768px) {
  body.room-mode #chatComposer {
    align-items: center !important;
  }

  body.room-mode .chat-attach-btn {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }
}


/* ===== MOAON V2.9 채팅-페이지 연속 스크롤 ===== */
/* 내부 채팅 목록이 끝에 도달하면 바깥 페이지 스크롤로 자연스럽게 이어집니다. */
@media (max-width: 768px) {
  body.room-mode #chatMessages {
    overscroll-behavior-y: auto !important;
    touch-action: pan-y !important;
  }

  /* 바깥 방 화면도 세로 스크롤을 막지 않습니다. */
  body.room-mode,
  body.room-mode #appShell,
  body.room-mode #appMain,
  body.room-mode #roomView {
    overscroll-behavior-y: auto !important;
  }
}

/* MOAON V3.0.1 같이보기 버튼 */
#setWatchVideoBtn:disabled {
  opacity: .6;
  cursor: wait;
}


/* ===== MOAON V4.3 LIVE 영상 상단 고정 - 모바일 + PC 공통 ===== */
body.room-mode #watchVideoShell {
  position: relative;
  width: 100%;
  background: #000;
}

body.room-mode #watchVideoShell.watch-video-fixed {
  position: fixed !important;
  top: var(--watch-fixed-top, 64px) !important;
  left: var(--watch-fixed-left, 8px) !important;
  width: var(--watch-fixed-width, calc(100vw - 16px)) !important;
  z-index: 29 !important;
  margin-top: 0 !important;
  overflow: hidden;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .22);
}

body.room-mode #watchVideoShell.watch-video-fixed #youtubePlayer,
body.room-mode #watchVideoShell.watch-video-fixed iframe {
  width: 100% !important;
  height: 100% !important;
}

body.room-mode #watchVideoPlaceholder {
  width: 100%;
  margin-top: 1rem;
  background: transparent;
}

@media (max-width: 768px) {
  body.room-mode #watchVideoShell.watch-video-fixed {
    border-radius: 0 0 14px 14px;
  }
}

@media (min-width: 769px) {
  body.room-mode #watchVideoShell.watch-video-fixed {
    border-radius: 0 0 16px 16px;
  }
}


/* ===== MOAON V3.3 ===== */

/* 카카오 로그인 버튼: 눌림 + 로딩 */
#kakaoStartBtn {
  transition: transform .12s ease, opacity .15s ease, box-shadow .15s ease;
}

#kakaoStartBtn:active {
  transform: scale(.985);
}

#kakaoStartBtn.is-loading {
  opacity: .78;
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.08);
}

#kakaoStartBtn:disabled {
  cursor: wait;
}

.login-spinner {
  width: 19px;
  height: 19px;
  border: 2.5px solid rgba(25,25,25,.18);
  border-top-color: #191919;
  border-radius: 999px;
  animation: moaon-login-spin .72s linear infinite;
}

@keyframes moaon-login-spin {
  to { transform: rotate(360deg); }
}

/* 빈 채팅방 + 키보드:
   페이지 전체 스크롤을 유지하고 채팅공간을 강제로 좁히지 않습니다. */
@media (max-width: 768px) {
  body.room-mode.empty-chat-keyboard #chatPanel {
    scroll-margin-top: 68px;
  }

  body.room-mode.empty-chat-keyboard #chatHeader {
    position: relative;
    z-index: 2;
    background: #fff;
  }

  body.room-mode.empty-chat-keyboard #chatMessages {
    height: auto !important;
    min-height: 42dvh !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  body.room-mode.empty-chat-keyboard #chatComposer {
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    z-index: 5 !important;
  }
}


/* ===== MOAON V3.4 라이브방 / 익명 닉네임 ===== */
@media (max-width: 430px) {
  .room-type-card {
    min-height: 124px;
  }

  .type-select {
    min-height: 72px;
  }
}


/* ===== MOAON V3.5 홈 한줄 레이아웃 ===== */
@media (max-width: 430px) {
  #homeView .room-type-card {
    min-height: 112px !important;
    padding: 12px 6px !important;
  }

  #homeView .room-type-card .text-3xl {
    font-size: 1.65rem !important;
  }

  #homeView .room-type-card b {
    font-size: .95rem !important;
    white-space: nowrap;
  }

  #homeView .room-type-card small {
    font-size: .68rem !important;
    line-height: 1.15;
  }

  #homeView h1 {
    font-size: 1.9rem !important;
    line-height: 1.1 !important;
  }

  #homeView .primary-btn {
    min-width: 96px;
  }
}


/* ===== MOAON V3.6 홈 제목 한 줄 + 로그인 전체 로딩 ===== */
#homeHeroTitle {
  font-size: 1.75rem;
  line-height: 1.12;
  letter-spacing: -0.045em;
}

.login-loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(248, 250, 252, .96);
  backdrop-filter: blur(4px);
}

.login-loading-overlay.hidden {
  display: none !important;
}

.login-loading-card {
  width: min(82vw, 320px);
  padding: 30px 24px;
  border-radius: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  text-align: center;
  box-shadow: 0 18px 45px rgba(15,23,42,.10);
}

.login-loading-logo {
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 24px;
  background: #4f46e5;
  display: grid;
  place-items: center;
}

.login-loading-logo span {
  width: 30px;
  height: 30px;
  border-radius: 999px;
  background: #fff;
}

.login-loading-ring {
  width: 34px;
  height: 34px;
  margin: 0 auto 16px;
  border: 4px solid #e0e7ff;
  border-top-color: #4f46e5;
  border-radius: 999px;
  animation: moaon-full-login-spin .75s linear infinite;
}

.login-loading-card strong {
  display: block;
  font-size: 1.05rem;
  color: #0f172a;
}

.login-loading-card p {
  margin-top: 7px;
  font-size: .83rem;
  color: #94a3b8;
}

@keyframes moaon-full-login-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 430px) {
  #homeHeroTitle {
    font-size: 1.55rem !important;
    letter-spacing: -0.055em;
  }

  #homeCreateBtn {
    padding-left: 12px !important;
    padding-right: 12px !important;
    font-size: .92rem !important;
  }
}

@media (max-width: 370px) {
  #homeHeroTitle {
    font-size: 1.38rem !important;
  }

  #homeCreateBtn {
    font-size: .85rem !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
}


/* ===== MOAON V4.2 PC 채팅 스크롤 복구 ===== */
@media (min-width: 769px) {
  body.room-mode #chatPanel {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  body.room-mode #chatMessages {
    height: min(58vh, 680px) !important;
    min-height: 320px !important;
    max-height: min(58vh, 680px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior-y: auto !important;
    touch-action: auto !important;
    scrollbar-gutter: stable;
  }

  body.room-mode #chatComposer {
    flex: 0 0 auto;
    position: relative !important;
    top: auto !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
  }
}

/* PC 마우스 휠 스크롤바 가시성 */
@media (min-width: 769px) {
  body.room-mode #chatMessages::-webkit-scrollbar {
    width: 10px;
  }

  body.room-mode #chatMessages::-webkit-scrollbar-thumb {
    background: rgba(100,116,139,.35);
    border-radius: 999px;
  }

  body.room-mode #chatMessages::-webkit-scrollbar-track {
    background: transparent;
  }
}


/* ===== MOAON V4.4 미디어 + 실시간채팅 제목 고정 ===== */
body.room-mode #chatHeader.chat-header-fixed {
  position: fixed !important;
  top: var(--chat-fixed-top, 120px) !important;
  left: var(--chat-fixed-left, 8px) !important;
  width: var(--chat-fixed-width, calc(100vw - 16px)) !important;
  z-index: 28 !important;
  margin: 0 !important;
  background: #fff !important;
  border-bottom: 1px solid #e2e8f0 !important;
  box-shadow: 0 6px 16px rgba(15,23,42,.08);
}

body.room-mode #chatHeaderPlaceholder {
  width: 100%;
  background: transparent;
}

/* PC 채팅은 내부 스크롤을 유지하되,
   끝까지 내려간 뒤에는 JS wheel handoff로 전체 페이지가 이어서 움직입니다. */
@media (min-width: 769px) {
  body.room-mode #chatMessages {
    overscroll-behavior-y: auto !important;
  }
}


/* ===== MOAON V4.5 PC 채팅 입력창-하단메뉴 밀착 ===== */
@media (min-width: 769px) {
  body.room-mode #appShell {
    padding-bottom: 64px !important;
  }

  body.room-mode #appShell > main {
    padding-bottom: 0 !important;
  }

  body.room-mode #roomView {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  body.room-mode #chatPanel {
    margin-bottom: 0 !important;
  }

  body.room-mode #chatComposer {
    margin-bottom: 0 !important;
    border-bottom-left-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
  }
}


/* ===== MOAON V4.6 첫 메시지 고정영역 가림 방지 ===== */
body.room-mode #chatMessages {
  scroll-padding-top: 84px;
}

body.room-mode.watch-video-pinned #chatMessages {
  scroll-padding-top: 96px !important;
}


/* ===== MOAON V4.7 초고속 채팅 렌더링 ===== */
.message-row.message-just-added {
  opacity: .98;
  transform: translateY(2px);
}

.message-row {
  transition: opacity .08s linear, transform .08s linear;
}

.message-row.send-failed .message-bubble {
  opacity: .62;
}

.message-row.send-failed .message-name {
  color: #e11d48;
}


/* ===== MOAON V4.8 카테고리 메뉴 + Discord형 방 레일 + 방 이미지 ===== */
.home-room-layout {
  display: grid;
  grid-template-columns: 62px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.home-room-main {
  min-width: 0;
}

.my-room-rail {
  position: sticky;
  top: 84px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  max-height: calc(100vh - 180px);
  overflow-y: auto;
  overflow-x: visible;
  padding: 4px 3px 10px;
}

.room-rail-item,
.room-rail-add {
  position: relative;
  width: 52px;
  height: 52px;
  flex: 0 0 auto;
  border-radius: 18px;
  border: 2px solid transparent;
  background: #eef2ff;
  overflow: visible;
  display: grid;
  place-items: center;
  transition: .14s ease;
}

.room-rail-item:hover,
.room-rail-item:focus-visible {
  border-radius: 14px;
  border-color: #818cf8;
  transform: translateY(-1px);
}

.room-rail-item.owned {
  box-shadow: inset 3px 0 0 #4f46e5;
}

.room-rail-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

.room-rail-add {
  font-size: 1.6rem;
  font-weight: 800;
  color: #4f46e5;
  background: #fff;
  border: 1px dashed #a5b4fc;
}

.room-rail-unread {
  position: absolute;
  right: -5px;
  top: -5px;
  min-width: 20px;
  height: 20px;
  padding: 0 4px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #f43f5e;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  border: 2px solid #f8fafc;
}

.room-list-icon {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  object-fit: cover;
  border-radius: 17px;
  border: 1px solid #e2e8f0;
  background: #eef2ff;
}

.room-image-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  background: #f8fafc;
}

.room-image-preview-wrap {
  width: 74px;
  height: 74px;
  flex: 0 0 74px;
}

.room-image-preview {
  width: 74px;
  height: 74px;
  object-fit: cover;
  border-radius: 20px;
  border: 1px solid #cbd5e1;
  background: #fff;
}

@media (max-width: 600px) {
  .home-room-layout {
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 8px;
  }

  .my-room-rail {
    top: 76px;
    max-height: calc(100vh - 165px);
    gap: 8px;
  }

  .room-rail-item,
  .room-rail-add {
    width: 46px;
    height: 46px;
    border-radius: 15px;
  }

  .room-list-icon {
    width: 50px;
    height: 50px;
    flex-basis: 50px;
    border-radius: 15px;
  }

  #roomList .room-card {
    padding: .8rem;
  }
}


/* MOAON V5.2 - 방 리스트 정보 배치 / 최근 채팅 2줄 */
.room-card-topline {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  white-space: nowrap;
}

.room-card-badges {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 0;
}

.room-card-meta {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #64748b;
  font-size: 0.72rem;
  line-height: 1.25;
}

.room-card-last-message {
  margin-top: 7px;
  color: #94a3b8;
  font-size: 0.75rem;
  line-height: 1.45;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  white-space: normal;
  overflow-wrap: anywhere;
  min-height: calc(0.75rem * 1.45 * 2);
}

.room-card-last-message-empty {
  color: #cbd5e1;
}

@media (max-width: 520px) {
  .room-card-topline {
    gap: 5px;
  }

  .room-card-meta {
    font-size: 0.66rem;
  }

  .room-card-badges {
    gap: 4px;
  }
}


/* MOAON V5.3 - 모바일 방 리스트 밀도 개선 */
@media (max-width: 600px) {
  .home-room-layout {
    grid-template-columns: 46px minmax(0, 1fr) !important;
    gap: 5px !important;
  }

  .my-room-rail {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .room-rail-item,
  .room-rail-add {
    width: 42px !important;
    height: 42px !important;
    border-radius: 13px !important;
  }

  .home-room-main {
    min-width: 0 !important;
  }

  #roomList {
    gap: 10px !important;
  }

  #roomList .room-card {
    padding: 10px 9px !important;
    border-radius: 18px !important;
  }

  #roomList .room-card > div {
    gap: 7px !important;
  }

  .room-list-icon {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
    border-radius: 13px !important;
  }

  .room-card-topline {
    gap: 4px !important;
    min-width: 0 !important;
  }

  .room-card-badges {
    gap: 3px !important;
    flex: 0 0 auto !important;
  }

  .room-card-topline .badge {
    padding-left: 7px !important;
    padding-right: 7px !important;
    font-size: .68rem !important;
    line-height: 1.1 !important;
  }

  .room-card-meta {
    font-size: .64rem !important;
    letter-spacing: -0.025em !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: clip !important;
    white-space: nowrap !important;
  }

  #roomList .room-card h3 {
    margin-top: 6px !important;
    font-size: 1rem !important;
    line-height: 1.15 !important;
  }

  .room-card-last-message {
    margin-top: 5px !important;
    font-size: .72rem !important;
    line-height: 1.35 !important;
    min-height: calc(.72rem * 1.35 * 2) !important;
  }

  #roomList .room-card .self-stretch {
    min-width: 42px !important;
  }

  #roomList .room-card .text-\[10px\] {
    font-size: 9px !important;
  }
}

/* 아주 좁은 갤럭시 화면에서는 참여인원까지 한 줄에 더 잘 들어가도록 추가 축소 */
@media (max-width: 390px) {
  .home-room-layout {
    grid-template-columns: 43px minmax(0, 1fr) !important;
    gap: 4px !important;
  }

  .room-rail-item,
  .room-rail-add {
    width: 39px !important;
    height: 39px !important;
  }

  .room-list-icon {
    width: 43px !important;
    height: 43px !important;
    flex-basis: 43px !important;
  }

  #roomList .room-card {
    padding: 9px 8px !important;
  }

  #roomList .room-card > div {
    gap: 6px !important;
  }

  .room-card-topline .badge {
    padding-left: 6px !important;
    padding-right: 6px !important;
    font-size: .65rem !important;
  }

  .room-card-meta {
    font-size: .61rem !important;
  }
}


/* MOAON V5.4 - 방 리스트 정보 확대 / 좌측 간격 축소 / 최근 채팅 2개 */
.room-card-recent-list {
  margin-top: 6px;
  display: grid;
  gap: 2px;
  min-height: 2.35rem;
}

.room-card-recent-line {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #94a3b8;
  font-size: .77rem;
  line-height: 1.35;
}

.room-card-recent-list.room-card-last-message-empty {
  display: block;
  min-height: 1rem;
}

@media (max-width: 600px) {
  .home-room-layout {
    grid-template-columns: 43px minmax(0, 1fr) !important;
    gap: 2px !important;
  }

  .my-room-rail {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  .room-rail-item,
  .room-rail-add {
    width: 40px !important;
    height: 40px !important;
  }

  #roomList .room-card {
    padding: 9px 8px !important;
  }

  #roomList .room-card > div {
    gap: 5px !important;
  }

  .room-list-icon {
    width: 44px !important;
    height: 44px !important;
    flex-basis: 44px !important;
  }

  .room-card-meta {
    font-size: .70rem !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
  }

  .room-card-topline .badge {
    font-size: .67rem !important;
    padding-left: 6px !important;
    padding-right: 6px !important;
  }

  .room-card-recent-line {
    font-size: .76rem !important;
  }

  .room-card-recent-list {
    margin-top: 5px !important;
    min-height: 2.15rem !important;
  }
}

@media (max-width: 390px) {
  .home-room-layout {
    grid-template-columns: 40px minmax(0, 1fr) !important;
    gap: 1px !important;
  }

  .room-rail-item,
  .room-rail-add {
    width: 37px !important;
    height: 37px !important;
  }

  #roomList .room-card {
    padding: 8px 7px !important;
  }

  #roomList .room-card > div {
    gap: 4px !important;
  }

  .room-list-icon {
    width: 41px !important;
    height: 41px !important;
    flex-basis: 41px !important;
  }

  .room-card-meta {
    font-size: .68rem !important;
  }

  .room-card-topline .badge {
    font-size: .64rem !important;
    padding-left: 5px !important;
    padding-right: 5px !important;
  }
}


/* MOAON V5.5 - 방 생성 지역 설정 */
@media (max-width: 600px) {
  #createRoomModal #newRoomRegionProvince,
  #createRoomModal #newRoomRegionCity {
    font-size: .93rem;
  }
}


/* MOAON V5.6 - 방 리스트 지역 표시 */
.room-card-meta {
  flex: 1 1 auto;
  min-width: 0;
}

@media (max-width: 600px) {
  .room-card-topline {
    gap: 3px !important;
  }

  .room-card-meta {
    font-size: .68rem !important;
    letter-spacing: -0.035em !important;
  }
}

@media (max-width: 390px) {
  .room-card-meta {
    font-size: .65rem !important;
  }
}


/* MOAON V5.7 - 시·도 지역만 사용 + 방 리스트 우측 여백 최소화 */
@media (max-width: 600px) {
  #homeView .home-room-layout {
    margin-right: -14px !important;
    width: calc(100% + 14px) !important;
  }

  #homeView .home-room-main {
    padding-right: 1px !important;
  }

  #homeView #roomList {
    padding-right: 0 !important;
    margin-right: 0 !important;
  }

  #homeView #roomList .room-card {
    width: 100% !important;
    margin-right: 0 !important;
  }

  #createRoomModal #newRoomRegionProvince {
    font-size: .95rem !important;
  }
}

@media (max-width: 390px) {
  #homeView .home-room-layout {
    margin-right: -15px !important;
    width: calc(100% + 15px) !important;
  }
}


/* MOAON V5.8 - 방 정보 전체 표시 / 정보 글자 확대 / 장부 배지 제거 */
.room-card-content-wrap {
  position: relative;
  min-width: 0;
  width: 100%;
  padding-bottom: 18px;
}

.room-card-join-status {
  position: absolute;
  right: 0;
  bottom: 0;
  color: #94a3b8;
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
}

.room-card-unread {
  position: absolute !important;
  right: 0;
  top: 0;
}

.room-card-topline {
  width: 100%;
  min-width: 0;
}

.room-card-meta {
  display: block !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  max-width: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: nowrap !important;
  font-size: .78rem !important;
  letter-spacing: -0.025em !important;
  line-height: 1.15 !important;
}

@media (max-width: 600px) {
  #roomList .room-card {
    padding-right: 6px !important;
  }

  #roomList .room-card > div {
    gap: 4px !important;
  }

  .room-card-topline {
    gap: 4px !important;
    padding-right: 0 !important;
  }

  .room-card-meta {
    font-size: .73rem !important;
    letter-spacing: -0.035em !important;
  }

  .room-card-content-wrap {
    padding-bottom: 17px !important;
  }

  .room-card-join-status {
    right: 1px !important;
    font-size: 9px !important;
  }
}

@media (max-width: 390px) {
  .room-card-meta {
    font-size: .70rem !important;
    letter-spacing: -0.045em !important;
  }

  .room-card-topline .badge {
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
}


/* MOAON V5.9 - 회비관리 */
.fee-stat {
  border: 1px solid transparent;
}

.fee-stat-income {
  background: #ecfdf5 !important;
  border-color: #a7f3d0 !important;
}

.fee-stat-income small,
.fee-stat-income strong {
  color: #047857 !important;
}

.fee-stat-expense {
  background: #fff1f2 !important;
  border-color: #fecdd3 !important;
}

.fee-stat-expense small,
.fee-stat-expense strong {
  color: #be123c !important;
}

.fee-stat-balance {
  background: #eef2ff !important;
  border-color: #c7d2fe !important;
}

.fee-stat-balance small,
.fee-stat-balance strong {
  color: #4338ca !important;
}

.ledger-quick-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
}

.ledger-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .9rem;
}

.ledger-row-compact {
  padding: 11px 13px;
}

.ledger-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.ledger-row-icon {
  flex: 0 0 auto;
}

.ledger-row-memo {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ledger-row-date {
  margin-top: 2px;
  font-size: .68rem;
  color: #94a3b8;
}

.ledger-history-modal-card {
  max-height: min(88vh, 820px);
  overflow-y: auto;
}

.ledger-month-toolbar {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
}

.ledger-month-nav {
  width: 44px;
  height: 44px;
  padding: 0 !important;
  font-size: 1.45rem;
}

.ledger-month-title-wrap {
  text-align: center;
}

.ledger-month-title-wrap strong {
  display: block;
  font-size: 1.05rem;
}

.ledger-month-picker {
  width: 145px;
  max-width: 100%;
  margin-top: 4px;
  padding: 5px 7px;
  border: 1px solid #e2e8f0;
  border-radius: 9px;
  color: #64748b;
  font-size: .72rem;
  background: #fff;
}

.ledger-calendar-head,
.ledger-calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.ledger-calendar-head {
  margin-top: 16px;
  color: #94a3b8;
  font-size: .72rem;
  text-align: center;
}

.ledger-calendar-grid {
  gap: 4px;
  margin-top: 6px;
}

.ledger-calendar-cell {
  min-height: 58px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ledger-calendar-cell.has-items {
  background: #f8fafc;
  border-color: #cbd5e1;
}

.ledger-calendar-cell.is-today {
  outline: 2px solid #6366f1;
  outline-offset: 1px;
}

.ledger-calendar-empty {
  visibility: hidden;
}

.ledger-calendar-day {
  font-weight: 800;
  font-size: .78rem;
}

.ledger-calendar-dots {
  display: flex;
  gap: 4px;
  min-height: 7px;
}

.ledger-calendar-dots i {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  display: inline-block;
}

.income-dot {
  background: #10b981;
}

.expense-dot {
  background: #f43f5e;
}

.ledger-month-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 16px;
}

.ledger-month-summary > div {
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}

.ledger-month-summary > div:nth-child(1) {
  background: #ecfdf5;
}

.ledger-month-summary > div:nth-child(2) {
  background: #fff1f2;
}

.ledger-month-summary > div:nth-child(3) {
  background: #eef2ff;
}

.ledger-month-summary small {
  display: block;
  color: #64748b;
  font-size: .68rem;
}

.ledger-month-summary b {
  display: block;
  margin-top: 3px;
  font-size: .85rem;
}

.ledger-history-list {
  margin-top: 16px;
}

.ledger-history-day {
  scroll-margin-top: 12px;
  padding: 12px 0;
  border-top: 1px solid #e2e8f0;
}

.ledger-history-day h4 {
  margin-bottom: 8px;
  font-size: .82rem;
  font-weight: 900;
  color: #475569;
}

@media (max-width: 600px) {
  .fee-stat {
    padding: 12px 9px !important;
  }

  .fee-stat strong {
    font-size: 1rem !important;
  }

  .ledger-calendar-cell {
    min-height: 48px;
    border-radius: 9px;
  }

  .ledger-calendar-day {
    font-size: .72rem;
  }

  .ledger-history-modal-card {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
}


/* MOAON V6.0 - 회비관리 전체내역 Excel / PDF 내보내기 */
.ledger-export-open-btn {
  white-space: nowrap;
}

.ledger-export-options {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.ledger-export-option {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  padding: 14px;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  background: #fff;
  text-align: left;
}

.ledger-export-option:active {
  transform: scale(.99);
  background: #f8fafc;
}

.ledger-export-icon {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #eef2ff;
  font-size: 1.45rem;
}

.ledger-export-option b {
  display: block;
  font-size: .95rem;
}

.ledger-export-option small {
  display: block;
  margin-top: 3px;
  color: #94a3b8;
  font-size: .72rem;
}

.ledger-export-progress {
  margin-top: 14px;
  padding: 12px;
  border-radius: 13px;
  background: #f8fafc;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  color: #64748b;
  font-size: .8rem;
  font-weight: 700;
}

.ledger-export-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid #c7d2fe;
  border-top-color: #4f46e5;
  border-radius: 999px;
  animation: ledger-export-spin .7s linear infinite;
}

@keyframes ledger-export-spin {
  to { transform: rotate(360deg); }
}

/* 화면에는 보이지 않지만 PDF 생성 시 브라우저 폰트로 한글을 렌더링 */
.ledger-pdf-report {
  position: fixed;
  left: -10000px;
  top: 0;
  width: 900px;
  padding: 38px;
  background: #fff;
  color: #0f172a;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
               "Noto Sans KR", "Apple SD Gothic Neo", sans-serif;
  z-index: -1;
}

.ledger-pdf-title {
  font-size: 30px;
  font-weight: 900;
}

.ledger-pdf-room {
  margin-top: 8px;
  font-size: 20px;
  font-weight: 800;
}

.ledger-pdf-date {
  margin-top: 5px;
  color: #64748b;
  font-size: 13px;
}

.ledger-pdf-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-top: 24px;
}

.ledger-pdf-summary > div {
  padding: 16px;
  border-radius: 14px;
}

.ledger-pdf-summary .income {
  background: #ecfdf5;
}

.ledger-pdf-summary .expense {
  background: #fff1f2;
}

.ledger-pdf-summary .balance {
  background: #eef2ff;
}

.ledger-pdf-summary small,
.ledger-pdf-summary b {
  display: block;
}

.ledger-pdf-summary b {
  margin-top: 7px;
  font-size: 19px;
}

.ledger-pdf-report h3 {
  margin: 28px 0 9px;
  font-size: 17px;
  font-weight: 900;
}

.ledger-pdf-report table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: 13px;
}

.ledger-pdf-report th,
.ledger-pdf-report td {
  border: 1px solid #e2e8f0;
  padding: 9px 10px;
  text-align: left;
  vertical-align: top;
}

.ledger-pdf-report th {
  background: #f8fafc;
  font-weight: 800;
}

.ledger-pdf-report td.memo {
  word-break: break-word;
}

.ledger-pdf-report .income-text {
  color: #047857;
  font-weight: 800;
}

.ledger-pdf-report .expense-text {
  color: #be123c;
  font-weight: 800;
}

@media (max-width: 600px) {
  .ledger-export-open-btn {
    padding-left: 10px !important;
    padding-right: 10px !important;
    font-size: .78rem !important;
  }
}


/* MOAON V6.1 - 회비관리 내보내기 위치 / 내 방 왕관 / 프로필 이미지 변경 */
.fee-export-inline-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid #c7d2fe;
  background: #eef2ff;
  color: #4338ca;
  font-size: .7rem;
  font-weight: 800;
  white-space: nowrap;
}

.room-list-icon-wrap {
  position: relative;
  flex: 0 0 auto;
}

.room-owner-emoji {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  box-shadow: 0 2px 7px rgba(15,23,42,.18);
  line-height: 1;
  pointer-events: none;
}

.room-owner-emoji-card {
  right: -5px;
  bottom: -5px;
  width: 21px;
  height: 21px;
  font-size: 12px;
}

.room-owner-emoji-rail {
  right: -4px;
  bottom: -4px;
  width: 19px;
  height: 19px;
  font-size: 11px;
}

.profile-photo-change-wrap {
  position: relative;
  display: block;
  width: 86px;
  height: 86px;
  margin: 0 auto;
  border-radius: 999px;
}

.profile-photo-change-image,
.profile-photo-change-avatar {
  width: 86px;
  height: 86px;
  border-radius: 999px;
  border: 1px solid #e2e8f0;
}

.profile-photo-change-image {
  object-fit: cover;
}

.profile-photo-change-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #64748b;
  font-size: 1.8rem;
  font-weight: 900;
}

.profile-photo-camera {
  position: absolute;
  right: -2px;
  bottom: 0;
  width: 29px;
  height: 29px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #4f46e5;
  color: #fff;
  border: 3px solid #fff;
  font-size: 13px;
  box-shadow: 0 3px 8px rgba(15,23,42,.2);
}

@media (max-width: 600px) {
  .fee-export-inline-btn {
    padding: 4px 7px;
    font-size: .66rem;
  }

  .room-owner-emoji-card {
    width: 20px;
    height: 20px;
    font-size: 11px;
  }
}


/* MOAON V6.2 - 작은 방장 왕관 */
.room-owner-emoji-card {
  width: 16px !important;
  height: 16px !important;
  right: -3px !important;
  bottom: -3px !important;
  font-size: 8px !important;
  border-width: 1px !important;
}

.room-owner-emoji-rail {
  width: 14px !important;
  height: 14px !important;
  right: -2px !important;
  bottom: -2px !important;
  font-size: 7px !important;
  border-width: 1px !important;
}

/* 방 만들기 로딩 */
.create-room-spinner {
  width: 18px;
  height: 18px;
  border: 2px solid rgba(255,255,255,.42);
  border-top-color: #fff;
  border-radius: 999px;
  animation: create-room-spin .7s linear infinite;
}

@keyframes create-room-spin {
  to { transform: rotate(360deg); }
}

#createRoomSubmitBtn:disabled {
  opacity: .8;
  cursor: wait;
}

/* LIVE방 생성 미디어 선택 */
.live-media-create-box {
  margin-top: 8px;
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 17px;
  background: #f8fafc;
}

.live-media-create-box small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: .7rem;
}

.live-media-count-badge {
  flex: 0 0 auto;
  padding: 5px 8px;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font-size: .7rem;
  font-weight: 900;
}

.live-media-count-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin-top: 11px;
}

.live-media-count-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 68px;
  padding: 9px;
  border: 1px solid #cbd5e1;
  border-radius: 14px;
  background: #fff;
  color: #475569;
}

.live-media-count-btn.active {
  border: 2px solid #6366f1;
  background: #eef2ff;
  color: #4338ca;
}

.live-media-mini-grid {
  width: 38px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
}

.live-media-mini-grid i {
  aspect-ratio: 1;
  display: block;
  border-radius: 2px;
  background: #c7d2fe;
}

.live-media-count-btn.active .live-media-mini-grid i {
  background: #6366f1;
}

/* LIVE 방 내부 미디어 좌석 - 항상 한 줄 4개 */
.live-media-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  padding: 0 10px 12px;
}

.live-media-tile {
  position: relative;
  min-width: 0;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #0f172a;
  color: #fff;
}

.live-media-avatar-box {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #1e293b;
}

.live-media-avatar-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.live-media-avatar-fallback {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  font-size: clamp(1rem, 3vw, 2rem);
  font-weight: 900;
  color: #cbd5e1;
  background: #334155;
}

.live-media-name {
  padding: 5px 4px 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .66rem;
  text-align: center;
}

.live-media-tile.empty {
  min-height: 0;
  aspect-ratio: 4 / 3.6;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f8fafc;
  color: #94a3b8;
  border-style: dashed;
}

.live-media-empty-icon {
  font-size: 1rem;
  line-height: 1;
}

.live-media-tile.empty span {
  margin-top: 4px;
  font-size: .58rem;
}

.live-media-owner-crown {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
  font-size: 10px;
  line-height: 1;
}

.live-media-tile.owner {
  border-color: #818cf8;
  box-shadow: inset 0 0 0 1px #818cf8;
}

@media (max-width: 600px) {
  .live-media-grid {
    gap: 4px;
    padding-left: 7px;
    padding-right: 7px;
  }

  .live-media-name {
    font-size: .58rem;
    padding: 4px 2px;
  }

  .live-media-owner-crown {
    width: 16px;
    height: 16px;
    top: 3px;
    left: 3px;
    font-size: 8px;
  }
}


/* MOAON V6.3 - 홈 방장 왕관 추가 축소 */
.room-owner-emoji-card {
  width: 12px !important;
  height: 12px !important;
  right: -2px !important;
  bottom: -2px !important;
  font-size: 6px !important;
  border-width: 1px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.15) !important;
}

.room-owner-emoji-rail {
  width: 11px !important;
  height: 11px !important;
  right: -1px !important;
  bottom: -1px !important;
  font-size: 5.5px !important;
  border-width: 1px !important;
  box-shadow: 0 1px 3px rgba(15,23,42,.15) !important;
}


/* MOAON V6.4 - 프로필 이미지 아래 친구 초대 */
.profile-friend-invite-btn {
  width: 100%;
  margin-top: 13px;
  display: grid;
  grid-template-columns: 38px minmax(0,1fr) 20px;
  gap: 10px;
  align-items: center;
  padding: 11px 12px;
  border: 1px solid #c7d2fe;
  border-radius: 15px;
  background: #eef2ff;
  color: #3730a3;
}

.profile-friend-invite-icon {
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #fff;
  font-size: 1.1rem;
}

.profile-friend-invite-text {
  min-width: 0;
  text-align: left;
}

.profile-friend-invite-text b {
  display: block;
  font-size: .86rem;
}

.profile-friend-invite-text small {
  display: block;
  margin-top: 2px;
  color: #818cf8;
  font-size: .66rem;
}

.profile-friend-invite-arrow {
  font-size: 1.45rem;
  color: #6366f1;
}

.friend-invite-code-box {
  margin-top: 18px;
  padding: 15px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: #f8fafc;
  text-align: center;
}

.friend-invite-code-box span {
  display: block;
  color: #64748b;
  font-size: .72rem;
}

.friend-invite-code-box strong {
  display: block;
  margin-top: 6px;
  color: #4338ca;
  font-size: 1.45rem;
  letter-spacing: .12em;
}


/* MOAON V6.5 - 카카오톡 인앱 브라우저 채팅 프로필 아이콘 보정 */
.message-avatar {
  overflow: hidden;
}

.chat-message-avatar-img,
.chat-message-avatar-fallback {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

.chat-message-avatar-img {
  display: block;
  object-fit: cover;
}

.chat-message-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #e2e8f0;
  color: #64748b;
  font-size: .75rem;
  font-weight: 900;
}

.chat-message-avatar-img.hidden,
.chat-message-avatar-fallback.hidden {
  display: none !important;
}


/* MOAON V6.6 - 모임방 회원리스트 */
.member-roster-title-btn {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  text-align: left;
  color: #0f172a;
}

.member-roster-title-btn > span:first-child {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.member-roster-title-btn b {
  font-size: .92rem;
}

.member-roster-title-btn small {
  margin-top: 3px;
  color: #94a3b8;
  font-size: .68rem;
}

.member-roster-list {
  display: grid;
  gap: 7px;
}

.member-roster-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid #eef2f7;
  border-radius: 14px;
  background: #f8fafc;
}

.member-roster-person {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 9px;
}

.member-roster-avatar {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  overflow: hidden;
  border-radius: 50%;
  background: #e2e8f0;
}

.member-roster-avatar img,
.member-roster-avatar > span {
  width: 100%;
  height: 100%;
}

.member-roster-avatar img {
  display: block;
  object-fit: cover;
}

.member-roster-avatar > span {
  display: grid;
  place-items: center;
  color: #64748b;
  font-size: .72rem;
  font-weight: 900;
}

.member-roster-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .82rem;
  font-weight: 900;
}

.member-roster-person small {
  display: block;
  margin-top: 2px;
  color: #94a3b8;
  font-size: .62rem;
}

.member-roster-owner {
  margin-left: 3px;
  font-size: .65rem;
}

.member-payment-status {
  flex: 0 0 auto;
  min-width: 70px;
  padding: 6px 8px;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
}

.member-payment-status.paid {
  border: 1px solid #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}

.member-payment-status.unpaid {
  border: 1px solid #fecdd3;
  background: #fff1f2;
  color: #be123c;
}

.member-payment-status:disabled {
  opacity: .9;
}

/* LIVE 미디어 사용 여부 */
.live-media-enable-row {
  display: flex;
  align-items: flex-start;
  gap: 9px;
}

.live-media-enable-row > span {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.live-media-enable-row small {
  color: #94a3b8;
  margin-top: 2px;
  font-size: .7rem;
}

/* PC 포함: 팝업을 열었을 때 홈 화면이 움직이지 않고 팝업 자체가 스크롤되도록 */
body.modal-open {
  overflow: hidden !important;
}

.modal {
  overflow-y: auto !important;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.modal-card {
  max-height: calc(100dvh - 32px) !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
}

#createRoomModal {
  align-items: center;
}

#createRoomModal .modal-card {
  scroll-behavior: smooth;
}

@media (min-width: 768px) {
  #createRoomModal {
    padding-top: 24px;
    padding-bottom: 24px;
  }

  #createRoomModal .modal-card {
    max-height: calc(100vh - 48px) !important;
  }
}

@media (max-width: 600px) {
  .member-roster-row {
    padding: 9px;
  }

  .member-payment-status {
    min-width: 66px;
    font-size: .64rem;
  }
}


/* MOAON V6.7 - PC 방 만들기 전체 방종류 스크롤 보정 */
#createRoomModal {
  align-items: flex-start !important;
  justify-content: center !important;
  overflow-y: auto !important;
  overscroll-behavior: contain !important;
  height: 100dvh !important;
  max-height: 100dvh !important;
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

#createRoomModal > .modal-card {
  position: relative !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: calc(100dvh - 32px) !important;
  overflow-y: scroll !important;
  overflow-x: hidden !important;
  overscroll-behavior-y: contain !important;
  -webkit-overflow-scrolling: touch !important;
  scrollbar-gutter: stable !important;
}

@media (min-width: 768px) {
  #createRoomModal {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  #createRoomModal > .modal-card {
    max-height: calc(100vh - 40px) !important;
    overflow-y: scroll !important;
  }
}

body.modal-open,
html:has(body.modal-open) {
  overflow: hidden !important;
}


/* MOAON V6.8 - 회비관리 내보내기 방장 전용 */
.fee-export-inline-btn.owner-only-locked {
  opacity: .58;
  filter: grayscale(.18);
}


/* MOAON V6.9 - 방 입장 터치 피드백 / 중복 터치 방지 */
.room-card,
.room-rail-item {
  transition:
    background-color .14s ease,
    border-color .14s ease,
    opacity .14s ease,
    transform .08s ease;
}

.room-card:active,
.room-rail-item:active {
  transform: scale(.992);
}

.room-card.room-entry-selected {
  background: #eef2ff !important;
  border-color: #818cf8 !important;
  box-shadow: inset 0 0 0 1px #818cf8;
}

.room-rail-item.room-entry-selected {
  background: #eef2ff !important;
  box-shadow: 0 0 0 2px #818cf8;
}

body.room-entry-busy .room-card,
body.room-entry-busy .room-rail-item {
  pointer-events: none;
}

.room-entry-loading {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 20px;
  background: rgba(248, 250, 252, .72);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.room-entry-loading.hidden {
  display: none;
}

.room-entry-loading-card {
  width: min(260px, calc(100vw - 40px));
  padding: 24px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid #e2e8f0;
  border-radius: 24px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 18px 50px rgba(15,23,42,.14);
  text-align: center;
}

.room-entry-logo {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 17px;
  background: #4f46e5;
}

.room-entry-logo span {
  width: 21px;
  height: 21px;
  display: block;
  border-radius: 50%;
  background: #fff;
}

.room-entry-spinner {
  width: 30px;
  height: 30px;
  margin-top: 16px;
  border: 4px solid #e0e7ff;
  border-top-color: #4f46e5;
  border-radius: 50%;
  animation: room-entry-spin .72s linear infinite;
}

.room-entry-loading-card strong {
  margin-top: 13px;
  color: #172033;
  font-size: .95rem;
  font-weight: 900;
}

.room-entry-loading-card small {
  margin-top: 4px;
  color: #94a3b8;
  font-size: .72rem;
}

@keyframes room-entry-spin {
  to { transform: rotate(360deg); }
}


/* MOAON V7.0 - iPhone / Galaxy 공통 홈 Pull-to-Refresh */
html,
body {
  overscroll-behavior-y: none;
}

#homeView {
  position: relative;
}

.home-pull-refresh {
  height: 0;
  overflow: visible;
  position: relative;
  z-index: 8;
  pointer-events: none;
  opacity: 0;
  transform: translateY(-54px);
  transition:
    opacity .15s ease,
    transform .18s ease;
}

.home-pull-refresh.is-visible {
  opacity: 1;
  transform: translateY(
    calc(-54px + min(var(--pull-distance, 0px), 70px))
  );
}

.home-pull-refresh-inner {
  position: absolute;
  top: -4px;
  left: 50%;
  width: min(270px, calc(100vw - 48px));
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 7px 22px rgba(15,23,42,.10);
}

.home-pull-refresh-icon {
  width: 28px;
  height: 28px;
  flex: 0 0 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2ff;
  color: #4f46e5;
  font-size: .9rem;
  font-weight: 900;
  transition: transform .15s ease;
}

.home-pull-refresh.is-ready .home-pull-refresh-icon {
  background: #4f46e5;
  color: #fff;
}

.home-pull-refresh.is-refreshing .home-pull-refresh-icon {
  border: 3px solid #e0e7ff;
  border-top-color: #4f46e5;
  background: transparent;
  animation: home-refresh-spin .72s linear infinite;
}

.home-pull-refresh-copy {
  min-width: 0;
  text-align: left;
}

.home-pull-refresh-copy strong,
.home-pull-refresh-copy small {
  display: block;
  white-space: nowrap;
}

.home-pull-refresh-copy strong {
  color: #334155;
  font-size: .74rem;
  font-weight: 900;
}

.home-pull-refresh-copy small {
  margin-top: 1px;
  color: #94a3b8;
  font-size: .61rem;
}

@keyframes home-refresh-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 600px) {
  .home-pull-refresh-inner {
    width: min(250px, calc(100vw - 40px));
    padding: 8px 11px;
  }
}


/* MOAON V7.0.5 - 홈 방 목록 30개 단위 페이지 */
.room-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 7px;
  margin: 22px 0 4px;
  padding: 4px 0;
}
.room-pagination.hidden { display: none !important; }
.room-page-btn {
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #e2e8f0;
  border-radius: 11px;
  background: #fff;
  color: #475569;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.room-page-btn:hover:not(:disabled) {
  border-color: #a5b4fc;
  color: #4f46e5;
  background: #eef2ff;
}
.room-page-btn.active {
  border-color: #4f46e5;
  background: #4f46e5;
  color: #fff;
}
.room-page-btn:disabled { opacity: .35; cursor: default; }
.room-page-arrow { font-size: 21px; padding-bottom: 2px; }

.room-page-nav {
  min-width: 68px;
  font-size: 13px;
  padding: 0 12px;
}
.room-page-btn.active:disabled { opacity: 1; }
.room-page-dots {
  min-width: 20px;
  text-align: center;
  color: #94a3b8;
  font-weight: 800;
}
.room-page-summary {
  margin-left: 4px;
  color: #94a3b8;
  font-size: 12px;
  font-weight: 800;
}
@media (max-width: 640px) {
  .room-pagination { gap: 5px; margin-top: 18px; }
  .room-page-btn { min-width: 34px; height: 34px; padding: 0 8px; border-radius: 10px; }
  .room-page-summary { width: 100%; text-align: center; margin: 2px 0 0; }
}


/* V7.0.12 LIVE 1인 방송 개인 캠 복구 */
#watchVideoShell { position: relative; overflow: hidden; }
.solo-cam-overlay {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  width: clamp(112px, 25%, 220px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid rgba(255,255,255,.92);
  border-radius: 16px;
  background: #111827;
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
  cursor: grab;
  touch-action: none;
  user-select: none;
}
.solo-cam-overlay:active { cursor: grabbing; }
.solo-cam-overlay video { width:100%; height:100%; object-fit:cover; transform:scaleX(-1); }
.solo-cam-placeholder { position:absolute; inset:0; display:grid; place-content:center; gap:4px; text-align:center; color:#fff; background:#1e293b; font-size:.72rem; }
.solo-cam-placeholder span { font-size:1.4rem; }
.solo-cam-topbar { position:absolute; top:6px; left:6px; right:6px; display:flex; align-items:center; justify-content:space-between; pointer-events:none; }
.solo-cam-live-badge { padding:3px 6px; border-radius:999px; background:rgba(15,23,42,.72); color:#fff; font-size:.55rem; font-weight:900; }
.solo-cam-icon-btn { width:24px; height:24px; display:grid; place-items:center; border-radius:999px; background:rgba(15,23,42,.72); color:#fff; font-weight:900; pointer-events:auto; }
.solo-cam-drag-hint { position:absolute; left:50%; bottom:5px; transform:translateX(-50%); padding:2px 6px; border-radius:999px; background:rgba(15,23,42,.62); color:#fff; font-size:.5rem; white-space:nowrap; opacity:.8; }
.solo-cam-controls { display:flex; align-items:center; gap:9px; padding:10px 14px 13px; background:#fff; border-top:1px solid #e2e8f0; }
.solo-cam-controls span { color:#94a3b8; font-size:.68rem; line-height:1.35; }
@media (max-width:600px) {
  .solo-cam-overlay { width:30%; min-width:96px; right:8px; bottom:8px; border-radius:12px; }
  .solo-cam-controls { align-items:flex-start; flex-direction:column; }
}

/* MOAON V7.0.14 */
.room-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 12px;padding:4px 2px 8px}
.room-top-title{font-size:1.22rem;font-weight:900;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.room-hamburger-btn{width:42px;height:42px;flex:0 0 42px;border:1px solid #e2e8f0;border-radius:14px;background:#fff;font-size:1.3rem;font-weight:900;color:#334155}
#roomList .room-list-icon-wrap{align-self:stretch;width:96px;flex:0 0 96px}
#roomList .room-list-icon{width:96px!important;height:100%!important;min-height:112px;border-radius:14px!important;object-fit:cover}
.message-content{max-width:min(82%,560px);min-width:0}
.message-bubble-line{display:flex;align-items:flex-end;gap:6px}
.mine .message-bubble-line{flex-direction:row-reverse}
.message-content .message-bubble{max-width:100%}
.message-time{font-size:.68rem;color:#94a3b8;white-space:nowrap;padding-bottom:3px}
.message-reply-quote{margin:0 0 5px;padding:7px 9px;border-left:3px solid #818cf8;border-radius:9px;background:#eef2ff;color:#475569;font-size:.74rem;line-height:1.35;display:flex;flex-direction:column;max-width:100%}
.mine .message-reply-quote{background:rgba(255,255,255,.18);color:#fff;border-left-color:#c7d2fe}
.message-reply-quote span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:260px}
.chat-reply-preview{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:#f8fafc;border-top:1px solid #e2e8f0;color:#475569;font-size:.78rem;min-height:42px}
.chat-reply-preview.hidden{display:none}
.chat-reply-preview div{min-width:0;display:flex;align-items:center;gap:7px;flex:1;white-space:nowrap;overflow:hidden}
.chat-reply-preview b{flex:0 0 auto}
.chat-reply-preview span{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:none}
.chat-reply-preview button{flex:0 0 auto;font-size:1.2rem;color:#64748b;padding:2px 8px}
.room-info-summary + .soft-btn{margin-top:2px}
@media(max-width:640px){#roomList .room-list-icon-wrap{width:88px;flex-basis:88px}#roomList .room-list-icon{width:88px!important;min-height:88px}.message-content{max-width:80%}}


/* ===== MOAON V7.0.14 방정보/답글 안정화 ===== */
.global-room-menu-btn{width:38px;height:38px;border:1px solid #e2e8f0;border-radius:12px;background:#fff;color:#334155;font-size:1.2rem;font-weight:900;line-height:1;align-items:center;justify-content:center}
.global-room-menu-btn:not(.hidden){display:flex}
body.room-mode .room-topbar{justify-content:flex-start;padding-right:12px}
@media (max-width:768px){
  body.room-mode .chat-reply-preview{position:sticky;bottom:70px;z-index:52;width:100%;}
  body.room-mode .chat-reply-preview div{max-width:calc(100vw - 54px)}
}


/* ===== MOAON V7.0.15 채팅 최신글/LIVE/답글 안정화 ===== */
/* 답글 원문은 본인 말풍선에서도 흰색으로 날아가지 않고 닉네임+한줄요약이 확실히 보이게 */
.message-reply-quote,
.mine .message-reply-quote{
  display:flex!important;
  flex-direction:row!important;
  align-items:center;
  gap:4px;
  background:#eef2ff!important;
  color:#475569!important;
  border-left-color:#818cf8!important;
  white-space:nowrap;
  overflow:hidden;
}
.message-reply-quote b{flex:0 0 auto;color:#334155!important}
.message-reply-quote span{display:block;min-width:0;max-width:none!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#475569!important}

/* LIVE 같이보기 상단 설명을 제거했으므로 영상이 패널 상단에서 바로 시작 */
#watchPanel #watchVideoShell{margin-top:0!important}

/* 유튜브 입력/불러오기: 미디어 폭 안에서 한 줄 유지 */
#watchControls{padding:12px!important}
#watchControls > .flex{width:100%;align-items:stretch;gap:8px!important}
#youtubeUrlInput{min-width:0!important;flex:1 1 auto!important}
#setWatchVideoBtn{flex:0 0 auto!important;min-width:116px!important;white-space:nowrap!important;word-break:keep-all!important;padding-left:14px!important;padding-right:14px!important}
@media(max-width:420px){
  #watchControls{padding:10px!important}
  #watchControls > .flex{gap:6px!important}
  #setWatchVideoBtn{min-width:108px!important;padding-left:10px!important;padding-right:10px!important;font-size:.82rem!important}
  #youtubeUrlInput{font-size:16px!important;padding-left:10px!important;padding-right:10px!important}
}


/* ===== MOAON V7.0.16 방제목/답글/모바일 키보드 안정화 ===== */
/* 20자 이내 방제목은 중앙, 21자 이상은 좌측 정렬 */
body.room-mode .room-topbar{display:block!important;width:100%;padding-left:2px;padding-right:2px}
body.room-mode .room-top-title{width:100%;max-width:100%;}
body.room-mode .room-top-title.room-title-short{text-align:center!important;}
body.room-mode .room-top-title.room-title-long{text-align:left!important;}

/* 답글 인용은 별도 블럭처럼 띄우지 않고 같은 말풍선 내부 상단 영역으로 통합 */
.message-reply-quote,
.mine .message-reply-quote{
  margin:0 0 8px!important;
  padding:0 0 7px!important;
  border:0!important;
  border-bottom:1px solid rgba(100,116,139,.28)!important;
  border-radius:0!important;
  background:transparent!important;
  color:inherit!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:4px!important;
  min-width:0;
}
.mine .message-reply-quote{border-bottom-color:rgba(255,255,255,.38)!important;}
.message-reply-quote b,
.message-reply-quote span{color:inherit!important;}
.message-reply-quote b{font-weight:800;flex:0 0 auto;}
.message-reply-quote span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* 모바일 키보드가 열린 상태에서 마지막 메시지까지 스크롤 여유 확보 */
@media(max-width:768px){
  body.room-mode #chatMessages{scroll-padding-bottom:96px!important;}
}


/* ===== MOAON V7.0.17 답글 말풍선 통합 ===== */
/* 답글 인용 + 내가 쓴 답글을 하나의 말풍선 내부에서 표현 */
.message-bubble.has-reply{
  border:1px solid #e2e8f0;
  border-radius:1.1rem;
  background:#fff;
  overflow:hidden;
}
.message-bubble.has-reply .message-reply-quote{
  margin:0!important;
  padding:8px 12px 7px!important;
  border:0!important;
  border-bottom:1px solid #e2e8f0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#475569!important;
  display:flex!important;
  flex-direction:row!important;
  align-items:center!important;
  gap:4px!important;
  min-width:0;
}
.message-bubble.has-reply .message-reply-quote b,
.message-bubble.has-reply .message-reply-quote span{
  color:inherit!important;
}
.message-bubble.has-reply .message-text{
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  padding:9px 12px 10px!important;
}
.mine .message-bubble.has-reply{
  background:#4f46e5!important;
  border-color:#4f46e5!important;
  color:#fff!important;
}
.mine .message-bubble.has-reply .message-reply-quote{
  color:#fff!important;
  border-bottom-color:rgba(255,255,255,.42)!important;
}
.mine .message-bubble.has-reply .message-text{
  background:transparent!important;
  color:#fff!important;
}

/* ===== MOAON V7.0.18 내 메시지 정렬 + 프로필 방향 말풍선 꼬리 ===== */
/* 상대방 메시지는 기존 스타일을 그대로 유지하고, 내 메시지 본문만 오른쪽 정렬 */
.mine .message-text{
  text-align:right;
}

/* 일반 내 메시지: 프로필(오른쪽)을 향하는 작은 꼬리 */
.mine .message-bubble:not(.has-reply) .message-text{
  position:relative;
}
.mine .message-bubble:not(.has-reply) .message-text::after{
  content:"";
  position:absolute;
  right:-9px;
  bottom:9px;
  width:11px;
  height:14px;
  background:#4f46e5;
  clip-path:polygon(0 0, 0 100%, 100% 58%);
  pointer-events:none;
}

/* 답글 내 메시지: 인용문은 기존 왼쪽 정렬, 내 답글만 오른쪽 정렬 */
.mine .message-bubble.has-reply{
  position:relative;
  overflow:visible!important;
}
.mine .message-bubble.has-reply .message-reply-quote{
  text-align:left;
}
.mine .message-bubble.has-reply .message-text{
  text-align:right!important;
}
.mine .message-bubble.has-reply::after{
  content:"";
  position:absolute;
  right:-9px;
  bottom:9px;
  width:11px;
  height:14px;
  background:#4f46e5;
  clip-path:polygon(0 0, 0 100%, 100% 58%);
  pointer-events:none;
}

/* ===== MOAON V7.0.19 답글 구분선 여백 조정 ===== */
/* 내 답글 말풍선의 구분선은 말풍선 끝까지 닿지 않고,
   인용문 텍스트 시작점부터 내 답글 텍스트 끝점까지 표시 */
.mine .message-bubble.has-reply .message-reply-quote{
  position:relative;
  border-bottom:0!important;
}
.mine .message-bubble.has-reply .message-reply-quote::after{
  content:"";
  position:absolute;
  left:12px;
  right:12px;
  bottom:0;
  height:1px;
  background:rgba(255,255,255,.42);
  pointer-events:none;
}

/* ===== MOAON V7.0.20 상대방 말풍선 꼬리 ===== */
/* 상대방 일반 메시지: 프로필(왼쪽)을 향하는 작은 꼬리 */
.message-row:not(.mine) .message-bubble:not(.has-reply) .message-text{
  position:relative;
}
.message-row:not(.mine) .message-bubble:not(.has-reply) .message-text::before{
  content:"";
  position:absolute;
  left:-9px;
  bottom:9px;
  width:11px;
  height:14px;
  background:#fff;
  clip-path:polygon(100% 0, 100% 100%, 0 58%);
  filter:drop-shadow(-1px 0 0 #e2e8f0);
  pointer-events:none;
}

/* 상대방 답글 메시지도 동일하게 왼쪽 프로필 방향 꼬리 적용 */
.message-row:not(.mine) .message-bubble.has-reply{
  position:relative;
  overflow:visible!important;
}
.message-row:not(.mine) .message-bubble.has-reply::before{
  content:"";
  position:absolute;
  left:-9px;
  bottom:9px;
  width:11px;
  height:14px;
  background:#fff;
  clip-path:polygon(100% 0, 100% 100%, 0 58%);
  filter:drop-shadow(-1px 0 0 #e2e8f0);
  pointer-events:none;
}

/* ===== MOAON V7.0.21 LIVE 최신채팅 / 귓속말 / 홈 참여방 레일 스와이프 ===== */
/* 홈 참여방 레일은 첫 진입 시 보이고, 왼쪽 스와이프 시 접히면서 공개방 영역이 확장됩니다. */
#homeView .home-room-layout,
#homeView .my-room-rail,
#homeView .home-room-main{
  transition:grid-template-columns .18s ease,gap .18s ease,opacity .14s ease,width .18s ease;
}
#homeView .home-room-layout.rail-no-animate,
#homeView .home-room-layout.rail-no-animate .my-room-rail,
#homeView .home-room-layout.rail-no-animate .home-room-main{transition:none!important;}
#homeView .home-room-layout.rail-collapsed{
  grid-template-columns:0 minmax(0,1fr)!important;
  gap:0!important;
}
#homeView .home-room-layout.rail-collapsed .my-room-rail{
  width:0!important;
  max-width:0!important;
  min-width:0!important;
  padding-left:0!important;
  padding-right:0!important;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  overflow:hidden!important;
}
#homeView .home-room-layout.rail-collapsed .home-room-main{width:100%;min-width:0;}

/* 닉네임 클릭 귓속말 메뉴 */
.message-name.whisper-name{cursor:pointer;user-select:none;}
.message-name.whisper-name:active{opacity:.72;}
.whisper-badge{display:inline-flex;align-items:center;margin-left:4px;padding:2px 5px;border-radius:999px;background:#ede9fe;color:#6d28d9;font-size:.58rem;font-weight:900;vertical-align:middle;}
.mine .whisper-badge{background:rgba(255,255,255,.18);color:inherit;}
.chat-whisper-menu{position:fixed;z-index:120;background:#fff;border:1px solid #e2e8f0;border-radius:14px;padding:5px;box-shadow:0 12px 34px rgba(15,23,42,.18);}
.chat-whisper-menu button{width:100%;padding:10px 12px;border-radius:10px;text-align:left;font-size:.8rem;font-weight:800;color:#334155;background:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.chat-whisper-menu button:active{background:#f1f5f9;}
.chat-whisper-preview{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 12px;background:#f5f3ff;border-top:1px solid #ddd6fe;color:#5b21b6;font-size:.75rem;font-weight:800;}
.chat-whisper-preview.hidden{display:none!important;}
.chat-whisper-preview span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-whisper-preview button{flex:0 0 auto;padding:5px 9px;border:1px solid #c4b5fd;border-radius:999px;background:#fff;color:#5b21b6;font-size:.7rem;font-weight:900;}
@media(max-width:768px){
  body.room-mode.whisper-mode #chatMessages{scroll-padding-bottom:132px!important;}
  body.room-mode .chat-whisper-preview{position:sticky;bottom:70px;z-index:53;width:100%;}
}


/* ===== MOAON V7.0.22 모바일 입력창 하단 고정 / 방 공지 / 홈 전체영역 스와이프 ===== */
:root{
  --moaon-keyboard-offset: 0px;
  --moaon-composer-height: 72px;
}

.room-notice-bar{
  display:flex;align-items:center;gap:8px;margin:0 8px 12px;padding:8px 10px;
  background:#fff7ed;border:1px solid #fed7aa;border-radius:14px;color:#9a3412;
}
.room-notice-bar.hidden{display:none!important}
.room-notice-open{display:flex;align-items:center;gap:8px;min-width:0;flex:1;text-align:left}
.room-notice-label{flex:0 0 auto;font-size:.75rem;font-weight:900;color:#c2410c}
.room-notice-preview{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.78rem;font-weight:800;color:#7c2d12}
.room-notice-close{flex:0 0 30px;width:30px;height:30px;border-radius:999px;background:#fff;border:1px solid #fed7aa;color:#9a3412;font-size:1.15rem;line-height:1}
.room-notice-full-text{white-space:pre-wrap;word-break:break-word;line-height:1.65;color:#334155;background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;padding:14px}

@media (max-width:768px){
  body.room-mode #chatMessages{
    padding-bottom:calc(var(--moaon-composer-height) + 16px)!important;
    scroll-padding-bottom:calc(var(--moaon-composer-height) + 22px)!important;
  }
  body.room-mode #chatComposer{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:var(--moaon-keyboard-offset)!important;
    z-index:80!important;
    width:100%!important;
    max-width:none!important;
    padding:7px 8px calc(7px + env(safe-area-inset-bottom))!important;
    transform:translateZ(0);
  }
  body.room-mode .chat-reply-preview,
  body.room-mode .chat-whisper-preview{
    position:fixed!important;
    left:0!important;
    right:0!important;
    bottom:calc(var(--moaon-keyboard-offset) + var(--moaon-composer-height))!important;
    z-index:81!important;
    width:100%!important;
  }
  body.room-mode.reply-mode #chatMessages,
  body.room-mode.whisper-mode #chatMessages{
    padding-bottom:calc(var(--moaon-composer-height) + 58px)!important;
    scroll-padding-bottom:calc(var(--moaon-composer-height) + 64px)!important;
  }
}

@media (max-width:768px){
  body.room-mode.keyboard-open #chatComposer{padding-bottom:7px!important;}
}

/* ===== MOAON V7.0.23 요청사항 최소 수정 ===== */
/* 1) 모바일 채팅 입력창: 키보드가 닫히면 항상 화면 최하단 */
@media (max-width:768px){
  body.room-mode:not(.keyboard-open) #chatComposer{
    bottom:0!important;
  }
}

/* 2) 공지사항: 방 입장 시 상단에 고정 팝업 형태 */
body.room-mode .room-notice-bar{
  position:fixed!important;
  top:72px!important;
  left:50%!important;
  transform:translateX(-50%);
  z-index:95!important;
  width:min(calc(100vw - 24px),680px)!important;
  margin:0!important;
  box-shadow:0 10px 28px rgba(15,23,42,.16);
  background:#fff7ed!important;
}
@media (max-width:768px){
  body.room-mode .room-notice-bar{top:70px!important;width:calc(100vw - 16px)!important;}
}

/* 3/4) 귓속말 대상이 항상 명확하게 보이도록 */
.message-name{display:flex;align-items:center;gap:5px;flex-wrap:wrap;}
.mine .message-name{justify-content:flex-end;}
.whisper-badge{
  margin-left:0!important;
  padding:2px 6px!important;
  font-size:.62rem!important;
  line-height:1.2;
  max-width:190px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.message-avatar.whisper-avatar{cursor:pointer;}
.message-avatar.whisper-avatar:active{opacity:.72;}

/* 5/6) 방 정보 참여자: 한 줄 2명, 클릭 시 1:1 채팅 */
.room-info-members-wrap{padding:12px;border:1px solid #e2e8f0;border-radius:16px;background:#fff;}
.room-info-members-title{font-size:.82rem;font-weight:900;color:#334155;margin-bottom:9px;}
.room-info-members-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;}
.room-info-members-loading{grid-column:1/-1;padding:10px;text-align:center;color:#94a3b8;font-size:.72rem;}
.room-info-member-btn{min-width:0;padding:9px 8px;border:1px solid #e2e8f0;border-radius:12px;background:#f8fafc;text-align:left;}
.room-info-member-btn span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.76rem;font-weight:900;color:#334155;}
.room-info-member-btn small{display:block;margin-top:3px;color:#6366f1;font-size:.6rem;font-weight:800;}
.room-info-member-btn.is-me{opacity:.65;cursor:default;}
.room-info-member-btn.is-me small{color:#94a3b8;}

/* 7) 모임방 회원리스트: 한 줄 2명 */
.member-roster-list{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:stretch;}
.member-roster-row{min-width:0;flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;padding:9px!important;}
.member-roster-person{width:100%;min-width:0;}
.member-roster-person > .min-w-0{min-width:0;}
.member-payment-status{width:100%;min-width:0!important;margin-top:auto;font-size:.66rem;}
@media(max-width:360px){
  .member-roster-avatar{width:30px;height:30px;flex-basis:30px;}
  .member-roster-name{font-size:.74rem;}
}

/* 9/10) 홈 공개방 카드: 등록 사진은 상단 왼쪽의 약 2줄 높이만 사용, 설명은 하단 */
#roomList .room-card{padding:11px!important;}
#roomList .room-card-main{display:flex;align-items:flex-start;gap:10px;min-width:0;width:100%;}
#roomList .room-list-icon-wrap{
  width:72px!important;
  height:72px!important;
  min-width:72px!important;
  flex:0 0 72px!important;
  align-self:flex-start!important;
  position:relative;
}
#roomList .room-list-icon{
  width:72px!important;
  height:72px!important;
  min-height:72px!important;
  max-height:72px!important;
  border-radius:13px!important;
  object-fit:cover!important;
}
#roomList .room-card-description{
  width:100%;
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid #eef2f7;
  color:#64748b;
  font-size:.72rem;
  line-height:1.45;
  text-align:left;
  word-break:break-word;
}
#roomList .room-card-content-wrap{padding-bottom:16px!important;}
.room-description-input{resize:none;min-height:84px;line-height:1.5;}
.room-description-counter{text-align:right;margin-top:4px;color:#94a3b8;font-size:.66rem;}

@media(max-width:390px){
  #roomList .room-list-icon-wrap{width:66px!important;height:66px!important;min-width:66px!important;flex-basis:66px!important;}
  #roomList .room-list-icon{width:66px!important;height:66px!important;min-height:66px!important;max-height:66px!important;}
}


/* ===== MOAON V7.0.24 귓속말 전송 후 마지막 메시지 가림 방지 ===== */
:root{--moaon-chat-bottom-space:96px;}
@media (max-width:768px){
  body.room-mode #chatMessages{
    padding-bottom:var(--moaon-chat-bottom-space)!important;
    scroll-padding-bottom:var(--moaon-chat-bottom-space)!important;
  }
}


/* ===== MOAON V7.0.25 전송 위치와 무관하게 마지막 메시지 강제 노출 ===== */

/* ===== MOAON V7.0.26 전송 즉시 마지막 메시지 화면 고정 ===== */

/* ===== MOAON V7.0.28 키보드 활성 중 최신 채팅 항상 입력창 바로 위 ===== */
@media (max-width:768px){
  /* 내용이 짧을 때 메시지를 입력창 쪽(하단)에 자연스럽게 붙입니다. */
  body.room-mode #chatMessages{
    display:flex!important;
    flex-direction:column!important;
  }
  body.room-mode #chatMessages::before{
    content:"";
    flex:1 0 auto;
    min-height:0;
  }
  body.room-mode #chatMessages > .message-row,
  body.room-mode #chatMessages > p{
    flex:0 0 auto;
  }

  /* 키보드가 열린 동안에는 메시지 영역을 채팅 제목과 하단 입력 UI 사이에 직접 고정합니다.
     이렇게 하면 페이지가 어느 스크롤 위치에 있어도 마지막 메시지가 키보드 뒤로 내려가지 않습니다. */
  body.room-mode.chat-typing-viewport #chatMessages{
    position:fixed!important;
    z-index:72!important;
    left:0!important;
    right:0!important;
    top:var(--moaon-chat-typing-top,68px)!important;
    bottom:calc(var(--moaon-keyboard-offset) + var(--moaon-composer-height) + var(--moaon-chat-preview-height,0px))!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 8px 10px!important;
    scroll-padding-bottom:10px!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    background:#f8fafc!important;
  }

  body.room-mode.chat-typing-viewport #chatMessages::before{
    flex:1 0 auto;
  }
}


/* ===== MOAON V7.0.28 방 유형별 채팅 레이아웃 분리 ===== */
@media (max-width:768px){
  /* 모임방/라이브방은 상단 기능 블록을 DOM 흐름에 그대로 둡니다.
     키보드가 열려도 채팅영역을 fixed overlay로 만들지 않습니다. */
  body.room-mode.chat-typing-sectioned #chatMessages{
    position:relative!important;
    inset:auto!important;
    z-index:auto!important;
    width:100%!important;
    height:58dvh!important;
    min-height:340px!important;
    max-height:none!important;
    margin:0!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    padding-bottom:var(--moaon-chat-bottom-space)!important;
    scroll-padding-bottom:var(--moaon-chat-bottom-space)!important;
  }

  body.room-mode.chat-typing-sectioned #chatMessages::before{
    flex:1 0 auto;
  }
}

/* ===== MOAON V7.0.29 모임방/라이브방 모바일 채팅 집중 모드 ===== */
@media (max-width:768px){
  /* 키보드가 열린 동안만 채팅 패널 자체를 화면에 띄웁니다.
     회비관리/회원리스트/미디어는 DOM에 그대로 남아 있고 키보드가 닫히면 즉시 복귀합니다. */
  body.room-mode.chat-focus-sectioned #chatPanel{
    position:fixed!important;
    z-index:72!important;
    left:0!important;
    right:0!important;
    top:70px!important;
    bottom:calc(var(--moaon-keyboard-offset) + var(--moaon-composer-height) + var(--moaon-chat-preview-height,0px))!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    margin:0!important;
    border-radius:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    background:#fff!important;
  }
  body.room-mode.chat-focus-sectioned #chatHeader{
    position:relative!important;
    flex:0 0 auto!important;
    background:#fff!important;
    z-index:1!important;
  }
  body.room-mode.chat-focus-sectioned #chatMessages{
    position:relative!important;
    inset:auto!important;
    z-index:auto!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 8px 12px!important;
    scroll-padding-bottom:12px!important;
    overflow-y:auto!important;
    -webkit-overflow-scrolling:touch!important;
    overscroll-behavior-y:contain!important;
    background:#f8fafc!important;
  }
  body.room-mode.chat-focus-sectioned #chatMessages::before{
    flex:1 0 auto!important;
  }
}

/* ===== MOAON V7.0.32 모임방/라이브방 키보드 집중모드 위치 수정 ===== */
@media (max-width:768px){
  /* 모임방/라이브방에서 키보드가 열린 동안에는 visualViewport의 실제 좌표를 사용합니다.
     기존 keyboard-offset을 bottom에 더하지 않아 삼성/안드로이드에서 입력창이
     화면 중간으로 이중 상승하는 현상을 방지합니다. */
  body.room-mode.chat-focus-sectioned #chatComposer{
    top:var(--moaon-sectioned-composer-top)!important;
    bottom:auto!important;
  }

  body.room-mode.chat-focus-sectioned #chatPanel{
    top:var(--moaon-sectioned-focus-top,0px)!important;
    bottom:auto!important;
    height:calc(var(--moaon-sectioned-focus-bottom,100vh) - var(--moaon-sectioned-focus-top,0px))!important;
  }

  body.room-mode.chat-focus-sectioned .chat-reply-preview,
  body.room-mode.chat-focus-sectioned .chat-whisper-preview{
    top:calc(var(--moaon-sectioned-composer-top) - var(--moaon-chat-preview-height,0px))!important;
    bottom:auto!important;
  }
}

/* MOAON V7.0.34 - 회비 저장 중 중복터치 방지 */
.ledger-help-inline-btn,
.fee-export-inline-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:5px 9px;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:.68rem;
  font-weight:900;
  white-space:nowrap;
}

.ledger-feature-card {
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#f8fafc;
  padding:13px;
}

.ledger-feature-card-head,
.ledger-goal-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.ledger-feature-card-head > div {
  min-width:0;
}

.ledger-feature-card-head b,
.ledger-goal-head b {
  display:block;
  color:#0f172a;
  font-size:.84rem;
  font-weight:900;
}

.ledger-feature-card-head small {
  display:block;
  margin-top:3px;
  color:#64748b;
  font-size:.68rem;
}

.ledger-mini-stats {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:11px;
}

.ledger-mini-stats > div {
  min-width:0;
  padding:9px 6px;
  border-radius:12px;
  background:#fff;
  text-align:center;
}

.ledger-mini-stats small,
.ledger-mini-stats b {
  display:block;
}

.ledger-mini-stats small {
  color:#94a3b8;
  font-size:.62rem;
}

.ledger-mini-stats b {
  margin-top:3px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#334155;
  font-size:.78rem;
}

.ledger-feature-actions {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:10px;
}

.ledger-feature-actions .soft-btn,
.ledger-quick-actions .soft-btn {
  min-height:34px;
  padding:7px 10px;
  font-size:.7rem;
}

.ledger-goal-card {
  background:#f5f3ff;
  border-color:#ddd6fe;
}

.ledger-goal-head span {
  color:#6d28d9;
  font-size:.72rem;
  font-weight:900;
}

.ledger-goal-track {
  height:8px;
  margin-top:10px;
  overflow:hidden;
  border-radius:999px;
  background:#e2e8f0;
}

.ledger-goal-track i {
  display:block;
  width:0;
  height:100%;
  border-radius:inherit;
  background:#6366f1;
  transition:width .2s ease;
}

.ledger-goal-card > small {
  display:block;
  margin-top:6px;
  color:#64748b;
  font-size:.66rem;
  font-weight:800;
}

.ledger-row-meta {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-top:3px;
  color:#94a3b8;
  font-size:.64rem;
}

.ledger-row-category,
.ledger-row-paidby {
  padding:2px 5px;
  border-radius:999px;
  background:#eef2ff;
  color:#4f46e5;
  font-weight:800;
}

.ledger-row-note {
  margin-top:5px;
  color:#64748b;
  font-size:.68rem;
  line-height:1.45;
  white-space:normal;
}

.ledger-receipt-link {
  text-decoration:none;
}

.ledger-row-right {
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  gap:4px;
}

.ledger-row-edit {
  padding:3px 7px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#64748b;
  font-size:.6rem;
  font-weight:800;
}

.ledger-help-modal-card {
  max-height:min(88vh,860px);
  overflow-y:auto;
}

.ledger-help-intro {
  margin-top:14px;
  padding:12px;
  border-radius:14px;
  background:#eef2ff;
  color:#4338ca;
  font-size:.8rem;
  line-height:1.55;
  font-weight:700;
}

.ledger-help-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px;
  margin-top:12px;
}

.ledger-help-grid section {
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:14px;
  background:#fff;
}

.ledger-help-grid b {
  display:block;
  color:#1e293b;
  font-size:.8rem;
}

.ledger-help-grid p {
  margin-top:5px;
  color:#64748b;
  font-size:.7rem;
  line-height:1.5;
}

.ledger-help-note {
  margin-top:12px;
  color:#94a3b8;
  font-size:.66rem;
  line-height:1.5;
}

.ledger-settings-divider {
  height:1px;
  margin:17px 0 3px;
  background:#e2e8f0;
}

.ledger-manager-list {
  display:grid;
  gap:7px;
}

.ledger-manager-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  color:#334155;
  font-size:.78rem;
  font-weight:800;
}

.ledger-manager-row input {
  width:19px;
  height:19px;
}

.ledger-existing-receipt {
  margin-top:7px;
  font-size:.72rem;
  font-weight:800;
}

.ledger-existing-receipt a {
  color:#4f46e5;
}

.ledger-due-status-preview {
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:#f8fafc;
  color:#475569;
  font-size:.75rem;
  font-weight:800;
}

.member-roster-manager {
  margin-left:4px;
  padding:2px 5px;
  border-radius:999px;
  background:#ede9fe;
  color:#6d28d9;
  font-size:.55rem;
  vertical-align:middle;
}

.member-roster-ledger-actions {
  display:grid;
  grid-template-columns:1fr;
  gap:5px;
  width:100%;
  margin-top:auto;
}

.member-history-btn {
  width:100%;
  min-height:28px;
  padding:5px 7px;
  border:1px solid #cbd5e1;
  border-radius:999px;
  background:#fff;
  color:#475569;
  font-size:.62rem;
  font-weight:900;
}

.member-payment-status.partial {
  border:1px solid #fde68a;
  background:#fffbeb;
  color:#b45309;
}

.ledger-member-history-summary {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
}

.ledger-member-history-summary > div {
  padding:11px 7px;
  border-radius:12px;
  background:#f8fafc;
  text-align:center;
}

.ledger-member-history-summary small,
.ledger-member-history-summary b {
  display:block;
}

.ledger-member-history-summary small {
  color:#94a3b8;
  font-size:.62rem;
}

.ledger-member-history-summary b {
  margin-top:4px;
  color:#334155;
  font-size:.8rem;
}

.ledger-member-history-list {
  display:grid;
  gap:7px;
}

.ledger-member-history-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 11px;
  border:1px solid #e2e8f0;
  border-radius:12px;
}

.ledger-member-history-row b,
.ledger-member-history-row small {
  display:block;
}

.ledger-member-history-row b {
  color:#334155;
  font-size:.76rem;
}

.ledger-member-history-row small {
  margin-top:2px;
  color:#94a3b8;
  font-size:.62rem;
}

.ledger-member-history-row > span {
  flex:0 0 auto;
  font-size:.68rem;
  font-weight:900;
}

.due-paid { color:#047857 !important; }
.due-partial { color:#b45309 !important; }
.due-unpaid { color:#be123c !important; }
.due-none { color:#94a3b8 !important; }

.ledger-report-toolbar {
  display:grid;
  grid-template-columns:44px minmax(0,1fr) 44px;
  gap:8px;
  margin-top:15px;
}

.ledger-report-toolbar .input {
  text-align:center;
}

.ledger-report-title {
  margin-top:14px;
  color:#1e293b;
  font-size:.9rem;
  font-weight:900;
}

.ledger-report-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
}

.ledger-report-grid > div {
  padding:10px 6px;
  border-radius:12px;
  background:#f8fafc;
  text-align:center;
}

.ledger-report-grid small,
.ledger-report-grid b {
  display:block;
}

.ledger-report-grid small {
  color:#94a3b8;
  font-size:.61rem;
}

.ledger-report-grid b {
  margin-top:3px;
  color:#334155;
  font-size:.77rem;
}

.ledger-report-status {
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-top:10px;
}

.ledger-report-status span {
  padding:5px 8px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.64rem;
  font-weight:800;
}

.ledger-report-list {
  display:grid;
  gap:6px;
  margin-top:12px;
  max-height:34vh;
  overflow-y:auto;
}

.ledger-report-list > div {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  border-bottom:1px solid #f1f5f9;
  font-size:.72rem;
}

.ledger-audit-list {
  display:grid;
  gap:8px;
  max-height:58vh;
  overflow-y:auto;
}

.ledger-audit-row {
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:11px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
}

.ledger-audit-row b {
  display:block;
  color:#334155;
  font-size:.76rem;
}

.ledger-audit-row p {
  margin-top:3px;
  color:#64748b;
  font-size:.68rem;
  line-height:1.45;
}

.ledger-audit-row > small {
  color:#94a3b8;
  font-size:.58rem;
  white-space:nowrap;
}

@media (max-width: 600px) {
  .ledger-panel-head {
    align-items:flex-start !important;
  }

  .ledger-help-grid {
    grid-template-columns:1fr;
  }

  .ledger-feature-actions {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ledger-quick-actions {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
  }

  .ledger-quick-actions .soft-btn {
    min-width:0;
    padding-left:5px;
    padding-right:5px;
  }

  .ledger-report-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .ledger-audit-row {
    grid-template-columns:1fr;
  }

  .ledger-audit-row > small {
    white-space:normal;
  }
}


/* V7.0.34 - 회원 회비 저장 중 로딩 */
.ledger-due-modal-card{position:relative;}
.ledger-save-loading{
  position:absolute;
  inset:0;
  z-index:30;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
  border-radius:inherit;
}
.ledger-save-loading.hidden{display:none!important;}
.ledger-save-loading-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(15,23,42,.14);
  color:#334155;
  font-size:.95rem;
}
.ledger-save-spinner{
  width:24px;
  height:24px;
  border:3px solid #e2e8f0;
  border-top-color:#4f46e5;
  border-radius:50%;
  animation:ledgerSaveSpin .7s linear infinite;
  flex:0 0 auto;
}
#ledgerDueSaveBtn:disabled{opacity:.65;cursor:wait;}
@keyframes ledgerSaveSpin{to{transform:rotate(360deg);}}


/* ===== MOAON V7.0.36 요청사항 ===== */
@media (max-width:768px){
  body.room-mode.simple-room-chat-fit:not(.keyboard-open)[data-room-type="chat"] #chatMessages,
  body.room-mode.simple-room-chat-fit:not(.keyboard-open)[data-room-type="anonymous"] #chatMessages{
    height:var(--moaon-simple-chat-height,58dvh)!important;
    min-height:280px!important;
    max-height:var(--moaon-simple-chat-height,58dvh)!important;
  }
}
.group-management-toggle-bar{margin:0 8px 10px;display:flex;justify-content:center;}
.group-management-toggle-bar.hidden{display:none!important;}
.group-management-toggle-btn{width:100%;min-height:42px;border:1px solid #dbe3ee;border-radius:14px;background:#fff;color:#475569;font-size:.78rem;font-weight:900;box-shadow:0 1px 2px rgba(15,23,42,.04);}
body.room-mode.group-management-collapsed[data-room-type="group"] #ledgerPanel,
body.room-mode.group-management-collapsed[data-room-type="group"] #memberRosterPanel{display:none!important;}
.ledger-row-fee-actions{display:flex;gap:4px;justify-content:flex-end;flex-wrap:wrap;}
.ledger-row-delete{padding:3px 7px;border:1px solid #fecaca;border-radius:999px;background:#fff;color:#e11d48;font-size:.6rem;font-weight:800;}

/* ===== MOAON V7.0.37 요청사항 ===== */
/* 모든 방의 '실시간 채팅 / 내 닉네임 / 인원수' 라인은 화면에서 완전히 제거하고
   기존 스크롤 계산에서 참조하는 위치 앵커만 0px 높이로 유지합니다. */
.chat-scroll-anchor{
  display:block!important;
  height:0!important;
  min-height:0!important;
  max-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  overflow:hidden!important;
  visibility:hidden!important;
  pointer-events:none!important;
}

/* 내 프로필: 내가 만든방 / 참여한방 구분 */
.profile-room-section-wrap{margin-top:18px;text-align:left;display:grid;gap:10px;}
.profile-room-section{border:1px solid #e2e8f0;border-radius:18px;background:#f8fafc;padding:12px;}
.profile-room-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;}
.profile-room-section-head b{font-size:.82rem;font-weight:900;color:#334155;}
.profile-room-section-head span{min-width:24px;height:24px;padding:0 7px;border-radius:999px;background:#eef2ff;color:#4f46e5;display:inline-flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:900;}
.profile-room-list{display:grid;gap:6px;max-height:150px;overflow-y:auto;overscroll-behavior:contain;}
.profile-room-item{display:flex;align-items:center;padding:9px 10px;border:1px solid #e2e8f0;border-radius:13px;background:#fff;}
.profile-room-item-main{min-width:0;display:grid;gap:2px;}
.profile-room-item-main b{font-size:.78rem;font-weight:900;color:#1e293b;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.profile-room-item-main small{font-size:.65rem;color:#94a3b8;}
.profile-room-empty{padding:10px 4px;text-align:center;font-size:.7rem;color:#94a3b8;}

/* 모임방 첫 입장: 관리영역이 접힌 상태에서는 메시지가 적어도 마지막 글을
   입력창 바로 위쪽에 붙입니다. 메시지가 많아지면 기존 내부 스크롤이 그대로 동작합니다. */
@media (max-width:768px){
  body.room-mode.group-management-collapsed[data-room-type="group"] #chatMessages{
    display:flex!important;
    flex-direction:column!important;
  }
  body.room-mode.group-management-collapsed[data-room-type="group"] #chatMessages > .message-row:first-child,
  body.room-mode.group-management-collapsed[data-room-type="group"] #chatMessages > p:first-child{
    margin-top:auto!important;
  }
}


/* ===== MOAON V7.0.38 요청사항 ===== */
/* 방 제목 옆 현재 참여인원 */
.room-top-member-count{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:7px;
  padding:3px 7px;
  border-radius:999px;
  background:#f1f5f9;
  color:#64748b;
  font-size:.62rem;
  font-weight:900;
  vertical-align:middle;
  transform:translateY(-1px);
}

/* 모임방 관리영역 접힘 상태: 실제 입력창 상단까지 채팅 높이를 채워
   첫 입장부터 마지막 메시지가 입력창 바로 위에 오도록 합니다. */
@media (max-width:768px){
  body.room-mode.group-room-chat-fit.group-management-collapsed[data-room-type="group"] #chatMessages{
    height:var(--moaon-group-chat-height,58dvh)!important;
    min-height:280px!important;
    max-height:var(--moaon-group-chat-height,58dvh)!important;
    padding-bottom:10px!important;
    scroll-padding-bottom:10px!important;
  }
}

/* 공개 모임방 미참여 사용자는 채팅 읽기만 가능 */
body.room-mode.room-preview-mode #chatComposer.preview-hidden{
  display:none!important;
}
body.room-mode.room-preview-mode #chatReplyPreview,
body.room-mode.room-preview-mode #chatWhisperPreview{
  display:none!important;
}
body.room-mode.room-preview-mode #chatMessages .message-name,
body.room-mode.room-preview-mode #chatMessages .message-avatar,
body.room-mode.room-preview-mode #chatMessages .message-bubble{
  cursor:default!important;
}

.public-group-join-bar{
  position:fixed;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  z-index:86;
  width:min(100%,720px);
  min-height:72px;
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 10px calc(9px + env(safe-area-inset-bottom));
  border-top:1px solid #e2e8f0;
  background:rgba(255,255,255,.98);
  box-shadow:0 -8px 24px rgba(15,23,42,.08);
}
.public-group-join-bar.hidden{display:none!important;}
.public-group-join-copy{min-width:0;flex:1;display:grid;gap:2px;}
.public-group-join-copy b{font-size:.76rem;font-weight:900;color:#334155;}
.public-group-join-copy small{font-size:.64rem;line-height:1.35;color:#94a3b8;}
#publicGroupJoinBtn{flex:0 0 auto;min-width:94px;white-space:nowrap;}
#publicGroupJoinBtn:disabled{opacity:.6;cursor:wait;}

.room-join-requests-wrap{
  padding:12px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
}
.room-join-request-list{display:grid;gap:7px;}
.room-join-request-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:13px;
  background:#f8fafc;
}
.room-join-request-person{min-width:0;display:grid;gap:2px;}
.room-join-request-person b{font-size:.76rem;font-weight:900;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room-join-request-person small{font-size:.62rem;color:#94a3b8;}
.room-join-request-actions{display:flex;gap:5px;flex:0 0 auto;}
.room-join-approve-btn,.room-join-reject-btn{
  padding:6px 9px;
  border-radius:999px;
  font-size:.66rem;
  font-weight:900;
}
.room-join-approve-btn{background:#4f46e5;color:#fff;}
.room-join-reject-btn{background:#fff;color:#e11d48;border:1px solid #fecdd3;}

/* ===== MOAON V7.0.39 요청사항 ===== */
/* 일반/익명방: 키보드가 닫힌 뒤 마지막 메시지를 고정 입력창 바로 위에 유지 */
@media (max-width:768px){
  body.room-mode.simple-room-chat-fit:not(.keyboard-open)[data-room-type="chat"] #chatMessages,
  body.room-mode.simple-room-chat-fit:not(.keyboard-open)[data-room-type="anonymous"] #chatMessages{
    padding-bottom:10px!important;
    scroll-padding-bottom:10px!important;
  }
}

/* 내 프로필 방 목록: 클릭 가능한 이동 항목 */
.profile-room-item{
  width:100%;
  text-align:left;
  cursor:pointer;
  justify-content:space-between;
  gap:8px;
}
.profile-room-item:active{background:#eef2ff;}
.profile-room-item-arrow{flex:0 0 auto;color:#94a3b8;font-size:1.2rem;font-weight:900;line-height:1;}

/* ===== MOAON V7.0.40 공개방 대표이미지 + 방 프로필 이미지 ===== */
.room-cover-picker{display:flex;flex-direction:column;gap:10px;margin-bottom:4px;}
.room-cover-preview-wrap{position:relative;width:100%;aspect-ratio:16/9;border:1px dashed #cbd5e1;border-radius:16px;overflow:hidden;background:#f8fafc;display:grid;place-items:center;}
.room-cover-preview{width:100%;height:100%;object-fit:cover;display:block;}
.room-cover-empty{color:#94a3b8;font-size:.78rem;font-weight:700;}
.room-cover-picker-actions{min-width:0;}

#roomList .room-card{padding:11px!important;overflow:hidden;}
#roomList .room-card-main{display:flex!important;align-items:flex-start!important;gap:10px!important;padding:0!important;}
#roomList .room-list-icon-wrap{width:52px!important;height:52px!important;min-width:52px!important;flex:0 0 52px!important;align-self:flex-start!important;}
#roomList .room-list-icon{width:52px!important;height:52px!important;min-height:52px!important;max-height:52px!important;border-radius:14px!important;object-fit:cover!important;}
#roomList .room-card-content-wrap{padding-bottom:10px!important;}
#roomList .room-card-cover-wrap{width:calc(100% + 22px);margin:0 -11px;overflow:hidden;background:#f1f5f9;}
#roomList .room-card-cover-image{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;}
#roomList .room-card-description{width:100%;margin:0!important;padding:10px 2px 2px!important;border-top:0!important;color:#64748b;font-size:.78rem;line-height:1.5;text-align:left;word-break:break-word;background:#fff;}
@media(max-width:390px){
  #roomList .room-list-icon-wrap{width:48px!important;height:48px!important;min-width:48px!important;flex-basis:48px!important;}
  #roomList .room-list-icon{width:48px!important;height:48px!important;min-height:48px!important;max-height:48px!important;}
}

/* ===== MOAON V7.0.40 1인 방송 미디어 고정 블록 ===== */
body.room-mode #watchPanel.solo-broadcast-panel{display:flex;flex-direction:column;overflow:hidden;}
body.room-mode #watchPanel.solo-broadcast-panel #watchControls{order:1;margin:0;padding:10px 12px;border-bottom:1px solid #e2e8f0;background:#fff;}
body.room-mode #watchPanel.solo-broadcast-panel #watchVideoShell{order:2;margin:0!important;}
body.room-mode #watchPanel.solo-broadcast-panel #soloCamControls{order:3;border-top:1px solid #e2e8f0;}
body.room-mode #watchPanel.solo-broadcast-panel.solo-watch-panel-fixed{position:fixed!important;top:var(--solo-watch-fixed-top,64px)!important;left:var(--solo-watch-fixed-left,8px)!important;width:var(--solo-watch-fixed-width,calc(100vw - 16px))!important;z-index:30!important;margin:0!important;box-shadow:0 10px 24px rgba(15,23,42,.22);}
body.room-mode #watchPanel.solo-broadcast-panel.solo-media-keyboard-hidden{display:none!important;}
body.room-mode #watchPanelStickyPlaceholder{width:100%;background:transparent;}
body.room-mode #watchPanel.solo-broadcast-panel .solo-cam-controls{align-items:flex-start;}
@media(max-width:768px){
  body.room-mode #watchPanel.solo-broadcast-panel.solo-watch-panel-fixed{border-radius:0 0 16px 16px!important;}
}

/* ===== MOAON V7.0.41 공개방 대표이미지 비율/라운드 수정 ===== */
#roomList .room-card-cover-wrap{
  width:100%!important;
  margin:4px 0 0!important;
  aspect-ratio:4/5!important;
  border-radius:18px!important;
  overflow:hidden!important;
  background:#f1f5f9!important;
}
#roomList .room-card-cover-image{
  display:block!important;
  width:100%!important;
  height:100%!important;
  aspect-ratio:auto!important;
  object-fit:cover!important;
  object-position:center!important;
  border-radius:18px!important;
}
#roomList .room-card-cover-wrap + .room-card-description{
  padding-top:10px!important;
}

/* ===== MOAON V7.0.42 MOAON 전용 채팅 이모티콘 ===== */
:root{--moaon-sticker-picker-height:0px;}

.chat-sticker-btn{
  width:42px;
  height:42px;
  flex:0 0 42px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#6d5dfc,#8b5cf6);
  color:#fff;
  box-shadow:0 4px 12px rgba(79,70,229,.22);
}
.chat-sticker-btn span{
  display:grid;
  place-items:center;
  width:25px;
  height:25px;
  border:2px solid rgba(255,255,255,.9);
  border-radius:10px 10px 10px 4px;
  font-size:.76rem;
  line-height:1;
  font-weight:1000;
  letter-spacing:-.04em;
}
.chat-sticker-btn:active{transform:scale(.94);}

.chat-sticker-picker{
  position:fixed;
  z-index:83;
  left:50%;
  bottom:calc(var(--moaon-keyboard-offset,0px) + var(--moaon-composer-height,64px) + var(--moaon-chat-preview-height,0px));
  transform:translateX(-50%);
  width:min(calc(100vw - 16px),560px);
  max-height:min(46vh,360px);
  overflow:hidden;
  border:1px solid #e2e8f0;
  border-radius:22px 22px 18px 18px;
  background:rgba(255,255,255,.98);
  box-shadow:0 -10px 34px rgba(15,23,42,.16);
  backdrop-filter:blur(14px);
}
.chat-sticker-picker.hidden{display:none!important;}
.chat-sticker-picker-head{
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:4px 10px 2px;
  border-bottom:0;
  background:transparent;
}
.chat-sticker-picker-head button{
  width:32px;height:32px;flex:0 0 32px;border-radius:50%;background:#f1f5f9;color:#64748b;font-size:1.25rem;line-height:1;
}
.chat-sticker-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:7px;
  padding:10px;
  max-height:calc(min(46vh,360px) - 40px);
  overflow-y:auto;
  overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;
}
.chat-sticker-item{
  min-width:0;
  min-height:112px;
  padding:2px;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:transform .12s ease,opacity .12s ease;
}
.chat-sticker-item:active{
  transform:scale(.92);
  background:transparent;
  border-color:transparent;
  opacity:.78;
}

.moaon-sticker-art{
  width:142px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  user-select:none;
  background:transparent;
  border:0;
  box-shadow:none;
}
.moaon-sticker-art.is-compact{width:86px;gap:2px;}
.moaon-sticker-image-wrap{
  width:142px;
  height:142px;
  display:grid;
  place-items:center;
  overflow:visible;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
}
.is-compact .moaon-sticker-image-wrap{
  width:84px;
  height:84px;
  border-radius:0;
  background:transparent;
  border:0;
  box-shadow:none;
}
.moaon-sticker-image{
  width:100%;
  height:100%;
  display:block;
  object-fit:contain;
  pointer-events:none;
  -webkit-user-drag:none;
  background:transparent;
}
.moaon-sticker-label{
  display:block;
  max-width:100%;
  color:#312e81;
  font-size:.76rem;
  line-height:1.2;
  font-weight:900;
  text-align:center;
  white-space:nowrap;
  background:transparent;
  border:0;
  box-shadow:none;
}
.is-compact .moaon-sticker-label{
  font-size:.62rem;
}

.moaon-chat-sticker{padding:2px 0;}
.message-bubble.is-sticker:not(.has-reply){
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible!important;
}
.message-bubble.is-sticker.has-reply .moaon-chat-sticker{padding:4px 0;}
.message-row.send-failed .moaon-sticker-art{filter:grayscale(.45);opacity:.7;}

@media(max-width:768px){
  .chat-sticker-picker{
    left:0;
    right:0;
    transform:none;
    width:100%;
    max-height:min(44dvh,350px);
    border-left:0;
    border-right:0;
    border-bottom:0;
    border-radius:22px 22px 0 0;
  }
  .chat-sticker-grid{max-height:calc(min(44dvh,350px) - 40px);}
  body.room-mode.sticker-picker-open #chatMessages{
    padding-bottom:calc(var(--moaon-sticker-picker-height) + var(--moaon-composer-height) + 16px)!important;
    scroll-padding-bottom:calc(var(--moaon-sticker-picker-height) + var(--moaon-composer-height) + 22px)!important;
  }
}

@media(max-width:380px){
  .chat-sticker-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
  .chat-sticker-item{min-height:108px;}
  .chat-sticker-btn{width:38px;height:38px;flex-basis:38px;}
  .chat-sticker-btn span{width:23px;height:23px;font-size:.7rem;}
  body.room-mode #chatComposer{gap:5px!important;}
}


/* ===== MOAON V7.0.46 방별 채팅 배경화면 12종 ===== */
.room-theme-modal-card{max-height:min(88dvh,760px);overflow:hidden;display:flex;flex-direction:column;}
.room-theme-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  overflow-y:auto;
  padding:2px 2px 6px;
  -webkit-overflow-scrolling:touch;
}
.room-theme-item{
  min-width:0;
  padding:7px;
  border:1px solid #e2e8f0;
  border-radius:16px;
  background:#fff;
  display:grid;
  gap:5px;
  text-align:left;
  transition:transform .12s ease,border-color .12s ease,box-shadow .12s ease;
}
.room-theme-item:active{transform:scale(.97);}
.room-theme-item.is-active{border-color:#7c6cf5;box-shadow:0 0 0 2px rgba(109,93,252,.12);}
.room-theme-item b{font-size:.68rem;line-height:1.25;color:#334155;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.room-theme-item small{font-size:.58rem;color:#94a3b8;font-weight:800;}
.room-theme-item.is-active small{color:#6557f2;}
.room-theme-swatch{display:block;width:100%;aspect-ratio:1.35/1;border-radius:11px;border:1px solid rgba(148,163,184,.2);background-color:#f8fafc;background-size:cover;}

/* 테마 미리보기와 실제 채팅 배경은 같은 CSS 배경을 공유합니다. */
.theme-star-night,
body.room-theme-star-night #chatMessages{
  background:
    radial-gradient(circle at 12% 20%,rgba(255,255,255,.95) 0 1px,transparent 2px),
    radial-gradient(circle at 72% 14%,rgba(255,255,255,.8) 0 1.2px,transparent 2.2px),
    radial-gradient(circle at 38% 62%,rgba(255,241,172,.7) 0 1px,transparent 2px),
    radial-gradient(circle at 86% 70%,rgba(255,255,255,.8) 0 1px,transparent 2px),
    linear-gradient(180deg,#101737 0%,#222761 52%,#5e5a9c 100%)!important;
  background-size:66px 66px,82px 82px,96px 96px,74px 74px,cover!important;
}
.theme-summer-beach,
body.room-theme-summer-beach #chatMessages{
  background:
    radial-gradient(circle at 83% 17%,rgba(255,234,96,.95) 0 26px,rgba(255,197,54,.25) 27px 43px,transparent 44px),
    linear-gradient(180deg,rgba(94,206,255,.95) 0 48%,rgba(57,175,224,.9) 49% 65%,rgba(47,163,207,.85) 66% 70%,rgba(250,220,152,.96) 71% 100%)!important;
}
.theme-snow-mountain,
body.room-theme-snow-mountain #chatMessages{
  background:
    radial-gradient(circle at 15% 18%,rgba(255,255,255,.95) 0 3px,transparent 4px),
    radial-gradient(circle at 72% 28%,rgba(255,255,255,.9) 0 2px,transparent 3px),
    linear-gradient(150deg,transparent 0 48%,rgba(230,238,247,.96) 49% 63%,transparent 64%),
    linear-gradient(210deg,transparent 0 45%,rgba(202,218,234,.9) 46% 64%,transparent 65%),
    linear-gradient(180deg,#b7d8ef 0%,#eaf4fa 58%,#f7fbfd 100%)!important;
  background-size:70px 70px,86px 86px,100% 100%,100% 100%,cover!important;
}
.theme-autumn-mountain,
body.room-theme-autumn-mountain #chatMessages{
  background:
    radial-gradient(circle at 15% 28%,rgba(236,104,55,.38) 0 18px,transparent 19px),
    radial-gradient(circle at 72% 38%,rgba(245,164,47,.35) 0 24px,transparent 25px),
    radial-gradient(circle at 48% 73%,rgba(171,74,48,.28) 0 30px,transparent 31px),
    linear-gradient(180deg,#f5d8ad 0%,#d78f57 56%,#7f5d48 100%)!important;
}
.theme-cherry-blossom,
body.room-theme-cherry-blossom #chatMessages{
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.65) 0 10px,rgba(250,190,214,.55) 11px 20px,transparent 21px),
    radial-gradient(circle at 76% 48%,rgba(255,255,255,.55) 0 8px,rgba(248,181,211,.48) 9px 18px,transparent 19px),
    linear-gradient(180deg,#fde6ef 0%,#f7cddd 60%,#e8efda 100%)!important;
}
.theme-forest-morning,
body.room-theme-forest-morning #chatMessages{
  background:
    radial-gradient(circle at 74% 18%,rgba(255,244,169,.5) 0 34px,transparent 35px),
    linear-gradient(155deg,transparent 0 52%,rgba(49,118,82,.38) 53% 70%,transparent 71%),
    linear-gradient(180deg,#cde8cf 0%,#8ec69f 55%,#4f8c68 100%)!important;
}
.theme-purple-sunset,
body.room-theme-purple-sunset #chatMessages{
  background:
    radial-gradient(circle at 70% 32%,rgba(255,194,126,.72) 0 28px,transparent 30px),
    linear-gradient(180deg,#7967b6 0%,#bc79a6 47%,#ef9c83 72%,#f6c59c 100%)!important;
}
.theme-ocean-night,
body.room-theme-ocean-night #chatMessages{
  background:
    radial-gradient(circle at 78% 18%,rgba(223,236,255,.75) 0 18px,transparent 20px),
    repeating-linear-gradient(175deg,rgba(255,255,255,.05) 0 2px,transparent 3px 18px),
    linear-gradient(180deg,#101d45 0%,#163863 48%,#0e5b77 100%)!important;
}
.theme-lavender-field,
body.room-theme-lavender-field #chatMessages{
  background:
    repeating-linear-gradient(86deg,transparent 0 18px,rgba(109,74,167,.16) 19px 22px,transparent 23px 38px),
    linear-gradient(180deg,#e4ddf8 0%,#c9b7ed 55%,#9678c8 100%)!important;
}
.theme-city-neon,
body.room-theme-city-neon #chatMessages{
  background:
    linear-gradient(90deg,transparent 0 12%,rgba(0,235,255,.18) 13% 14%,transparent 15% 31%,rgba(255,63,190,.18) 32% 33%,transparent 34% 100%),
    linear-gradient(180deg,#10101d 0%,#1b1631 55%,#32204b 100%)!important;
}
.theme-cozy-cafe,
body.room-theme-cozy-cafe #chatMessages{
  background:
    radial-gradient(circle at 80% 20%,rgba(255,241,205,.66) 0 32px,transparent 34px),
    repeating-linear-gradient(90deg,rgba(115,80,60,.08) 0 1px,transparent 2px 30px),
    linear-gradient(180deg,#efe1cc 0%,#dcc1a3 58%,#c69e78 100%)!important;
}
.theme-aurora,
body.room-theme-aurora #chatMessages{
  background:
    radial-gradient(ellipse at 20% 15%,rgba(109,255,208,.3) 0 20%,transparent 42%),
    radial-gradient(ellipse at 72% 20%,rgba(154,122,255,.34) 0 22%,transparent 46%),
    linear-gradient(165deg,rgba(67,233,192,.28),transparent 38%),
    linear-gradient(180deg,#15213e 0%,#244058 55%,#345d62 100%)!important;
}

/* 테마가 적용돼도 메시지와 입력영역 가독성은 기존대로 유지합니다. */
body[class*="room-theme-"] #chatMessages{background-attachment:local!important;}
body[class*="room-theme-"] #chatPanel{background:transparent!important;}
body[class*="room-theme-"] #chatComposer{background:rgba(255,255,255,.98)!important;backdrop-filter:blur(8px);}
body[class*="room-theme-"] #chatMessages > p.text-center{color:rgba(255,255,255,.88)!important;text-shadow:0 1px 2px rgba(15,23,42,.25);}

@media(max-width:390px){
  .room-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* ===== MOAON V7.0.47 방 배경 상단 전체 확장 ===== */
/* 선택한 방 배경을 채팅창에만 두지 않고 MOAON 헤더/방정보/프로필/방제목까지 한 화면으로 이어서 표시합니다. */
body.room-mode.room-theme-full-surface #appShell{
  min-height:100dvh;
  background-attachment:fixed!important;
}

/* 기존 채팅 영역은 투명하게 바꿔 appShell의 한 장짜리 배경이 그대로 보이게 합니다. */
body.room-mode.room-theme-full-surface #chatMessages{
  background:transparent!important;
  background-image:none!important;
}

/* 최상단 MOAON/방정보/프로필 구간에서도 선택한 배경이 보이도록 흰 헤더를 투명화합니다. */
body.room-mode.room-theme-full-surface #appShell > header{
  background:rgba(255,255,255,.16)!important;
  border-bottom-color:rgba(255,255,255,.28)!important;
  backdrop-filter:blur(7px) saturate(1.08)!important;
  -webkit-backdrop-filter:blur(7px) saturate(1.08)!important;
}
body.room-mode.room-theme-full-surface #appShell > header > div{background:transparent!important;}

/* MOAON 로고/방정보/프로필은 배경 위에서도 또렷하게 보이도록 작은 유리 느낌만 유지합니다. */
body.room-mode.room-theme-full-surface #appShell > header button[onclick="showHome()"]{
  padding:4px 8px 4px 4px;
  border-radius:16px;
  background:rgba(255,255,255,.72);
  box-shadow:0 2px 10px rgba(15,23,42,.08);
}
body.room-mode.room-theme-full-surface .global-room-menu-btn{
  background:rgba(255,255,255,.78)!important;
  border-color:rgba(255,255,255,.7)!important;
  backdrop-filter:blur(5px);
}
body.room-mode.room-theme-full-surface #headerPhoto,
body.room-mode.room-theme-full-surface #headerAvatar{
  box-shadow:0 2px 10px rgba(15,23,42,.14);
  border-color:rgba(255,255,255,.82)!important;
}

/* 방 제목이 있던 흰 영역도 없애고 같은 배경 위에 직접 표시합니다. */
body.room-mode.room-theme-full-surface #appShell > main,
body.room-mode.room-theme-full-surface #roomView,
body.room-mode.room-theme-full-surface .room-topbar{
  background:transparent!important;
}
body.room-mode.room-theme-full-surface .room-topbar{
  padding-top:10px!important;
  padding-bottom:12px!important;
}
body.room-mode.room-theme-full-surface .room-top-title{
  color:#fff!important;
  text-shadow:0 1px 2px rgba(15,23,42,.9),0 0 8px rgba(15,23,42,.45);
}

/* 공지/미디어/장부 같은 기능 블록은 기존 흰 카드 상태를 유지합니다. */
body.room-mode.room-theme-full-surface #roomNoticeBar,
body.room-mode.room-theme-full-surface #watchPanel,
body.room-mode.room-theme-full-surface #ledgerPanel,
body.room-mode.room-theme-full-surface #memberRosterPanel{
  position:relative;
}


/* ===== MOAON V7.0.48 요청사항 ===== */
/* 방 배경 사용 시 상단 MOAON 로고 영역의 별도 흰 박스를 제거하고 로고/문자만 표시 */
body.room-mode.room-theme-full-surface #appShell > header button[onclick="showHome()"]{
  padding:0!important;
  background:transparent!important;
  box-shadow:none!important;
  border:0!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

/* 방 정보 참여 회원은 닉네임만 단순 표시 */
.room-info-members-grid{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:7px;
}
.room-info-member-name{
  min-width:0;
  padding:9px 10px;
  border:1px solid #e2e8f0;
  border-radius:12px;
  background:#f8fafc;
  color:#334155;
  font-size:.76rem;
  font-weight:900;
  text-align:left;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}


/* ===== MOAON V7.0.49 요청사항 ===== */
/* 저장 로그인 사용자는 외부 앱/사이트에서 돌아와 재로딩되더라도 로그인 버튼이 먼저 번쩍이지 않게 합니다. */
html.moaon-returning-user #loginScreen{display:none!important;visibility:hidden!important;opacity:0!important;}
html.moaon-returning-user #kakaoLoginOverlay{display:flex!important;}

/* 방 제목 옆 참여인원: 배경/박스 없이 아이콘과 숫자만, 이전보다 크게 표시 */
.room-top-member-count{
  margin-left:8px!important;
  padding:0!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
  color:#64748b!important;
  font-size:.78rem!important;
  font-weight:950!important;
  line-height:1.1!important;
  transform:translateY(-1px)!important;
}
body[class*="room-theme-"] .room-top-member-count{
  color:rgba(255,255,255,.94)!important;
  text-shadow:0 1px 3px rgba(15,23,42,.38);
}

/* 모임방 키보드: 글쓰기칸과 실제 키보드 사이의 미세한 틈을 없앱니다. */
@media(max-width:768px){
  body.room-mode.chat-focus-sectioned[data-room-type="group"] #chatComposer{
    margin-bottom:-1px!important;
  }

  /* 익명방: 스크롤 중 fixed composer와 Android 키보드 사이에 생기는 합성 경계선을 덮습니다. */
  body.room-mode.keyboard-open[data-room-type="anonymous"] #chatComposer{
    border-bottom:0!important;
    box-shadow:none!important;
  }
  body.room-mode.keyboard-open[data-room-type="anonymous"] #chatComposer::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:-3px;
    height:4px;
    background:#fff;
    pointer-events:none;
  }
  body.room-mode.keyboard-open[class*="room-theme-"][data-room-type="anonymous"] #chatComposer::after{
    background:rgba(255,255,255,.98);
  }
}


/* ===== MOAON V7.0.53 : V7.0.49 정상 동작을 기준으로 V7.0.50 회귀만 제거 ===== */
/* 공개 LIVE 카드의 현재 같이보기 영상 16:9 미리보기 */
#roomList .room-card-live-preview{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  margin:4px 0 0;
  border-radius:18px;
  overflow:hidden;
  background:#0f172a;
}
#roomList .room-card-live-preview img{width:100%;height:100%;display:block;object-fit:cover;object-position:center;}
#roomList .room-card-live-preview span{position:absolute;left:10px;top:10px;padding:5px 8px;border-radius:999px;background:rgba(15,23,42,.72);color:#fff;font-size:.68rem;font-weight:950;backdrop-filter:blur(5px);}
#roomList .room-card-live-preview + .room-card-description{padding-top:10px!important;}

/* 미디어 자체는 상/하단 모두 라운드. 고정 위치 계산은 V7.0.49의 검증된 watchVideoShell 방식 그대로 사용 */
body.room-mode #watchVideoShell{border-radius:18px!important;overflow:hidden!important;}

/* 홈 설치 안내 */
.install-today-dismiss{display:flex;align-items:center;justify-content:flex-end;gap:7px;margin-top:10px;color:#64748b;font-size:.72rem;font-weight:800;cursor:pointer;}
.install-today-dismiss input{width:17px;height:17px;accent-color:#4f46e5;}
@media(max-width:768px){#installBanner{bottom:calc(16px + env(safe-area-inset-bottom))!important;z-index:120!important;}}
@media(max-width:900px){#installBanner{top:50%!important;bottom:auto!important;transform:translateY(-50%);}}


/* ===== MOAON V7.0.54 LIVE 미리보기 + 제목/미디어 헤더 아래 고정 ===== */
.watch-room-title-bar{display:flex;align-items:center;justify-content:center;gap:9px;padding:11px 14px 10px;background:rgba(255,255,255,.98);}
.watch-room-title-bar.hidden{display:none!important;}
.watch-room-title-text{min-width:0;max-width:78%;font-size:1.08rem;font-weight:950;color:#0f172a;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.watch-room-member-count{font-size:.78rem;font-weight:950;color:#64748b;white-space:nowrap;}
body.live-watch-title-media-mode .room-topbar{display:none!important;}
body.live-watch-title-media-mode #watchMediaTitleBlock{background:#fff;overflow:hidden;border-radius:20px;}
body.live-watch-title-media-mode #watchVideoShell{margin-top:0!important;border-radius:0 0 18px 18px!important;overflow:hidden!important;}
body.room-mode #watchMediaTitleBlock.watch-video-fixed{
  position:fixed!important;
  top:var(--watch-fixed-top,66px)!important;
  left:var(--watch-fixed-left,8px)!important;
  width:var(--watch-fixed-width,calc(100vw - 16px))!important;
  z-index:29!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:18px!important;
  box-shadow:0 10px 24px rgba(15,23,42,.22);
}
body.room-mode #watchMediaTitleBlock.watch-video-fixed #watchVideoShell{
  position:relative!important;top:auto!important;left:auto!important;width:100%!important;margin:0!important;box-shadow:none!important;border-radius:0 0 18px 18px!important;
}
#roomList .room-card-live-preview{width:100%!important;aspect-ratio:16/9!important;overflow:hidden!important;border-radius:18px!important;background:#0f172a!important;}
#roomList .room-card-live-preview img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important;}

/* ===== MOAON V7.0.55 같이보기 LIVE 미디어 통합 고정 ===== */
body.room-mode #watchPanel.watch-together-panel{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:20px!important;
}
body.room-mode #watchPanel.watch-together-panel #watchControls{
  order:1;
  margin:0;
  padding:10px 12px;
  border-bottom:1px solid #e2e8f0;
  background:#fff;
}
body.room-mode #watchPanel.watch-together-panel #watchMediaTitleBlock{
  order:2;
  width:100%;
  overflow:hidden;
  border-radius:0 0 18px 18px;
  background:#fff;
}
body.room-mode #watchPanel.watch-together-panel #watchRoomTitleBar{
  border-bottom:1px solid #eef2f7;
}
body.room-mode #watchPanel.watch-together-panel #watchVideoShell{
  margin:0!important;
  border-radius:0 0 18px 18px!important;
  overflow:hidden!important;
}
body.room-mode #watchPanel.watch-together-panel #soloCamControls{order:3;}
body.room-mode #watchPanel.watch-together-panel.watch-together-keyboard-hidden{display:none!important;}

@media(max-width:768px){
  body.room-mode #watchPanel.watch-together-panel.watch-together-panel-fixed{
    position:fixed!important;
    top:var(--watch-together-fixed-top,64px)!important;
    left:var(--watch-together-fixed-left,8px)!important;
    width:var(--watch-together-fixed-width,calc(100vw - 16px))!important;
    z-index:30!important;
    margin:0!important;
    border-radius:18px!important;
    box-shadow:0 10px 24px rgba(15,23,42,.22);
  }
  body.room-mode #watchPanel.watch-together-panel.watch-together-panel-fixed #watchMediaTitleBlock,
  body.room-mode #watchPanel.watch-together-panel.watch-together-panel-fixed #watchVideoShell{
    border-radius:0 0 18px 18px!important;
  }
}


/* ===== MOAON V7.0.57 같이보기 LIVE 채팅 도킹 ===== */
@media(max-width:768px){
  /* 키보드가 닫힌 같이보기 LIVE방은 채팅 패널 전체를
     고정 미디어의 실제 하단부터 화면 하단까지 직접 배치합니다.
     따라서 메시지 영역이 미디어 뒤에서 시작할 수 없습니다. */
  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatPanel{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--watch-together-chat-top,50vh)!important;
    bottom:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:24!important;
    background:transparent!important;
  }

  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatHeaderPlaceholder,
  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatHeader{
    flex:0 0 0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    overflow:hidden!important;
  }

  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatMessages{
    position:relative!important;
    inset:auto!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 8px 10px!important;
    scroll-padding-bottom:10px!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }

  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatMessages::before{
    flex:1 0 auto!important;
    min-height:0!important;
  }

  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatMessages > .message-row:first-of-type{
    margin-top:auto!important;
  }

  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatComposer{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    z-index:26!important;
  }

  body.room-mode.watch-together-chat-fit:not(.keyboard-open) .chat-reply-preview,
  body.room-mode.watch-together-chat-fit:not(.keyboard-open) .chat-whisper-preview{
    flex:0 0 auto!important;
  }
}

/* ===== MOAON V7.0.58 1인 방송 전용 채팅 도킹 ===== */
@media(max-width:768px){
  /* 같이보기 LIVE와 분리: 1인 방송은 고정 미디어의 실제 하단부터
     입력창까지를 독립 채팅영역으로 사용합니다. */
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatPanel{
    position:fixed!important;
    left:0!important;
    right:0!important;
    top:var(--solo-broadcast-chat-top,50vh)!important;
    bottom:0!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    display:flex!important;
    flex-direction:column!important;
    overflow:hidden!important;
    z-index:24!important;
    background:transparent!important;
  }
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatHeaderPlaceholder,
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatHeader{
    flex:0 0 0!important;
    height:0!important;
    min-height:0!important;
    max-height:0!important;
    padding:0!important;
    margin:0!important;
    border:0!important;
    overflow:hidden!important;
  }
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatMessages{
    position:relative!important;
    inset:auto!important;
    flex:1 1 auto!important;
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    margin:0!important;
    padding:10px 8px 10px!important;
    scroll-padding-bottom:10px!important;
    overflow-y:auto!important;
    overscroll-behavior-y:contain!important;
    -webkit-overflow-scrolling:touch!important;
  }
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatMessages::before{
    flex:1 0 auto!important;
    min-height:0!important;
  }
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatMessages > .message-row:first-of-type{
    margin-top:auto!important;
  }
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatComposer{
    position:relative!important;
    top:auto!important;
    bottom:auto!important;
    left:auto!important;
    right:auto!important;
    flex:0 0 auto!important;
    width:100%!important;
    z-index:26!important;
  }
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) .chat-reply-preview,
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) .chat-whisper-preview{
    flex:0 0 auto!important;
  }

  /* URL 입력 중에는 미디어 블록을 숨기거나 재고정 애니메이션을 적용하지 않습니다. */
  body.room-mode.watch-url-editing #watchPanel.solo-broadcast-panel,
  body.room-mode.watch-url-editing #watchPanel.watch-together-panel{
    display:flex!important;
  }
}

/* ===== MOAON V7.0.61 1인 방송방 모바일 스크롤 손가락 우선 ===== */
@media(max-width:768px){
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatMessages{
    /* fixed 도킹 영역의 높이가 갱신될 때 브라우저 scroll anchoring이
       임의로 마지막 글 위치를 재선택하지 않도록 1인 방송방에만 해제합니다. */
    overflow-anchor:none!important;
    touch-action:pan-y!important;
  }
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatMessages > .message-row{
    overflow-anchor:none!important;
  }
  /* ::before flex spacer만으로 짧은 대화를 하단 정렬합니다.
     첫 메시지의 auto margin은 모바일 관성 스크롤 중 재배치 원인이 될 수 있어 제거합니다. */
  body.room-mode.solo-broadcast-chat-fit:not(.keyboard-open):not(.watch-url-editing) #chatMessages > .message-row:first-of-type{
    margin-top:0!important;
  }
}


/* ===== MOAON V7.0.62 LIVE 1인 방송 채팅 스크롤 완전 분리 ===== */
body.room-mode.solo-broadcast-room #chatMessages{
  scroll-behavior:auto!important;
  overscroll-behavior:contain!important;
  overflow-anchor:none!important;
}
body.room-mode.solo-broadcast-room #chatMessages > .message-row{
  overflow-anchor:none!important;
}
@media(max-width:768px){
  body.room-mode.solo-broadcast-room #chatMessages{
    touch-action:pan-y!important;
  }
}

/* ===== MOAON V7.0.63 같이보기 LIVE 채팅 스크롤 분리 ===== */
/* 같이보기 LIVE방만 브라우저 scroll anchoring과 바깥 페이지 스크롤 이어넘김을 차단합니다. */
body.room-mode.live-watch-title-media-mode #chatMessages{
  scroll-behavior:auto!important;
  overscroll-behavior:contain!important;
  overflow-anchor:none!important;
}
body.room-mode.live-watch-title-media-mode #chatMessages > .message-row{
  overflow-anchor:none!important;
}
@media(max-width:768px){
  body.room-mode.live-watch-title-media-mode #chatMessages{
    touch-action:pan-y!important;
  }
  body.room-mode.watch-together-chat-fit:not(.keyboard-open) #chatMessages > .message-row:first-of-type{
    margin-top:0!important;
  }
}

/* ===== MOAON V7.0.67 홈 주요 기능 7초 왼쪽 자동 슬라이드 ===== */
.home-feature-slider{
  width:100%;
  overflow:hidden;
  border-radius:24px;
}
.home-feature-track{
  display:flex;
  width:200%;
  transform:translate3d(0,0,0);
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  will-change:transform;
}
.home-feature-track.is-resetting{
  transition:none!important;
}
.home-feature-slide{
  width:50%;
  flex:0 0 50%;
  min-width:0;
  padding:20px;
  color:#fff;
  border-radius:24px;
  background:linear-gradient(100deg,#4f46e5 0%,#7c3aed 100%);
}
.home-feature-slide > .flex{min-height:76px;}
@media(max-width:640px){
  .home-feature-slider{border-radius:22px;}
  .home-feature-slide{padding:18px 20px;border-radius:22px;}
  .home-feature-slide h3{font-size:1.08rem!important;line-height:1.35;}
  .home-feature-slide p.text-sm{font-size:.78rem!important;line-height:1.5;}
}