html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  overflow: hidden; /* ❗ iframe 밖으로 절대 안 나가게 */
  background: #0b0b0b;
  font-family: Pretendard, sans-serif;
}

.chat-container {
  display: flex;
  flex-direction: column;
  height: 100%; /* iframe 높이 기준 */
}

/* 상단 영역들 (고정 높이) */
.top-banner {
  background: #fa5204;
  padding: 10px;
  text-align: center;
  font-weight: bold;
  flex-shrink: 0;
  cursor: pointer;
}

.top-banner a {
  text-decoration: none;
  color: white;
}

.notice-bar {
  color: white;
  background: #0f2a22;
  border-bottom: 1px solid #1aa37a;
  padding: 8px 10px;
  display: flex;
  justify-content: space-between;
  font-size: 13px;
  flex-shrink: 0;
}

.status-bar {
  text-align: center;
  font-size: 12px;
  padding: 5px;
  border-bottom: 1px solid #333;
  color: #aaa;
  flex-shrink: 0;
}

/* 채팅 로그 (남은 영역만 차지) */
.chat-box {
  flex: 1; /* ⭐ 핵심 */
  overflow-y: auto;
  padding: 10px;
}

/* 시스템 메시지 */
.system-msg {
  color: #ff4fd8;
  font-weight: bold;
}

/* 입력 영역 (고정) */
.chat-input {
  background: #111;
  padding: 8px;
  flex-shrink: 0;
}

.input-wrap {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
}

.input-wrap input {
  flex: 1;
  background: #1c1c1c;
  color: #aaa;
  padding: 8px 20px;
  border-radius: 100px;
}

.input-wrap button {
  background: unset;
  border: none;
  color: #999;
  border-radius: 50%;
  height: auto;
  cursor: pointer;
}

.login-alert {
  margin-top: 6px;
  background: #fff3b0;
  color: #000;
  padding: 6px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
}
.chat-line {
  padding: 3px 0;
  font-size: 12px;
  line-height: 1.4;
  color: white;
}

.chat-line:hover {
  background: #f3f3f3;
}

.chat-nick {
  font-weight: bold;
  margin-right: 6px;
  color: #a29bfe;
  white-space: nowrap;
}

.chat-msg {
  color: white;
}

/* 시스템 메시지 전용 */
.chat-line.system {
  color: #fff;
}

.chat-line.system .chat-nick {
  color: #ff4fd8;
  white-space: nowrap;
}
.emoji-layer.hidden {
  display: none;
}

.emoji-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
}

.emoji-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.emoji-modal {
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  max-width: 95%;
  height: 50%;
  background: #fff;
  transform: translateX(-50%);
  border-radius: 8px;
  overflow: hidden;
}

.emoji-frame {
  width: 100%;
  height: calc(100% - 40px);
}

.emoji-close {
  width: 100%;
  height: 40px;
  border: 0;
  background: #222;
  color: #fff;
}

.chat-emo {
  vertical-align: middle;
}
.emoji-btn {
  cursor: pointer;
}
.notice-bar {
  background: #333;
  height: 32px;
  color: #fff;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

/* 기본: 접힘 */
.notice-bar.collapsed {
  max-height: 32px;
}

/* 펼침 */
.notice-bar:not(.collapsed) {
  max-height: 200px; /* 충분히 크게 */
  height: auto;
}

/* 공지 텍스트 */
#noticeText {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: all 0.3s ease;
}

/* 펼쳤을 때 */
.notice-bar:not(.collapsed) #noticeText {
  white-space: normal;
}

/* 토글 버튼 */
.notice-bar .toggle {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  opacity: 0.8;
  transition: transform 0.2s ease;
}

.notice-bar:not(.collapsed) .toggle {
  transform: rotate(180deg);
}
.notice-bar.collapsed #noticeText {
  white-space: normal;
}
.notice-bar:not(.collapsed) #noticeText {
  white-space: normal;
}

#onlineCnt {
  color: #9147ff;
  font-weight: bold;
  font-size: 0.85em;
}

.admin-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
}
.admin-layer.hidden {
  display: none;
}

.admin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
}

.admin-modal {
  position: absolute;
  left: 50%;
  width: fit-content;
  transform: translateX(-50%);
  background: #fff;
  padding: 15px;
  border-radius: 8px;
}

.admin-modal button {
  width: 100%;
  margin-top: 8px;
  background: white;
  outline: none;
  border: 1px solid #333;
  cursor: pointer;
}

