/* assets/css/emergency_chat.css */
/* 긴급 회원 채팅방 */
:root{
  --ec-bg: rgba(10,14,25,0.98);
  --ec-card: rgba(14,20,35,0.98);
  --ec-line: rgba(248,195,74,0.34);
  --ec-line-soft: rgba(255,255,255,0.10);
  --ec-text: #eaf1ff;
  --ec-muted: rgba(180,192,214,0.86);
  --ec-accent: #f8c34a;
  --ec-danger: #ff5b5b;
}

.emergency-chat-fab{
  position: fixed;
  right: 18px;
  bottom: 78px;
  z-index: 9998;
  min-height: 48px;
  padding: 0 15px;
  border-radius: 999px;
  border: 1px solid rgba(255,91,91,0.72);
  background: linear-gradient(135deg, rgba(55,12,16,0.98), rgba(16,20,36,0.98));
  color: var(--ec-text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  box-shadow: 0 14px 34px rgba(0,0,0,0.50), 0 0 22px rgba(255,91,91,0.12);
  cursor: pointer;
  font-weight: 900;
  font-size: 13.5px;
  letter-spacing: .01em;
}
.emergency-chat-fab:hover{ filter: brightness(1.06); }
.emergency-chat-fab i{ color: var(--ec-danger); font-size: 17px; }
.emergency-chat-fab-text{ white-space: nowrap; }
.emergency-chat-fab-pulse{
  position:absolute;
  inset:-5px;
  border-radius:999px;
  border:1px solid rgba(255,91,91,0.25);
  animation: emergencyPulse 1.8s infinite;
  pointer-events:none;
}
@keyframes emergencyPulse{
  0%{ transform:scale(0.98); opacity:.9; }
  70%{ transform:scale(1.12); opacity:0; }
  100%{ transform:scale(1.12); opacity:0; }
}

.emergency-chat-modal{
  position: fixed;
  inset: 0;
  z-index: 10020;
  display: none;
}
.emergency-chat-modal.is-open{ display: block; }
.emergency-chat-modal-backdrop{
  position:absolute;
  inset:0;
  background: rgba(0,0,0,0.68);
  backdrop-filter: blur(2px);
}
.emergency-chat-modal-panel{
  position:absolute;
  right:16px;
  bottom:16px;
  width:390px;
  max-width:calc(100vw - 24px);
  height:560px;
  max-height:calc(100vh - 24px);
  border-radius:18px;
  overflow:hidden;
  background:var(--ec-card);
  border:1px solid rgba(255,91,91,0.48);
  box-shadow:0 24px 70px rgba(0,0,0,0.65), 0 0 38px rgba(255,91,91,0.12);
}
.emergency-chat-modal-top{
  height:44px;
  padding:0 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:linear-gradient(135deg, rgba(65,12,16,0.92), rgba(14,20,35,0.98));
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.emergency-chat-modal-title{
  color:var(--ec-text);
  font-weight:900;
  font-size:12px;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
  gap:8px;
}
.emergency-chat-modal-title i{ color:var(--ec-danger); }
.emergency-chat-modal-close{
  width:30px;
  height:30px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(0,0,0,0.20);
  color:var(--ec-text);
  cursor:pointer;
}
.emergency-chat-modal-frame{
  width:100%;
  height:calc(100% - 44px);
  border:0;
  display:block;
  background:#0b0f18;
}

.emergency-window-wrap{
  min-height:100vh;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,91,91,0.13), transparent 35%),
    radial-gradient(circle at 90% 0%, rgba(248,195,74,0.10), transparent 32%),
    #090d16;
  color:var(--ec-text);
  padding:10px;
}
.emergency-window-card{
  max-width:680px;
  margin:0 auto;
  height:calc(100vh - 16px);
  border-radius:18px;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  background:rgba(14,20,35,0.96);
  border:1px solid var(--ec-line-soft);
  box-shadow:0 22px 65px rgba(0,0,0,0.56);
}
.emergency-window-header{
  padding:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  border-bottom:1px solid var(--ec-line-soft);
  background:linear-gradient(135deg, rgba(64,14,18,0.86), rgba(14,20,35,0.98));
}
.emergency-window-title{
  font-size:15px;
  font-weight:900;
  letter-spacing:.01em;
}
.emergency-window-title i{ color:var(--ec-danger); }
.emergency-window-sub{
  font-size:10px;
  color:var(--ec-muted);
  margin-top:3px;
  line-height:1.35;
}
.emergency-window-actions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}
.emergency-mini-badge{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  border-radius:999px;
  padding:0 10px;
  border:1px solid rgba(248,195,74,0.26);
  background:rgba(248,195,74,0.08);
  color:var(--ec-text);
  font-weight:800;
  font-size:10px;
}
.emergency-close-btn,
.emergency-send-btn{
  border:1px solid rgba(248,195,74,0.34);
  background:rgba(248,195,74,0.10);
  color:var(--ec-text);
  border-radius:12px;
  min-height:34px;
  padding:0 12px;
  font-weight:900;
  cursor:pointer;
  font-size:13px;
}
.emergency-send-btn{
  min-width:66px;
  height:38px;
  flex:0 0 auto;
}
.emergency-close-btn:hover,
.emergency-send-btn:hover{ filter:brightness(1.08); }
.emergency-chat-layout{
  flex:1;
  min-height:0;
  display:grid;
  grid-template-columns:1fr 135px;
}
.emergency-chat-main{
  min-width:0;
  display:flex;
  flex-direction:column;
  border-right:1px solid var(--ec-line-soft);
}
.emergency-chat-body{
  flex:1;
  min-height:0;
  overflow:auto;
  padding:10px;
}
.emergency-chat-footer{
  border-top:1px solid var(--ec-line-soft);
  padding:8px;
  background:rgba(7,11,20,0.70);
}
.emergency-chat-input{
  display:flex;
  gap:8px;
  align-items:flex-end;
}
.emergency-chat-input textarea{
  font-size:13px;
}
.emergency-chat-input textarea{
  flex:1;
  resize:none;
  min-height:38px;
  max-height:82px;
  border-radius:11px;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(0,0,0,0.28);
  color:var(--ec-text);
  padding:6px 8px;
  outline:none;
  line-height:1.35;
}
.emergency-chat-input textarea:focus{
  border-color:rgba(248,195,74,0.55);
  box-shadow:0 0 0 3px rgba(248,195,74,0.08);
}
.emergency-chat-msg{
  display:flex;
  margin-bottom:9px;
}
.emergency-chat-msg.me{ justify-content:flex-end; }
.emergency-chat-msg.other{ justify-content:flex-start; }
.emergency-chat-stack{ max-width:82%; }
.emergency-chat-bubble{
  border-radius:15px;
  padding:6px 8px;
  background:rgba(8,12,22,0.82);
  border:1px solid rgba(255,255,255,0.10);
  color:var(--ec-text);
  white-space:pre-wrap;
  word-break:break-word;
  line-height:1.38;
  font-size:12px;
}
.emergency-chat-msg.me .emergency-chat-bubble{
  background:rgba(248,195,74,0.14);
  border-color:rgba(248,195,74,0.32);
}
.emergency-chat-msg.admin .emergency-chat-bubble{
  background:rgba(255,91,91,0.14);
  border-color:rgba(255,91,91,0.35);
}
.emergency-chat-meta{
  color:var(--ec-muted);
  font-size:10px;
  margin-top:4px;
}
.emergency-chat-msg.me .emergency-chat-meta{ text-align:right; }
.emergency-admin-mark{
  color:var(--ec-danger);
  font-weight:900;
}
.emergency-system-note{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(248,195,74,0.22);
  background:rgba(248,195,74,0.08);
  color:var(--ec-muted);
  line-height:1.55;
  font-size:12px;
}
.emergency-online-panel{
  min-width:0;
  padding:10px;
  background:rgba(7,11,20,0.45);
  overflow:auto;
}
.emergency-online-title{
  font-weight:900;
  font-size:12px;
  color:var(--ec-text);
  margin-bottom:8px;
}
.emergency-online-user{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 0;
  border-bottom:1px solid rgba(255,255,255,0.06);
  color:var(--ec-muted);
  font-size:12px;
}
.emergency-online-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  background:#42d37b;
  box-shadow:0 0 10px rgba(66,211,123,0.6);
  flex:0 0 auto;
}
.emergency-online-user.admin .emergency-online-dot{ background:var(--ec-danger); box-shadow:0 0 10px rgba(255,91,91,0.6); }
.emergency-error{
  color:#ffd2d2;
  font-size:10px;
  min-height:18px;
  margin-top:6px;
}

