/* 시작 오프셋(모달 시작 높이) + 최대 높이 하드캡 */
:root{
  --cro-owner-modal-offset: 170px;              /* 전역 시작 높이 */
  --cro-owner-maxvh: 65vh;                      /* 카드 최대 높이 상한 */
}

/* 오버레이 & 카드 */
.cro-overlay{
  position:fixed; inset:0; z-index:2000; background:rgba(0,0,0,.45);
  display:flex; justify-content:center;
  align-items:flex-start;
  padding-top:var(--cro-owner-modal-offset);
}
/* 모바일에선 모바일용 변수가 있으면 그걸 우선 사용 */
@media (max-width: 480px){
  .cro-overlay{
    padding-top:var(--cro-owner-modal-offset-mobile, var(--cro-owner-modal-offset));
  }
}

.cro-card{
  width:min(720px,94vw);
  background:#fff;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
  overflow:hidden;
  border:1px solid #667085;

  /* ① 기본 하드캡(구형 브라우저용) */
  max-height: var(--cro-owner-maxvh);

  /* ② 가용공간(뷰포트 - 오프셋 - 여백)과 하드캡 중 더 작은 값 */
  max-height: min(var(--cro-owner-maxvh), calc(100vh - var(--cro-owner-modal-offset) - 2vh));

  display:flex;
  flex-direction:column;
}
/* svh 지원 브라우저에서 더 정확하게 */
@supports (height: 100svh){
  .cro-card{
    max-height: min(calc(100svh - var(--cro-owner-modal-offset) - 2svh), var(--cro-owner-maxvh));
  }
}
/* 모바일에선 모바일 오프셋 변수 반영 */
@media (max-width: 480px){
  @supports (height: 100svh){
    .cro-card{
      max-height: min(calc(100svh - var(--cro-owner-modal-offset-mobile, var(--cro-owner-modal-offset)) - 2svh), var(--cro-owner-maxvh));
    }
  }
  .cro-card{
    max-height: min(var(--cro-owner-maxvh), calc(100vh - var(--cro-owner-modal-offset-mobile, var(--cro-owner-modal-offset)) - 2vh));
  }
}