.chat-nick.admin-click {
  cursor: pointer;
  color: #5d81df;
  overflow: unset;
}
.chat-nick.admin-click:hover {
  text-decoration: underline;
}

/* ===============================
   🎥 YouTube Live Chat Style
   =============================== */

/* 채팅 영역 배경 */
.chat-box {
  background: #fff;
  padding: 12px;
  overflow-y: auto;
}

/* 채팅 한 줄 */
.chat-line {
  display: flex;
  gap: 8px;
  font-size: 12px;
  line-height: 1.5;
  color: #fff;
}

/* 프로필 (기본 원형) */
.chat-avatar {
  width: 25px;
  height: 25px;
  flex-shrink: 0;
  transform: translateY(-2px);
}

/* 닉네임 + 메시지 묶음 */
.chat-content {
  display: flex;
  flex-direction: column;
}

/* 닉네임 */
.chat-nick {
  font-size: 13px;
  font-weight: 600;
  color: #aaa;
}

/* 메시지 */
.chat-msg {
  font-size: 12px;
  color: black;
}

/* 이모티콘 */
.chat-msg img,
.chat-emo {
  height: 20px;
  vertical-align: middle;
}

/* 시스템 메시지 */
.chat-line.system {
  justify-content: center;
  font-size: 11px;
  color: #ff4fd8;
  margin: 6px 0;
}

/* 관리자 닉네임 */
.chat-nick.admin {
  color: #ff5252;
}

/* 스크롤바 (유튜브 느낌) */
.chat-box::-webkit-scrollbar {
  width: 6px;
}
.chat-box::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 3px;
}
.chat-box::-webkit-scrollbar-track {
  background: transparent;
}

/* 입력 영역 */
.chat-input {
  background: #111;
}

/* 공지 바 */
.notice-bar {
  background: #333;
  color: #fff;
  padding: 8px 10px;
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

/* 공지 텍스트 */
#noticeText {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;

  /* 🔥 기본: 2줄 제한 */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#noticeText a {
  color: #4da3ff;
  text-decoration: underline;
}

#noticeText a:hover {
  color: #7bbcff;
}

/* 펼쳤을 때 */
.notice-bar:not(.collapsed) #noticeText {
  -webkit-line-clamp: unset;
}

/* 토글 */
.notice-bar .toggle {
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  opacity: 0.8;
}

.notice-bar:not(.collapsed) .toggle {
  transform: rotate(180deg);
}

.status-bar {
  background: #151515;
  color: #999;
  border-bottom: 1px solid #2a2a2a;
}
/* ===============================
   🎥 REAL YouTube Live Chat
   =============================== */

/* 채팅 배경 */
.chat-box {
  background: #fff;
  padding: 8px 10px;
  font-size: 13px;
}

/* 한 줄 = 텍스트 한 덩어리 */

/* 닉네임 */
.chat-nick {
  font-weight: 600;
  margin-right: 4px;
  color: #aaa;
  font-size: 13px;
}

/* 닉 + 메시지 같은 줄 */
.chat-nick,
.chat-msg {
  display: inline;
}

/* 시스템 메시지 */
.chat-line.system {
  text-align: center;
  color: #ff4fd8;
  font-size: 12px;
  margin: 4px 0;
}

/* 이모티콘 (유튜브처럼 작게) */
.chat-msg img,
.chat-emo {
  width: 18px;
  height: 18px;
  vertical-align: middle;
}

/* 스크롤바 */
.chat-box::-webkit-scrollbar {
  width: 5px;
}
.chat-box::-webkit-scrollbar-thumb {
  background: #444;
  border-radius: 3px;
}

/* 입력창도 유튜브 느낌 */
.chat-input {
  background: #fff;
}

.input-wrap input {
  background: rgba(242, 242, 242, 1);
  color: black;
  font-size: 13px;
}

.chat-input {
  background: #fff;
  border-top: 1px solid #ddd;
  padding: 8px;
}

/* 가로 정렬 */
.input-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* 🔥 fake input */
.fake-input {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;

  background: #f1f1f1;
  border-radius: 20px;
  padding: 6px 12px;
}

/* 비활성 */
.fake-input.disabled {
  opacity: 0.6;
}

/* 진짜 input */
.fake-input input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  font-size: 12px;
  color: #111;
}

.fake-input input::placeholder {
  color: #777;
}