body.emergency-embed .emergency-window-wrap{ padding:0; }
body.emergency-embed .emergency-window-card{
  max-width:none;
  height:100vh;
  border-radius:0;
  border:0;
}
body.emergency-embed .emergency-chat-layout{
  grid-template-columns:1fr 135px;
}

@media (max-width:720px){
  .emergency-chat-layout{ grid-template-columns:1fr; }
  .emergency-online-panel{ display:none; }
  .emergency-chat-main{ border-right:0; }
  .emergency-window-actions .emergency-mini-badge{ display:none; }
}
@media (max-width:520px){
  .emergency-chat-fab{
    left:18px;
    right:auto;
    bottom:78px;
  }
  .emergency-chat-modal-panel{
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    height:calc(100vh - 16px);
    max-width:none;
    max-height:none;
    border-radius:18px;
  }
  .emergency-chat-stack{ max-width:88%; }
}


/* =========================================================
   긴급 회원 채팅방 하단 입력창 고정 보정
   - iframe/모달 환경에서 footer가 화면 아래로 밀리는 문제 방지
   - 전체 문서는 스크롤하지 않고, 메시지 영역만 스크롤
========================================================= */
body.emergency-embed{
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  padding:0;
  overflow:hidden;
}
body.emergency-embed{
  background:#090d16;
}
body.emergency-embed .emergency-window-wrap{
  height:100vh;
  height:100dvh;
  min-height:0;
  padding:0;
  overflow:hidden;
  box-sizing:border-box;
}
body.emergency-embed .emergency-window-card{
  height:100vh;
  height:100dvh;
  max-height:100vh;
  max-height:100dvh;
  min-height:0;
  border-radius:0;
  border:0;
  box-shadow:none;
}
.emergency-window-card,
.emergency-chat-layout,
.emergency-chat-main{
  min-height:0;
}
.emergency-window-header{
  flex:0 0 auto;
}
.emergency-chat-layout{
  flex:1 1 auto;
  overflow:hidden;
}
.emergency-chat-main{
  overflow:hidden;
}
.emergency-chat-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}
.emergency-chat-footer{
  flex:0 0 auto;
  position:relative;
  z-index:5;
  box-sizing:border-box;
}
.emergency-chat-input textarea{
  box-sizing:border-box;
  overflow-y:auto;
}