.cro-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:8px 10px;
  background:linear-gradient(to bottom,#9a9a9a,#6f6f6f);
  color:#f1f1f1;box-shadow:inset 0 1px #bdbdbd,inset 0 -1px #444;
  font-weight:700;font-size:.95rem;
  position:sticky; top:0; z-index:1;
}
.cro-x{background:none;border:0;color:#f1f1f1;font-size:18px;cursor:pointer}
.cro-body{
  padding:10px;background:#fff;font-size:.9rem;
  overflow:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior: contain;
}

/* 공통 */
.cro-err{padding:8px;color:#b00020}
.cro-empty{padding:10px 2px;color:#666}

.cro-top{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.cro-label{font-size:.9rem;color:#333}
.cro-select{height:30px;border:1px solid #b9c0d4;border-radius:8px;padding:0 8px;outline:none;background:#fff;font-size:.9rem}
.cro-select:focus{border-color:#6f6f6f;box-shadow:0 0 0 2px rgba(0,0,0,.05)}
.cro-stat{margin-left:auto;font-size:.9rem;color:#333}
.cro-stat b{font-weight:700}

.cro-row{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.cro-input{flex:1 1 auto;height:30px;padding:4px 8px;border:1px solid #b9c0d4;border-radius:8px;outline:none;font-size:.9rem}
.cro-input:focus{border-color:#6f6f6f;box-shadow:0 0 0 2px rgba(0,0,0,.05)}
.cro-add,.cro-del{height:30px;padding:0 12px;border-radius:8px;border:none;cursor:pointer;transition:transform .18s,filter .18s,box-shadow .18s,background .18s;font-size:.9rem}
.cro-add.same,.cro-del.same{height:30px;line-height:30px}
.cro-add{background:linear-gradient(145deg,#8d8d8d,#5c5c5c);color:#e2e2e2;box-shadow:inset 2px 2px 4px #4a4a4a,inset -2px -2px 4px #a5a5a5}
.cro-del{background:linear-gradient(145deg,#a44,#733);color:#f2eaea;box-shadow:inset 2px 2px 4px #5a2a2a,inset -2px -2px 4px #c47a7a}
.cro-add:hover{background:linear-gradient(145deg,#a0a0a0,#666);box-shadow:inset 1px 1px 3px #3a3a3a,inset -1px -1px 3px #cfcfcf,0 0 0 1px rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.20);transform:translateY(-1px)}
.cro-del:hover{background:linear-gradient(145deg,#b55,#844);box-shadow:inset 1px 1px 3px #4a1a1a,inset -1px -1px 3px #e0a0a0,0 0 0 1px rgba(255,255,255,.06),0 6px 14px rgba(0,0,0,.20);transform:translateY(-1px)}

.cro-list{list-style:none;margin:0;padding:0;border-top:1px solid #d4d7e2}
.cro-li{display:flex;align-items:center;justify-content:space-between;padding:8px 2px;border-bottom:1px solid #e9edf7}
.cro-id{font-weight:600;color:#222;font-size:.92rem}

/* 방장 뱃지 */
.owner-badge-ico{display:inline-block;margin-right:2px;vertical-align:middle;line-height:1;font-size:0.85em}
.owner-badge-ico .owner-back{
  color:#d4af37;
  background:
    radial-gradient(45% 45% at 30% 30%, #ffe58a 0%, rgba(255,255,255,0) 60%),
    linear-gradient(180deg, #f7d35a 0%, #d4af37 58%, #b98e1a 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  text-shadow: 0 0 1px rgba(0,0,0,.15);
}
.owner-badge-ico .owner-front{color:#ffffff;transform: translateY(-5%);text-shadow: 0 0 2px rgba(0,0,0,.4)}

/* 시스템 메시지 칩 */
.chat-system-line{text-align:center;margin:6px 0}
.chat-system-line .sys-chip{display:inline-block;max-width:92%;padding:5px 8px;border-radius:10px;font-weight:700;font-size:.9rem}
.chat-system-line.owner-system .sys-chip{border:1px solid rgba(212,175,55,.7);background:linear-gradient(180deg,rgba(255,248,219,.95),rgba(248,229,154,.9));color:#6d540a}
.chat-system-line.owner-system .sys-chip .fa{ color:#d4af37; }
.chat-system-line.clean-system .sys-chip{border:1px solid rgba(110,140,170,.7);background:linear-gradient(180deg,#f1f6ff,#e6eefb);color:#234}
.chat-system-line.clean-system .sys-chip .fa{ color:#5a7ca8; }

/* 모니터 섹션 */
.cro-sections{display:flex;flex-wrap:wrap;gap:10px}
.cro-box{flex:1 1 320px;background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:10px;box-shadow:0 1px 2px rgba(16,24,40,.04)}
.cro-sub{display:flex;align-items:center;gap:8px;margin-bottom:8px}
.cro-sub b{font-weight:700;color:#222;font-size:.95rem}
.cro-hint{font-size:.82rem;color:#667085}

/* 방청소 UI */
.seg{display:flex;border:1px solid #cbd5e1;border-radius:10px;overflow:hidden}
.seg-btn{background:#f8f9fd;border:0;padding:5px 9px;cursor:pointer;font-size:.88rem}
.seg-btn+ .seg-btn{border-left:1px solid #e6eaf2}
.seg-btn.active{background:#eef2fb;font-weight:700}
.chips{display:flex;align-items:center;gap:6px}
.chip{border:1px solid #cbd5e1;background:#fff;border-radius:18px;padding:4px 8px;cursor:pointer;font-size:.86rem}
.chip.on{background:#eef2fb;font-weight:700}
.cro-ghost{height:28px;padding:0 8px;border:1px dashed #c0c6da;background:#fff;border-radius:8px;color:#334e68;cursor:pointer;font-size:.86rem}
.adv{gap:8px;align-items:center}
.radio{display:inline-flex;align-items:center;gap:4px;font-size:.86rem}
.cro-inline{display:inline-flex;align-items:center;gap:6px}
.cro-input.short{width:96px}
.cro-row.end{justify-content:flex-end;gap:6px}
.cro-label.muted{margin-right:auto;color:#666}

/* 모바일 최적화(높이·폰트만 조정) */
@media (max-width: 480px){
  .cro-card{ width:96vw; }
  .cro-body{ padding:8px; font-size:.85rem }
  .cro-head{ padding:6px 8px; font-size:.9rem }
  .cro-box{ flex:1 1 100%; padding:8px }
  .cro-row{ gap:6px; margin-bottom:8px }
  .cro-select{ height:28px; font-size:.85rem }
  .cro-input{ height:28px; font-size:.85rem }
  .cro-add,.cro-del{ height:28px; font-size:.85rem; padding:0 10px }
  .cro-add.same,.cro-del.same{ height:28px; line-height:28px }
  .cro-input.short{ width:88px }
  .seg-btn{ padding:4px 8px; font-size:.84rem }
  .chip{ padding:3px 7px; font-size:.82rem }
}

/* 아주 낮은 뷰포트에서 오프셋 자동 감소(선택) */
@media (max-height: 640px){
  :root{ --cro-owner-modal-offset: 64px; }
}

/* ===== 모니터 공통 ===== */
.mon-grid{display:grid;grid-template-columns:1fr;gap:8px}
.mon-card{border:1px solid #e6eaf2;border-radius:10px;padding:8px;background:#fff}
.mon-title{font-weight:700;margin-bottom:6px;color:#222;font-size:.92rem}
.opkv{display:grid;grid-template-columns:1fr auto;gap:6px;font-size:.88rem}
.opkv>div{padding:4px 0;border-bottom:1px dashed #e6eaf2}
.opkv>div:last-child{border-bottom:none}
.optbl{width:100%;border-collapse:collapse;font-size:.88rem}
.optbl th,.optbl td{border-bottom:1px solid #e6eaf2;padding:6px 4px;text-align:left}
.oprow{display:flex;gap:6px;flex-wrap:wrap}
.opbadge{padding:2px 8px;border-radius:999px;border:1px solid #e5e7eb;font-size:.78rem;background:#eef2fb;color:#334e68}
.opbadge.ok{background:#ecfdf5;border-color:#d1fae5;color:#065f46}
.opbadge.warn{background:#fef9c3;border-color:#fde68a;color:#92400e}
.mon-spark{width:100%;height:110px;display:block;margin-top:6px}

/* 모니터 탭 */
.mon-tabs{display:flex;gap:6px;margin-bottom:6px;flex-wrap:wrap}
.mon-tab{border:1px solid #cbd5e1;background:#fff;border-radius:8px;padding:4px 10px;cursor:pointer;font-size:.86rem}
.mon-tab.on{background:#eef2fb;font-weight:700}
.mon-panels{display:block}
.mon-panel .mon-sublabel{margin:6px 0 4px;color:#334e68;font-size:.86rem}
.mon-ul{list-style:none;margin:0;padding:0}
.mon-ul li{padding:6px 4px;border-bottom:1px solid #e6eaf2}

/* 데스크탑 2열 */
@media (min-width: 720px){
  .mon-grid{grid-template-columns:1fr 1fr}
}

/* 채팅 금지/해제 알림 칩 색상 */
.chat-system-line.mute-system .sys-chip{border:1px solid rgba(200,60,60,.7);background:linear-gradient(180deg,#fff0f0,#ffe5e5);color:#5a1a1a}
.chat-system-line.mute-system .sys-chip .fa{ color:#c44; }
.chat-system-line.unmute-system .sys-chip{border:1px solid rgba(90,150,90,.7);background:linear-gradient(180deg,#f0fff2,#e5ffe9);color:#144d2a}
.chat-system-line.unmute-system .sys-chip .fa{ color:#2b8a3e; }


/* 공지 버튼 라벨/깜빡임 */
#chat_menu .btn-notice.notice-left { margin-right: auto; }
@keyframes nb_blink { 0%,100%{opacity:1} 50%{opacity:.35} }
#btn_notice.notice-blink { animation: nb_blink 1.2s linear infinite; }
#btn_notice .notice-label { margin-left:6px; font-weight:700; font-size:.9rem; }

/* 공지 모달 — 내부는 고정 높이 스크롤 대신 페이지처럼 세로로 확장 */
.notice-overlay{
  position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:3000;
  display:flex; align-items:flex-start; justify-content:center;
  overflow-y:auto; padding:80px 10px 40px;
}
.notice-card{
  background:#fff; width:min(680px,96vw);
  border-radius:10px; box-shadow:0 10px 30px rgba(0,0,0,.2);
  overflow:visible;
}
.notice-hd{ display:flex; align-items:center; justify-content:space-between; padding:10px 12px; border-bottom:1px solid #eee; }
.notice-hd h3{ margin:0; font-size:1rem; }
.notice-bd{ padding:10px 12px; }
.notice-btn{ border:0; border-radius:6px; padding:8px 12px; font-size:.9rem; cursor:pointer; }
.notice-close{ background:#e0e0e0; }
.notice-save{ background:#4caf50; color:#fff; }

/* 로딩 텍스트 */
.notice-loading{ color:#666; font-size:.9rem; margin:4px 0 8px; }

/* 작성 에디터(일반 창) */
.notice-editor{
  width:100%; min-height:120px; border:1px solid #ddd; border-radius:6px; padding:10px;
  outline:none; white-space:pre-wrap; overflow-wrap:break-word; background:#fff;
}
.notice-editor:empty:before{content:attr(data-placeholder); color:#aaa;}
.notice-ft{ padding:10px 12px; border-top:1px solid #eee; display:flex; gap:8px; align-items:flex-end; flex-wrap:wrap; }

/* 공지 리스트/카드 */
.notice-list{ list-style:none; margin:0; padding:0; }
.notice-item{
  border:1px solid #eef2f7; border-left-width:6px;
  border-radius:10px; padding:12px 12px; margin:12px 0;
  background:#ffffff;
}
.notice-text{ white-space:pre-wrap; word-break:break-word; line-height:1.58; color:#1f2937; }
.notice-meta{ font-size:.8rem; color:#6b7280; margin-top:8px; display:flex; justify-content:space-between; gap:8px; }
.notice-del{ background:none; border:0; color:#e11d48; cursor:pointer; font-size:.85rem; }

/* 카드 색상(은은한 6색 순환) */
.notice-item:nth-child(6n+1){ border-left-color:#60a5fa; background:linear-gradient(180deg,#f8fbff, #ffffff 40%); }
.notice-item:nth-child(6n+2){ border-left-color:#34d399; background:linear-gradient(180deg,#f6fef9, #ffffff 40%); }
.notice-item:nth-child(6n+3){ border-left-color:#f59e0b; background:linear-gradient(180deg,#fff9ef, #ffffff 40%); }
.notice-item:nth-child(6n+4){ border-left-color:#a78bfa; background:linear-gradient(180deg,#faf8ff, #ffffff 40%); }
.notice-item:nth-child(6n+5){ border-left-color:#f43f5e; background:linear-gradient(180deg,#fff6f8, #ffffff 40%); }
.notice-item:nth-child(6n){   border-left-color:#22d3ee; background:linear-gradient(180deg,#f5feff, #ffffff 40%); }

/* 모바일 최적화 */
@media (max-width: 480px){
  .notice-card{ width:96vw; }
  .notice-hd{ padding:8px 10px; }
  .notice-bd{ padding:8px 10px; }
  .notice-editor{ min-height:100px; }
}