/* 이모지 */
.fake-input .emoji-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  cursor: pointer;
  opacity: 0.8;
}

.fake-input .emoji-btn:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* 전송 버튼 */
.send-btn {
  background: transparent;
  border: none;
  color: #065fd4;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}

.send-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* 로그인 안내 */
.login-alert {
  margin-top: 6px;
  background: #fff3b0;
  color: #000;
  padding: 6px;
  font-size: 12px;
  text-align: center;
  border-radius: 4px;
  cursor: pointer;
}

.send-plane {
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.send-plane:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.plane-icon {
  width: 20px;
  height: 20px;
  fill: #000;
}

/* 🔔 토스트 알림 */
.toast-container {
  position: fixed;
  top: 123px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
}

.toast {
  width: 90%;
  background: #2196f3;
  color: #fff;
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  animation: slideDown 0.25s ease-out;
  font-size: 12px;
  white-space: nowrap;
}

.toast .close {
  cursor: pointer;
  margin-left: 12px;
  font-weight: bold;
  opacity: 0.8;
}

.toast .close:hover {
  opacity: 1;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -10px);
  }
  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

/* ===============================
   모바일 키보드 대응 (2+3 통합)
   =============================== */

/* 기본 */
.chat-container {
  height: 100dvh; /* iOS 대응 */
}

/* 채팅 로그 영역 */
.chat-box {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* 입력 영역 */
.chat-input {
  position: sticky;
  bottom: 0;
  z-index: 50;
  padding-bottom: 8px;
}

/* 🔥 키보드 올라온 상태 */
body.keyboard-open .chat-input {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
}

/* 키보드 열리면 채팅 로그 위 공간 확보 */
body.keyboard-open .chat-box {
  padding-bottom: 70px; /* input 높이만큼 */
}

/* iOS에서 포커스 시 자동 확대 방지 */
input,
textarea {
  font-size: 16px;
}

body.keyboard-open .chat-wrap {
  height: calc(100vh - 260px); /* 키보드 높이 대응 */
}

body.keyboard-open {
  overflow: hidden;
}
.parent-mobile .chat-box {
  padding: 8px 15px;
}
.parent-mobile .top-banner {
  display: none;
}
.parent-mobile .plane-icon {
  width: 22px;
  height: 22px;
}

body.dark-mode {
  background: #121212;
  color: #eee;
}

body.dark-mode .chat-line {
  background: transparent;
}

.dark-mode .chat-box {
  background: #121212;
}
.dark-mode .chat-msg {
  color: white;
}
.dark-mode .chat-input {
  background: #121212;
  border-top: 1px solid #333;
}

.dark-mode .chat-msg a:link,
.dark-mode .chat-msg a:visited {
  color: #1a73e8; /* 원하는 파란색 */
}

/* ===============================
   관리자 레이어
================================ */
.admin-layer {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.admin-layer.hidden {
  display: none;
}

/* 반투명 배경 */
.admin-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
}

/* 모달 */
.admin-modal {
  position: relative;
  width: 260px;
  max-width: calc(100% - 40px);
  background: #1e1e1e;
  border-radius: 14px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 0px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* 버튼 공통 */
.admin-modal button {
  appearance: none;
  border: none;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 14px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  background: #2b2b2b;
  color: #f1f1f1;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: all 0.15s ease;
}

/* hover */
.admin-modal button:hover {
  background: #3a3a3a;
  transform: translateY(-1px);
}

/* 위험 액션 */
.admin-modal button.danger,
.admin-modal button:nth-child(1),
.admin-modal button:nth-child(2),
.admin-modal button:nth-child(3) {
  background: #3a1f1f;
  color: #ffb4b4;
}

.admin-modal button.danger:hover {
  background: #512828;
}

/* 얼리기 버튼 */
.admin-modal button.freeze {
  background: #203040;
  color: #9fd1ff;
}

.admin-modal button.freeze:hover {
  background: #2a4157;
}

/* 관리자 페이지 */
.admin-modal button.settings {
  background: #2b2b2b;
  color: #ffd966;
}

.admin-modal button.settings:hover {
  background: #3a3a3a;
}

/* 닫기 */
.admin-modal button.close {
  margin-top: 6px;
  background: transparent;
  color: #aaa;
  text-align: center;
  justify-content: center;
}

.admin-modal button.close:hover {
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
}

/* 애니메이션 */
@keyframes adminPop {
  from {
    transform: translateY(10px) scale(0.96);
    opacity: 0;
  }
  to {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
}

.vote-container {
  color: white;
}

.vote-title {
  font-size: 16px;
  font-weight: bold;
}

.vote-option {
  margin-bottom: 8px;
}

.vote-option button {
  width: 100%;
  padding: 8px;
  border-radius: 8px;
  border: none;
  background: #333;
  color: #fff;
  cursor: pointer;
}

.vote-option button:hover {
  background: #4caf50;
}

.vote-bar {
  height: 6px;
  background: #4caf50;
  border-radius: 4px;
  margin-top: 4px;
}

.vote-percent {
  font-size: 12px;
  opacity: 0.8;
}

/* 모바일 대응 */
@media (max-width: 480px) {
  .admin-modal {
    width: 100%;
    border-radius: 16px 16px 0 0;
    position: absolute;
    bottom: 0;
    animation: adminSlideUp 0.2s ease-out;
  }

  @keyframes adminSlideUp {
    from {
      transform: translate(-50%, 100%);
    }
    to {
      transform: translate(-50%, 0);
    }
  }
}

/* ===== Vote Container ===== */
.vote-container {
  padding: 0 10px;
  margin: 12px 0;
}

/* ===== Header ===== */
.vote-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.vote-title {
  font-size: 14px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5px;
}

.vote-meta {
  text-align: right;
}

.vote-meta .meta-line {
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.vote-meta .meta-sub {
  font-size: 11px;
  opacity: 0.6;
}

/* ===== Options ===== */
.vote-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}

.vote-option {
  border-radius: 14px;
  transition: 0.2s;
}

.vote-option button {
  width: 100%;
  padding: 10px 12px;
  border-radius: 10px;
  border: none;
  font-weight: 700;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  cursor: pointer;
  transition: 0.2s;
}

.vote-option button:hover {
  background: rgba(76, 175, 80, 0.25);
  transform: translateY(-1px);
}

/* 선택된 버튼 */
.vote-option button.is-selected {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
  color: #fff;
}

/* ===== Stats ===== */
.vote-stats {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
}

.vote-percent {
  width: 70px;
  font-size: 12px;
  font-weight: 600;
  color: #ffffff;
  text-align: right;
}

/* Progress Bar */
.vote-bar-wrap {
  flex: 1;
  height: 8px;
  background: rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow: hidden;
}

.vote-bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #4caf50, #81c784);
  transition: width 0.35s ease;
}

/* ===== Actions ===== */
.vote-actions {
  margin-top: 14px;
}

.vote-submit {
  width: 100%;
  padding: 12px;
  border-radius: 14px;
  border: none;
  font-weight: 800;
  font-size: 14px;
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  color: #ffffff;
  cursor: pointer;
  transition: 0.2s;
}

.vote-submit:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(76, 175, 80, 0.5);
}

.vote-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  box-shadow: none;
}

.vote-end {
  margin-top: 12px;
  text-align: center;
  font-size: 12px;
  color: #ffffff;
  opacity: 0.7;
}

.vote-toggle-icon {
  font-size: 12px;
  margin-top: 4px;
  opacity: 0.7;
}

#voteBody {
  overflow: hidden;
  transition:
    max-height 0.35s ease,
    opacity 0.25s ease;
  max-height: 1000px;
  opacity: 1;
}

.vote-collapsed #voteBody {
  max-height: 0;
  opacity: 0;
}

.vote-collapsed .vote-toggle-icon {
  transform: rotate(180deg);
}

.vote-option button:disabled {
  cursor: default;
  transform: none;
}

.vote-option button:disabled.is-selected {
  background: linear-gradient(135deg, #4caf50, #66bb6a);
  box-shadow: 0 6px 15px rgba(76, 175, 80, 0.4);
}

.vote-option button:disabled:not(.is-selected) {
  opacity: 0.4;
}

.reply-box {
  background: rgba(90, 90, 90, 0.582);
  border-left: 3px solid #333333;
  padding: 4px 8px;
  margin-bottom: 4px;
  font-size: 12px;
  border-radius: 4px;
}

body.dark-mode .chat-line {
}

.reply-container {
  margin-top: 5px;
}

.chat-line.reply {
  font-size: 13px;
  opacity: 0.9;
  margin-top: 4px;
}

.reply-nick {
  color: #81c784;
  margin-right: 5px;
}
.reply-arrow {
  display: inline-block;
  font-weight: bold;
}

.chat-line.reply {
  gap: 4px;
}