/* 일반 페이지로 직접 열었을 때도 하단 입력창이 보이도록 보정 */
body:not(.emergency-embed) .emergency-window-wrap{
  height:100vh;
  height:100dvh;
  min-height:0;
  overflow:hidden;
  box-sizing:border-box;
}
body:not(.emergency-embed) .emergency-window-card{
  height:calc(100vh - 20px);
  height:calc(100dvh - 20px);
  min-height:0;
}

@media (max-width:520px){
  body.emergency-embed .emergency-window-card{
    height:100vh;
    height:100dvh;
  }
  .emergency-window-header{
    padding:8px;
  }
  .emergency-chat-body{
    padding:8px;
  }
  .emergency-chat-footer{
    padding:7px;
  }
  .emergency-chat-input textarea{
    min-height:36px;
    max-height:72px;
  }
  .emergency-send-btn{
    height:36px;
    min-width:58px;
    padding:0 10px;
  }
}

@supports not (height: 100dvh){
  body.emergency-embed .emergency-window-wrap,
  body.emergency-embed .emergency-window-card{
    height:var(--ec-vh, 100vh);
    max-height:var(--ec-vh, 100vh);
  }
  body:not(.emergency-embed) .emergency-window-wrap{
    height:var(--ec-vh, 100vh);
  }
  body:not(.emergency-embed) .emergency-window-card{
    height:calc(var(--ec-vh, 100vh) - 20px);
  }
}

/* =========================================================
   긴급 회원 채팅방 - 반응형 입력창 고정 보정
   - iframe/modal 환경에서 하단 입력창이 잘리지 않도록 보정
   - 메시지 영역만 스크롤
   - 입력창은 항상 하단 노출
   ========================================================= */

body.emergency-embed,
body.emergency-embed .emergency-window-wrap{
  width:100%;
  height:100%;
  min-height:0;
  margin:0;
  overflow:hidden;
}

body.emergency-embed .emergency-window-wrap{
  padding:0 !important;
}

body.emergency-embed .emergency-window-card{
  width:100%;
  max-width:none;
  height:100vh;
  height:100dvh;
  min-height:0;
  border-radius:0;
  border:0;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

body.emergency-embed .emergency-window-header{
  flex:0 0 auto;
}

body.emergency-embed .emergency-chat-layout{
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
}

body.emergency-embed .emergency-chat-main{
  min-height:0;
  overflow:hidden;
  display:flex;
  flex-direction:column;
}

body.emergency-embed .emergency-chat-body{
  flex:1 1 auto;
  min-height:0;
  overflow-y:auto;
  overflow-x:hidden;
  overscroll-behavior:contain;
}

body.emergency-embed .emergency-chat-footer{
  flex:0 0 auto;
  position:relative;
  z-index:5;
  padding:8px;
  background:rgba(7,11,20,0.96);
  border-top:1px solid var(--ec-line-soft);
}

body.emergency-embed .emergency-chat-input{
  width:100%;
  display:flex;
  align-items:flex-end;
  gap:8px;
}

body.emergency-embed .emergency-chat-input textarea{
  min-height:38px;
  height:38px;
  max-height:76px;
  overflow-y:auto;
}

body.emergency-embed .emergency-send-btn{
  height:38px;
  min-height:38px;
  flex:0 0 auto;
}

/* 일반 창으로 열렸을 때도 입력창 고정 */
.emergency-window-wrap{
  min-height:100vh;
  min-height:100dvh;
  overflow:hidden;
}

.emergency-window-card{
  min-height:0;
  overflow:hidden;
}

.emergency-chat-layout,
.emergency-chat-main{
  min-height:0;
  overflow:hidden;
}

.emergency-chat-body{
  min-height:0;
}

.emergency-chat-footer{
  flex:0 0 auto;
}

/* 작은 화면 반응형 */
@media (max-width:720px){
  .emergency-chat-modal-panel{
    right:10px;
    bottom:10px;
    width:calc(100vw - 20px);
    height:min(560px, calc(100dvh - 20px));
    max-height:calc(100dvh - 20px);
  }

  body.emergency-embed .emergency-chat-layout{
    grid-template-columns:1fr !important;
  }

  body.emergency-embed .emergency-online-panel{
    display:none !important;
  }

  body.emergency-embed .emergency-window-header{
    padding:8px 9px;
  }

  body.emergency-embed .emergency-window-title{
    font-size:14px;
  }

  body.emergency-embed .emergency-window-sub{
    font-size:10.5px;
    line-height:1.25;
  }
}

@media (max-width:520px){
  .emergency-chat-modal-panel{
    left:8px;
    right:8px;
    bottom:8px;
    width:auto;
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    border-radius:16px;
  }

  body.emergency-embed .emergency-chat-footer{
    padding:7px;
  }

  body.emergency-embed .emergency-chat-input{
    gap:5px;
  }

  body.emergency-embed .emergency-chat-input textarea{
    min-height:36px;
    height:36px;
    max-height:68px;
    font-size:12.5px;
    padding:7px 9px;
  }

  body.emergency-embed .emergency-send-btn{
    height:36px;
    min-height:36px;
    min-width:58px;
    padding:0 9px;
    font-size:12.5px;
  }
}

@media (max-height:620px){
  .emergency-chat-modal-panel{
    height:calc(100dvh - 16px);
    max-height:calc(100dvh - 16px);
    bottom:8px;
  }

  body.emergency-embed .emergency-window-header{
    padding-top:7px;
    padding-bottom:7px;
  }

  body.emergency-embed .emergency-chat-body{
    padding:8px;
  }

  body.emergency-embed .emergency-chat-footer{
    padding:7px;
  }
}

/* =========================================================
   홈페이지 스크롤 복구 안전 보정
   - 메인 홈페이지에서는 전체 스크롤을 막지 않음
   - 채팅 iframe 내부 body.emergency-embed 에서만 스크롤 제어
   ========================================================= */
body:not(.emergency-embed){
  overflow-y:auto !important;
}

body:not(.emergency-embed) .emergency-chat-modal{
  overflow:visible;
}

/* =========================================================
   긴급 회원 채팅방 - 관리자 삭제/권한 버튼
   ========================================================= */
.emergency-admin-tools{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:5px;
  margin-bottom:7px;
  padding:7px 8px;
  border-radius:12px;
  border:1px solid rgba(255,91,91,0.24);
  background:rgba(255,91,91,0.08);
}

.emergency-admin-tools-title{
  display:inline-flex;
  align-items:center;
  gap:5px;
  color:#ffd7d7;
  font-size:12px;
  font-weight:900;
  margin-right:2px;
}

.emergency-admin-action{
  min-height:28px;
  border-radius:10px;
  border:1px solid rgba(248,195,74,0.34);
  background:rgba(248,195,74,0.10);
  color:var(--ec-text);
  padding:0 9px;
  font-size:11.5px;
  font-weight:900;
  cursor:pointer;
}

.emergency-admin-action.danger{
  border-color:rgba(255,91,91,0.45);
  background:rgba(255,91,91,0.14);
  color:#ffe5e5;
}

.emergency-admin-action:hover{
  filter:brightness(1.08);
}

.emergency-admin-tools-help{
  color:rgba(180,192,214,0.76);
  font-size:10px;
  line-height:1.35;
}

.emergency-message-tools{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:5px;
}

.emergency-message-tool{
  min-height:24px;
  border-radius:999px;
  border:1px solid rgba(248,195,74,0.26);
  background:rgba(248,195,74,0.08);
  color:rgba(234,241,255,0.92);
  padding:0 8px;
  font-size:10.5px;
  font-weight:900;
  cursor:pointer;
}

.emergency-message-tool.danger{
  border-color:rgba(255,91,91,0.38);
  background:rgba(255,91,91,0.12);
  color:#ffdede;
}

.emergency-message-tool:hover{
  filter:brightness(1.1);
}

@media (max-width:520px){
  .emergency-admin-tools{
    gap:5px;
    padding:6px;
    margin-bottom:6px;
  }

  .emergency-admin-tools-help{
    display:none;
  }

  .emergency-admin-action{
    min-height:26px;
    font-size:10px;
    padding:0 7px;
  }

  .emergency-message-tool{
    min-height:23px;
    padding:0 7px;
    font-size:10px;
  }
}

/* =========================================================
   긴급 회원 채팅방 - 새 채팅 N 반짝 알림
   ========================================================= */
.emergency-chat-badge{
  position:absolute;
  top:-7px;
  right:-7px;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:rgba(255,65,65,0.98);
  color:#fff;
  font-size:12px;
  font-weight:1000;
  display:none;
  align-items:center;
  justify-content:center;
  border:1px solid rgba(255,255,255,0.42);
  box-shadow:0 0 14px rgba(255,65,65,0.72);
  z-index:3;
}
.emergency-chat-fab.is-new{
  animation: emergencyNewGlow 1.15s ease-in-out infinite;
}
.emergency-chat-fab.is-new::after{
  content:'';
  position:absolute;
  inset:-7px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow:0 0 22px rgba(255,65,65,0.42), 0 0 32px rgba(248,195,74,0.16);
  pointer-events:none;
  animation: emergencyNewSparkle 1.05s ease-in-out infinite;
}
@keyframes emergencyNewGlow{
  0%,100%{ filter:brightness(1); transform:translateY(0); }
  50%{ filter:brightness(1.22); transform:translateY(-1px); }
}
@keyframes emergencyNewSparkle{
  0%{ opacity:.25; transform:scale(.96); }
  50%{ opacity:1; transform:scale(1.06); }
  100%{ opacity:.25; transform:scale(.96); }
}

/* =========================================================
   회원 실시간 채팅 - 홈페이지 우측 사이드 패널 보정
   - 배경을 막지 않고, 로그인 회원만 우측에서 바로 대화 가능
   ========================================================= */
.emergency-chat-fab{
  bottom:78px;
  border-color:rgba(72,142,255,0.72);
  background:linear-gradient(135deg, rgba(18,35,72,0.98), rgba(16,20,36,0.98));
  box-shadow:0 14px 34px rgba(0,0,0,0.50), 0 0 22px rgba(72,142,255,0.16);
}
.emergency-chat-fab i{ color:#6aa7ff; }
.emergency-chat-fab-pulse{ border-color:rgba(72,142,255,0.25); }
body:not(.emergency-embed) .emergency-chat-modal{
  pointer-events:none;
}
body:not(.emergency-embed) .emergency-chat-modal-backdrop{
  display:none !important;
}
body:not(.emergency-embed) .emergency-chat-modal-panel{
  pointer-events:auto;
  right:16px;
  bottom:132px;
  width:390px;
  height:min(590px, calc(100dvh - 154px));
  max-height:calc(100vh - 154px);
  border-radius:16px;
  border-color:rgba(72,142,255,0.46);
  box-shadow:0 24px 70px rgba(0,0,0,0.65), 0 0 34px rgba(72,142,255,0.14);
}
body:not(.emergency-embed) .emergency-chat-modal-top{
  background:linear-gradient(135deg, rgba(19,37,77,0.94), rgba(14,20,35,0.98));
}
body:not(.emergency-embed) .emergency-chat-modal-title i{ color:#6aa7ff; }
body.emergency-embed .emergency-window-wrap{
  background:#111318;
}
body.emergency-embed .emergency-window-header{
  background:linear-gradient(135deg, rgba(24,45,87,0.92), rgba(17,19,24,0.98));
}
body.emergency-embed .emergency-window-title i{ color:#6aa7ff; }
body.emergency-embed .emergency-window-card{
  background:#111318;
}
body.emergency-embed .emergency-chat-body{
  background:#1f2025;
}
body.emergency-embed .emergency-chat-bubble{
  background:transparent;
  border:0;
  padding:2px 0;
  font-size:14px;
}
body.emergency-embed .emergency-chat-msg{
  margin-bottom:7px;
  justify-content:flex-start !important;
}
body.emergency-embed .emergency-chat-stack{
  max-width:100%;
}
body.emergency-embed .emergency-chat-meta{
  display:inline;
  margin:0 6px 0 0;
  color:#56a1ff;
  font-weight:900;
  font-size:14px;
}
body.emergency-embed .emergency-chat-msg.me .emergency-chat-meta{
  text-align:left;
  color:#36d8ff;
}
body.emergency-embed .emergency-chat-msg.admin .emergency-chat-meta{
  color:#ffd86a;
}
body.emergency-embed .emergency-chat-footer{
  background:#17191f;
}
body.emergency-embed .emergency-online-panel{
  background:#17191f;
}

@media (max-width:720px){
  body:not(.emergency-embed) .emergency-chat-modal-panel{
    left:8px;
    right:8px;
    bottom:88px;
    width:auto;
    height:calc(100dvh - 104px);
    max-height:calc(100dvh - 104px);
  }
}
body.emergency-embed .emergency-chat-stack{
  display:flex;
  align-items:flex-start;
  gap:4px;
  flex-wrap:wrap;
}
body.emergency-embed .emergency-chat-meta{
  order:-1;
  white-space:nowrap;
}
body.emergency-embed .emergency-chat-meta::after{
  content:':';
  color:#dfe8ff;
  margin-left:1px;
}
body.emergency-embed .emergency-chat-bubble{
  order:0;
}
body.emergency-embed .emergency-message-tools{
  flex-basis:100%;
  order:2;
}


/* -------------------------------------------------------------
   메인 페이지 좌측 고정형 회원 실시간 채팅
   - 팝업/모달 방식이 아니라 페이지 안에 단독 채팅창으로 배치
   - 로그인 회원에게만 home.php에서 출력
------------------------------------------------------------- */
.member-live-home-layout{
  display:grid;
  grid-template-columns:260px minmax(0, 1fr);
  gap:12px;
  align-items:start;
}
.member-live-home-sidebar{
  min-width:0;
}
.member-live-home-chat-card{
  height:430px;
  min-height:430px;
  border-radius:11px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 12px 32px rgba(0,0,0,0.36);
  position:sticky;
  top:76px;
}
.member-live-home-chat-frame{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}
.member-live-home-main{
  min-width:0;
}

body.emergency-side-embed{
  margin:0;
  overflow:hidden;
  background:#000;
}
body.emergency-side-embed .emergency-window-wrap{
  min-height:100vh;
  height:100vh;
  padding:0;
  background:#000;
}
body.emergency-side-embed .emergency-window-card{
  width:100%;
  max-width:none;
  height:100vh;
  margin:0;
  border-radius:0;
  border:0;
  box-shadow:none;
  background:#000;
}
body.emergency-side-embed .emergency-window-header{
  min-height:42px;
  padding:7px 9px;
  background:#020202;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
body.emergency-side-embed .emergency-window-title{
  font-size:12px;
  color:#fff;
  font-weight:900;
  white-space:nowrap;
}
body.emergency-side-embed .emergency-window-title i{
  color:#ffd21f;
}
body.emergency-side-embed .emergency-window-actions{
  gap:7px;
}
body.emergency-side-embed .emergency-mini-badge{
  min-height:20px;
  padding:0 5px;
  border:0;
  background:transparent;
  color:#8a8f98;
  font-size:10px;
}
body.emergency-side-embed .emergency-mini-badge i{
  color:#8a8f98;
}
body.emergency-side-embed .emergency-close-btn{
  min-height:22px;
  padding:0 6px;
  border-radius:8px;
  font-size:10px;
  color:#ddd;
  background:#171717;
  border-color:rgba(255,255,255,0.16);
}
body.emergency-side-embed .emergency-chat-layout{
  display:block;
  height:calc(100vh - 42px);
}
body.emergency-side-embed .emergency-chat-main{
  height:100%;
  border-right:0;
  background:#000;
}
body.emergency-side-embed .emergency-online-panel,
body.emergency-side-embed .emergency-admin-tools,
body.emergency-side-embed #emergencyChatStatus{
  display:none !important;
}
body.emergency-side-embed .emergency-chat-body{
  padding:6px 8px;
  background:#28282c;
  scrollbar-width:thin;
  scrollbar-color:#555 #26262a;
}
body.emergency-side-embed .emergency-chat-body::-webkit-scrollbar{ width:6px; }
body.emergency-side-embed .emergency-chat-body::-webkit-scrollbar-track{ background:#26262a; }
body.emergency-side-embed .emergency-chat-body::-webkit-scrollbar-thumb{ background:#555; border-radius:8px; }
body.emergency-side-embed .emergency-chat-footer{
  padding:4px 6px;
  background:#050505;
  border-top:1px solid rgba(255,255,255,0.12);
}
body.emergency-side-embed .emergency-chat-input{
  gap:5px;
  align-items:center;
}
body.emergency-side-embed .emergency-chat-input textarea{
  min-height:30px;
  height:30px;
  max-height:58px;
  border-radius:0;
  border:0;
  background:#363638;
  color:#fff;
  padding:7px 8px;
  font-size:11px;
  line-height:1.35;
}
body.emergency-side-embed .emergency-chat-input textarea::placeholder{
  color:#bfc0c3;
}
body.emergency-side-embed .emergency-send-btn{
  width:30px;
  min-width:30px;
  height:30px;
  padding:0;
  border:0;
  border-radius:50%;
  background:#000;
  color:#ffc929;
  font-size:17px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}
body.emergency-side-embed .emergency-send-text{
  display:none;
}
body.emergency-side-embed .emergency-error{
  margin-top:3px;
  font-size:10px;
}
body.emergency-side-embed .emergency-chat-msg{
  display:flex;
  align-items:flex-start;
  gap:3px;
  margin:0 0 4px 0;
  line-height:1.35;
  color:#fff;
  font-size:11px;
  font-weight:800;
}
body.emergency-side-embed .emergency-chat-msg.me,
body.emergency-side-embed .emergency-chat-msg.other{
  justify-content:flex-start;
}
body.emergency-side-embed .emergency-chat-icon{
  width:15px;
  min-width:15px;
  height:15px;
  border-radius:3px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  color:#ffd21f;
  text-shadow:0 1px 1px rgba(0,0,0,0.7);
  transform:translateY(1px);
}
body.emergency-side-embed .emergency-chat-icon i{
  font-size:11px;
}
body.emergency-side-embed .emergency-chat-line{
  min-width:0;
  flex:1;
  word-break:break-word;
  white-space:pre-wrap;
}
body.emergency-side-embed .emergency-chat-name{
  color:#0d8cff;
  font-weight:950;
}
body.emergency-side-embed .emergency-chat-msg.me .emergency-chat-name{
  color:#54a6ff;
}
body.emergency-side-embed .emergency-chat-msg.admin .emergency-chat-name{
  color:#ff5757;
}
body.emergency-side-embed .emergency-chat-sep,
body.emergency-side-embed .emergency-chat-text{
  color:#fff;
}
body.emergency-side-embed .emergency-admin-mark{
  color:#ff5757;
  border:0;
  background:transparent;
  padding:0;
  font-size:10px;
}
body.emergency-side-embed .emergency-message-tools{
  display:none;
  position:absolute;
  right:6px;
  top:50%;
  transform:translateY(-50%);
  gap:4px;
  background:rgba(0,0,0,0.78);
  padding:3px;
  border-radius:6px;
}
body.emergency-side-embed .emergency-chat-msg{
  position:relative;
}
body.emergency-side-embed .emergency-chat-msg:hover .emergency-message-tools{
  display:flex;
}
body.emergency-side-embed .emergency-message-tool{
  min-height:22px;
  padding:0 6px;
  font-size:10px;
  border-radius:5px;
}
body.emergency-side-embed .emergency-system-note{
  margin:8px 0;
  padding:10px;
  border-radius:8px;
  background:#1f1f23;
  color:#d8d8d8;
  border:1px solid rgba(255,255,255,0.08);
  font-size:12px;
  line-height:1.55;
}

@media (max-width: 991.98px){
  .member-live-home-layout{
    display:block;
  }
  .member-live-home-chat-card{
    position:relative;
    top:auto;
    height:380px;
    min-height:380px;
    margin-bottom:12px;
  }
}
@media (max-width: 420px){
  .member-live-home-chat-card{
    height:340px;
    min-height:340px;
  }
}


/* -------------------------------------------------------------
   회원 실시간 채팅 사이즈 축소 패치
   - 메인 페이지 좌측 채팅창을 작고 가볍게 표시
------------------------------------------------------------- */
.member-live-home-layout{
  grid-template-columns:260px minmax(0, 1fr) !important;
  gap:12px !important;
}
.member-live-home-chat-card{
  height:430px !important;
  min-height:430px !important;
  border-radius:11px !important;
}
body.emergency-side-embed .emergency-window-header{
  min-height:42px !important;
  padding:7px 9px !important;
}
body.emergency-side-embed .emergency-chat-layout{
  height:calc(100vh - 42px) !important;
}
body.emergency-side-embed .emergency-chat-body{
  padding:6px 8px !important;
}
body.emergency-side-embed .emergency-chat-msg{
  margin-bottom:4px !important;
  font-size:11px !important;
  line-height:1.35 !important;
}
body.emergency-side-embed .emergency-chat-input textarea{
  min-height:30px !important;
  height:30px !important;
  max-height:58px !important;
  font-size:11px !important;
  padding:7px 8px !important;
}
body.emergency-side-embed .emergency-send-btn{
  width:30px !important;
  min-width:30px !important;
  height:30px !important;
  font-size:17px !important;
}
@media (max-width: 991.98px){
  .member-live-home-chat-card{
    height:380px !important;
    min-height:380px !important;
  }
}
@media (max-width: 420px){
  .member-live-home-chat-card{
    height:340px !important;
    min-height:340px !important;
  }
}

/* -------------------------------------------------------------
   회원 실시간 채팅 초소형 패치
   - 좌측 고정 채팅창을 더 작게 축소
   - 폰트와 입력창, 아이콘, 헤더 크기까지 전체 축소
------------------------------------------------------------- */
.member-live-home-layout{
  grid-template-columns:220px minmax(0, 1fr) !important;
  gap:10px !important;
}
.member-live-home-chat-card{
  height:360px !important;
  min-height:360px !important;
  border-radius:10px !important;
}
body.emergency-side-embed .emergency-window-header{
  min-height:34px !important;
  padding:5px 7px !important;
}
body.emergency-side-embed .emergency-window-title{
  font-size:11px !important;
}
body.emergency-side-embed .emergency-window-title i{
  font-size:10px !important;
}
body.emergency-side-embed .emergency-window-actions{
  gap:5px !important;
}
body.emergency-side-embed .emergency-mini-badge{
  min-height:18px !important;
  padding:0 4px !important;
  font-size:9px !important;
}
body.emergency-side-embed .emergency-close-btn{
  min-height:18px !important;
  padding:0 5px !important;
  font-size:9px !important;
  border-radius:6px !important;
}
body.emergency-side-embed .emergency-chat-layout{
  height:calc(100vh - 34px) !important;
}
body.emergency-side-embed .emergency-chat-body{
  padding:5px 6px !important;
}
body.emergency-side-embed .emergency-chat-msg{
  gap:2px !important;
  margin:0 0 3px 0 !important;
  font-size:10px !important;
  line-height:1.28 !important;
}
body.emergency-side-embed .emergency-chat-icon{
  width:13px !important;
  min-width:13px !important;
  height:13px !important;
}
body.emergency-side-embed .emergency-chat-icon i{
  font-size:9px !important;
}
body.emergency-side-embed .emergency-chat-name{
  font-size:10px !important;
}
body.emergency-side-embed .emergency-admin-mark,
body.emergency-side-embed .emergency-message-tool,
body.emergency-side-embed .emergency-error{
  font-size:9px !important;
}
body.emergency-side-embed .emergency-chat-footer{
  padding:4px 5px !important;
}
body.emergency-side-embed .emergency-chat-input{
  gap:4px !important;
}
body.emergency-side-embed .emergency-chat-input textarea{
  min-height:26px !important;
  height:26px !important;
  max-height:42px !important;
  padding:5px 7px !important;
  font-size:10px !important;
  line-height:1.2 !important;
}
body.emergency-side-embed .emergency-send-btn{
  width:26px !important;
  min-width:26px !important;
  height:26px !important;
  font-size:14px !important;
}
@media (max-width: 991.98px){
  .member-live-home-chat-card{
    height:330px !important;
    min-height:330px !important;
  }
}
@media (max-width: 420px){
  .member-live-home-layout{
    grid-template-columns:1fr !important;
  }
  .member-live-home-chat-card{
    height:300px !important;
    min-height:300px !important;
  }
}


/* -------------------------------------------------------------
   회원 실시간 채팅 전체 페이지 내부 유지 패치
   - 홈/게시판/게시글/글쓰기/내 정보 등 모든 로그인 페이지에서 표시
   - fixed 팝업/덮개 방식 사용 안 함
   - 좌측 채팅 영역을 실제 레이아웃 칸으로 잡아서 게시판 화면을 가리지 않음
   - 스크롤을 내려도 왼쪽 채팅창은 sticky로 따라옴
------------------------------------------------------------- */
.member-live-page-shell{
  width:100%;
  max-width:1320px;
  margin:0 auto;
  padding:0 15px;
  display:grid;
  grid-template-columns:220px minmax(0, 1fr);
  gap:10px;
  align-items:start;
  box-sizing:border-box;
}

.member-live-page-sidebar{
  min-width:0;
  align-self:start;
  position:sticky;
  top:78px;
  z-index:20;
}

.member-live-page-chat-card{
  width:220px;
  height:520px;
  min-height:520px;
  border-radius:10px;
  overflow:hidden;
  background:#000;
  border:1px solid rgba(255,255,255,0.10);
  box-shadow:0 12px 32px rgba(0,0,0,0.36);
}

.member-live-page-chat-frame{
  width:100%;
  height:100%;
  display:block;
  border:0;
  background:#000;
}

.member-live-page-content{
  min-width:0;
}

.member-live-page-content > .container{
  max-width:100%;
  padding-left:0;
  padding-right:0;
}

.member-live-global-chat{
  display:none !important;
}

body.member-live-global-enabled{
  padding-left:0 !important;
}

@media (max-width: 991.98px){
  .member-live-page-shell{
    display:block;
    padding:0 12px;
  }

  .member-live-page-sidebar{
    position:sticky;
    top:64px;
    margin:12px 0;
    z-index:20;
  }

  .member-live-page-chat-card{
    width:100%;
    height:430px;
    min-height:430px;
  }

  .member-live-page-content > .container{
    padding-left:0;
    padding-right:0;
  }
}

@media (max-width: 420px){
  .member-live-page-shell{
    padding:0 10px;
  }

  .member-live-page-chat-card{
    height:360px;
    min-height:360px;
  }
}


/* -------------------------------------------------------------
   회원 실시간 채팅 바탕 검정색 패치
   - 채팅창 전체 배경과 메시지 표시 영역을 검정색으로 고정
------------------------------------------------------------- */
.member-live-page-chat-card,
.member-live-home-chat-card,
.member-live-global-chat-card{
  background:#000 !important;
}

body.emergency-side-embed,
body.emergency-side-embed .emergency-window-wrap,
body.emergency-side-embed .emergency-window-card,
body.emergency-side-embed .emergency-chat-layout,
body.emergency-side-embed .emergency-chat-main,
body.emergency-side-embed .emergency-chat-body,
body.emergency-side-embed .emergency-chat-footer{
  background:#000 !important;
}

body.emergency-side-embed .emergency-window-header{
  background:#000 !important;
}

body.emergency-side-embed .emergency-chat-body::-webkit-scrollbar-track{
  background:#000 !important;
}


/* -------------------------------------------------------------
   홈페이지 상단 공통 유지 패치
   - 게시판/게시글/글쓰기/내 정보에서도 홈 상단 배너와 빠른 링크바 표시
   - 홈에서는 중복 출력되지 않도록 header.php 공통 출력만 사용
------------------------------------------------------------- */
.l2-common-home-top{
  padding-left:0 !important;
  padding-right:0 !important;
}
.member-live-page-content > .l2-common-home-top{
  max-width:100% !important;
}
.member-live-page-content > .l2-common-home-top .row{
  margin-left:0 !important;
  margin-right:0 !important;
}
.member-live-page-content > .l2-common-home-top .col-12{
  padding-left:0 !important;
  padding-right:0 !important;
}


/* -------------------------------------------------------------
   상단 빠른 링크 중복 출력 차단
   - templates/header.php의 공통 상단 링크바만 사용
   - 게시판/게시물 내부 power_links 카드가 남아도 숨김
------------------------------------------------------------- */
.l2-powerlinks-card{
  display:none !important;
}


/* -------------------------------------------------------------
   채팅창 / 상단영역 정렬 보정 패치
   - 좌측 채팅창과 우측 상단 버튼 카드의 시작선을 맞춤
   - 우측 게시판 영역의 위/아래 간격을 과하게 벌어지지 않게 정리
   - 좌우 여백과 카드 간격을 동일 기준으로 통일
------------------------------------------------------------- */
.member-live-page-shell{
  gap:14px !important;
  padding-left:14px !important;
  padding-right:14px !important;
  align-items:start !important;
}

.member-live-page-sidebar{
  margin-top:0 !important;
}

.member-live-page-chat-card{
  margin-top:0 !important;
}

.member-live-page-content{
  padding-top:0 !important;
}

.member-live-page-content > .container{
  margin-left:0 !important;
  margin-right:0 !important;
  max-width:100% !important;
}

/* header.php에서 공통으로 출력되는 상단 버튼 영역 */
.member-live-page-content > .l2-common-home-top{
  margin-top:0 !important;
  margin-bottom:14px !important;
  padding-left:0 !important;
  padding-right:0 !important;
}

.member-live-page-content > .l2-common-home-top .row{
  margin-left:0 !important;
  margin-right:0 !important;
}

.member-live-page-content > .l2-common-home-top .col-12{
  padding-left:0 !important;
  padding-right:0 !important;
  margin-bottom:0 !important;
}

.member-live-page-content > .l2-common-home-top .l2-card{
  margin-bottom:0 !important;
}

/* 각 페이지 본문 container의 mt-4 때문에 생기던 불필요한 세로 간격 제거 */
.member-live-page-content > .container.mt-4{
  margin-top:0 !important;
}

/* 게시판 카드가 상단 버튼과 자연스럽게 붙도록 기본 간격만 유지 */
.member-live-page-content .row > [class*="col-"].mb-4{
  margin-bottom:14px !important;
}

@media (max-width: 991.98px){
  .member-live-page-shell{
    padding-left:12px !important;
    padding-right:12px !important;
  }

  .member-live-page-sidebar{
    margin-top:0 !important;
    margin-bottom:12px !important;
  }

  .member-live-page-content > .l2-common-home-top{
    margin-bottom:12px !important;
  }
}


/* -------------------------------------------------------------
   상단 배너와 본문 사이 여백 보정 패치
   - 배너 바로 아래 채팅창/상단 버튼 카드가 너무 붙지 않도록 여백 추가
   - 좌우 정렬은 유지하고 위쪽 숨 쉴 공간만 확보
------------------------------------------------------------- */
.l2-hero + .member-live-page-shell{
  margin-top:16px !important;
}

.member-live-page-shell{
  padding-top:0 !important;
}

.member-live-page-content > .l2-common-home-top{
  margin-top:0 !important;
}

/* 홈/게시판 본문 첫 카드와 상단 버튼 사이도 너무 붙지 않게 기본 간격 유지 */
.member-live-page-content > .container.mt-4{
  margin-top:14px !important;
}

@media (max-width: 991.98px){
  .l2-hero + .member-live-page-shell{
    margin-top:12px !important;
  }

  .member-live-page-content > .container.mt-4{
    margin-top:12px !important;
  }
}
