@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700;900&family=Space+Mono:ital,wght@0,400;0,700;1,400&display=swap&font-display=swap');

/* ══════════════════════════════════════════════
   CSS 토큰 — Discord-inspired Dark Theme
══════════════════════════════════════════════ */
:root,
[data-theme="dark"] {
  --bg:           #313338;
  --bg2:          #2b2d31;
  --bg3:          #1e1f22;
  --panel:        #2b2d31;
  --panel-border: rgba(255,255,255,0.06);
  --glass:        rgba(255,255,255,0.04);
  --glass-h:      rgba(255,255,255,0.07);

  --text:         #dbdee1;
  --text2:        #949ba4;
  --text3:        #72767d;

  --accent:       #5865f2;
  --accent-dim:   rgba(88,101,242,0.15);
  --accent-glow:  rgba(88,101,242,0.3);
  --green:        #23a55a;
  --green-dim:    rgba(35,165,90,0.12);
  --green-glow:   rgba(35,165,90,0.25);
  --yellow:       #f0b232;
  --purple:       #b5a1ff;
  --purple-dim:   rgba(181,161,255,0.12);
  --pink:         #e291e8;

  --timer-idle:     #b5bac1;
  --timer-active:   #23a55a;
  --timer-shadow:   rgba(35,165,90,0.28);
  --accum-color:    #5865f2;
  --accum-shadow:   rgba(88,101,242,0.25);

  --streak-fg:    #f0b232;
  --streak-bg:    rgba(240,178,50,0.1);
  --streak-border:rgba(240,178,50,0.22);

  --input-bg:     #383a40;
  --input-border: #3d4047;
  --scrollbar:    rgba(255,255,255,0.07);

  --msg-hover:    rgba(4,4,5,0.07);
  --msg-own-bg:   rgba(88,101,242,0.06);

  --sh-lg: 0 8px 24px rgba(0,0,0,0.4);
  --sh-md: 0 4px 16px rgba(0,0,0,0.3);
  --sh-sm: 0 2px 8px  rgba(0,0,0,0.25);

  --r-xs:4px; --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:16px; --r-full:9999px;
}

[data-theme="light"] {
  --bg:           #f2f3f5;
  --bg2:          #e3e5e8;
  --bg3:          #ffffff;
  --panel:        #ffffff;
  --panel-border: rgba(0,0,0,0.08);
  --glass:        rgba(0,0,0,0.025);
  --glass-h:      rgba(0,0,0,0.05);

  --text:         #2e3338;
  --text2:        #4f5660;
  --text3:        #96a0aa;

  --accent:       #5865f2;
  --accent-dim:   rgba(88,101,242,0.1);
  --accent-glow:  rgba(88,101,242,0.25);
  --green:        #1a7f4b;
  --green-dim:    rgba(26,127,75,0.1);
  --green-glow:   rgba(26,127,75,0.2);
  --yellow:       #c27c0e;
  --purple:       #5a3db5;
  --purple-dim:   rgba(90,61,181,0.1);
  --pink:         #c04eb5;

  --timer-idle:     #2e3338;
  --timer-active:   #1a7f4b;
  --timer-shadow:   rgba(26,127,75,0.18);
  --accum-color:    #5865f2;
  --accum-shadow:   rgba(88,101,242,0.18);

  --streak-fg:    #c27c0e;
  --streak-bg:    rgba(194,124,14,0.08);
  --streak-border:rgba(194,124,14,0.18);

  --input-bg:     #ebedef;
  --input-border: #d4d7dc;
  --scrollbar:    rgba(0,0,0,0.09);

  --msg-hover:    rgba(6,6,7,0.04);
  --msg-own-bg:   rgba(88,101,242,0.05);

  --sh-lg: 0 8px 24px rgba(0,0,0,0.08);
  --sh-md: 0 4px 16px rgba(0,0,0,0.06);
  --sh-sm: 0 2px 8px  rgba(0,0,0,0.04);
}

/* ── Reset ───────────────────────────────────── */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { height:100%; }
body {
  font-family:'Noto Sans KR', sans-serif;
  background: var(--bg);
  color: var(--text);
  height: 100%;
  overflow: hidden;
  transition: background .3s, color .3s;
  user-select: none;
  -webkit-user-select: none;
}

/* 채팅/입력 텍스트 선택 허용 */
.chat-msg-text,
#chat-input,
.chat-input-wrap input,
#chat-edit-input,
.form-group input,
.form-group textarea {
  user-select: text;
  -webkit-user-select: text;
}

::-webkit-scrollbar          { width:4px; height:4px; }
::-webkit-scrollbar-track    { background:transparent; }
::-webkit-scrollbar-thumb    { background:var(--scrollbar); border-radius:99px; }

/* ── App Shell ───────────────────────────────── */
.app-wrapper {
  position:relative; z-index:1;
  display:grid;
  grid-template-columns: 240px 1fr 280px;
  grid-template-rows: 48px 1fr;
  height:100vh;
}

/* ── Topbar ──────────────────────────────────── */
.topbar {
  grid-column: 1/-1;
  display:flex; align-items:center; justify-content:space-between;
  padding: 0 16px;
  background: var(--bg3);
  border-bottom: 1px solid var(--panel-border);
  z-index: 10;
  box-shadow: 0 1px 0 rgba(0,0,0,0.2);
}

.topbar-logo {
  display:flex; align-items:center; gap:9px;
  font-weight:700; font-size:.9rem; color:var(--text); letter-spacing:-.01em;
  user-select:none;
}
.logo-icon { font-size:1.2rem; }
.logo-sub  { font-size:.6rem; font-weight:400; color:var(--text2); }

.topbar-user-btn {
  display:flex; align-items:center; gap:8px;
  background: transparent; border:1px solid transparent;
  border-radius:var(--r-sm); padding:4px 10px 4px 4px;
  cursor:pointer; transition:background .15s, border-color .15s;
  color:var(--text);
}
.topbar-user-btn:hover { background:var(--glass-h); border-color:var(--panel-border); }
.topbar-user-btn:hover .edit-hint { color:var(--accent); }
.edit-hint { font-size:.68rem; color:var(--text3); transition:color .15s; }

.topbar-actions { display:flex; gap:4px; }

/* ── Sidebars & Main ─────────────────────────── */
.sidebar-left {
  background:var(--bg2); border-right:1px solid var(--panel-border);
  overflow-y: hidden;
  display:flex; flex-direction:column;
}

.sidebar-right {
  background:var(--bg2); border-left:1px solid var(--panel-border);
  display:flex; flex-direction:column; overflow:hidden;
}
.main-content {
  display:flex; flex-direction:column; align-items:center;
  padding:20px 16px; overflow-y:auto; gap:14px;
  background: var(--bg);
}

/* ── Buttons ─────────────────────────────────── */
button {
  font-family:'Noto Sans KR', sans-serif; font-weight:700;
  cursor:pointer; border:none; outline:none;
  transition:all .15s ease;
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  user-select:none;
}
button:active { transform:scale(.96); }

.btn-primary {
  background:var(--accent); color:#fff;
  padding:10px 18px; border-radius:var(--r-sm); font-size:.85rem;
  box-shadow: 0 2px 8px var(--accent-glow);
}
.btn-primary:hover { filter:brightness(1.08); }
.btn-primary:disabled { opacity:.4; cursor:not-allowed; transform:none; }

.btn-secondary {
  background:var(--glass-h); border:1px solid var(--panel-border);
  color:var(--text); padding:10px 18px; border-radius:var(--r-sm); font-size:.85rem;
}
.btn-secondary:hover { background:rgba(255,255,255,.06); }

.btn-icon {
  background:transparent; border:1px solid transparent;
  color:var(--text2); width:32px; height:32px;
  border-radius:var(--r-sm); font-size:.85rem; padding:0; flex-shrink:0;
}
.btn-icon:hover { background:var(--glass-h); color:var(--text); border-color:var(--panel-border); }

/* ── Profile ─────────────────────────────────── */
.profile-pic {
  width:26px; height:26px; border-radius:50%;
  object-fit:cover; border:2px solid var(--panel-border);
  flex-shrink:0;
}
.user-badge-tag {
  padding:2px 8px; border-radius:var(--r-full); font-size:.65rem; font-weight:800;
  background:var(--accent); color:#fff;
  white-space:nowrap;
}
.user-name { font-size:.82rem; font-weight:600; color:var(--text); white-space:nowrap; max-width:110px; overflow:hidden; text-overflow:ellipsis; }

/* ══════════════════════════════════════════════
   TIMER CARD
══════════════════════════════════════════════ */
.timer-card {
  width:100%; max-width:460px;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--r-xl); padding:22px 24px 20px;
  text-align:center; box-shadow:var(--sh-md);
  position:relative; overflow:hidden;
}

.timer-top-row {
  display:flex; align-items:center; justify-content:space-between;
  margin-bottom:18px;
}

.timer-status-pill {
  display:inline-flex; align-items:center; gap:7px;
  padding:4px 11px; border-radius:var(--r-full);
  background:var(--glass); border:1px solid var(--panel-border);
  font-size:.76rem; font-weight:600; color:var(--text2);
  transition:all .25s;
}
.timer-status-pill.studying {
  background:var(--green-dim); border-color:rgba(35,165,90,.28);
  color:var(--green);
}
.timer-status-pill.resting {
  background:rgba(240,178,50,.1); border-color:rgba(240,178,50,.25);
  color:var(--yellow);
}

.status-dot {
  width:7px; height:7px; border-radius:50%;
  background:var(--text3); flex-shrink:0; transition:background .25s;
}
.status-dot.studying { background:var(--green); animation:pulse-dot 2s infinite; }
.status-dot.resting  { background:var(--yellow); }

@keyframes pulse-dot {
  0%,100% { box-shadow:0 0 0 3px rgba(35,165,90,.16); }
  50%     { box-shadow:0 0 0 6px rgba(35,165,90,.05); }
}

.streak-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 11px; border-radius:var(--r-full);
  background:var(--streak-bg); border:1px solid var(--streak-border);
  font-size:.74rem; font-weight:800; color:var(--streak-fg);
}
.streak-fire { display:inline-block; animation:fire .85s infinite alternate; }
@keyframes fire {
  0%   { transform:scale(1)    rotate(-4deg); }
  100% { transform:scale(1.18) rotate(4deg); }
}

/* 듀얼 타이머 */
.dual-timer-wrap {
  display:flex; flex-direction:column; gap:0;
  margin-bottom:20px;
}
.accum-timer-section { padding: 14px 0 12px; }
.timer-section-label {
  font-size:.68rem; font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--text3);
  margin-bottom:7px;
}
.accum-timer {
  font-family:'Space Mono', monospace;
  font-size:2.9rem; font-weight:700; letter-spacing:.04em; line-height:1;
  color:var(--accum-color);
  text-shadow: 0 0 24px var(--accum-shadow);
  transition:color .3s, text-shadow .3s;
}
.timer-divider {
  width:100%; height:1px;
  background:var(--panel-border);
  margin: 3px 0;
}
.session-timer-section { padding: 12px 0 0; }
.live-timer {
  font-family:'Space Mono', monospace;
  font-size:4.2rem; font-weight:700; letter-spacing:.04em; line-height:1;
  color:var(--timer-idle);
  transition:color .3s, text-shadow .3s;
}
.live-timer.studying {
  color:var(--timer-active);
  text-shadow: 0 0 36px var(--timer-shadow), 0 0 10px var(--timer-shadow);
}

.btn-toggle {
  width:100%; height:48px;
  border-radius:var(--r-md); font-size:.92rem; font-weight:700; color:#fff;
  background: var(--accent);
  box-shadow:0 4px 14px var(--accent-glow);
  margin-bottom:10px;
  position:relative; overflow:hidden;
  transition: background .25s, box-shadow .25s, transform .13s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  white-space: nowrap;
}
.btn-toggle::after {
  content:''; position:absolute; inset:0;
  background:rgba(255,255,255,0); transition:background .15s;
}
.btn-toggle:hover::after  { background:rgba(255,255,255,.07); }
.btn-toggle:active        { transform:scale(.97); }
.btn-toggle.studying {
  background: #ed4245;
  box-shadow:0 4px 14px rgba(237,66,69,.3);
}
.btn-toggle .toggle-icon {
  width: 18px;
  height: 18px;
  min-width: 18px;
  flex-shrink: 0;
  display: block;
  position: relative;
  z-index: 1;
}
.btn-toggle #toggle-label {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  line-height: 1;
}

/* 순공 자랑 버튼 */
.btn-flex {
  width:100%; height:40px;
  border-radius:var(--r-md); font-size:.84rem; font-weight:700;
  background:var(--purple-dim); color:var(--purple);
  border:1px solid rgba(181,161,255,.22);
  transition:background .15s, opacity .15s;
}
.btn-flex:hover:not(:disabled) { background:rgba(181,161,255,.2); }
.btn-flex:disabled {
  opacity:.45; cursor:not-allowed; transform:none;
  font-size:.75rem;
}

/* ══════════════════════════════════════════════
   RANKING CARD
══════════════════════════════════════════════ */
.ranking-card {
  width:100%; max-width:460px;
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--r-xl); overflow:hidden;
  box-shadow:var(--sh-md);
}
.ranking-tabs {
  display:flex; border-bottom:1px solid var(--panel-border);
  background:var(--bg2);
}
.ranking-tab {
  flex:1; padding:10px 0; font-size:.78rem; font-weight:700;
  background:transparent; color:var(--text2);
  border-radius:0; transition:color .13s, background .13s;
  border-bottom:2px solid transparent;
}
.ranking-tab:active { transform:none; }
.ranking-tab.active { color:var(--accent); border-bottom-color:var(--accent); background:var(--glass); }
.ranking-tab:hover:not(.active) { background:var(--glass); color:var(--text); }
.ranking-list {
  padding:8px 0; max-height:280px; overflow-y:auto;
}
.ranking-empty {
  text-align:center; font-size:.8rem; color:var(--text3);
  padding:30px 0;
}
.ranking-item {
  display:flex; align-items:center; gap:10px;
  padding:6px 14px; transition:background .1s;
}
.ranking-item:hover { background:var(--glass); }
.ranking-item img {
  width:30px; height:30px; border-radius:50%; object-fit:cover;
  flex-shrink:0;
}
.rank-num {
  font-size:.78rem; font-weight:800; color:var(--text3);
  width:22px; text-align:center; flex-shrink:0;
}
.rank-num.r1 { color:#f0b232; font-size:.9rem; }
.rank-num.r2 { color:#b5bac1; }
.rank-num.r3 { color:#cd7f32; }
.ranking-info { flex:1; min-width:0; }
.ranking-name {
  font-size:.82rem; font-weight:700; color:var(--text);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ranking-badge { font-size:.67rem; color:var(--text3); }
.ranking-time  { font-size:.78rem; font-weight:700; color:var(--accent); flex-shrink:0; }

/* ══════════════════════════════════════════════
   온라인 유저 사이드바
══════════════════════════════════════════════ */
.sidebar-section-title {
  font-size:.67rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--text2); padding:16px 12px 6px; display:flex; align-items:center; gap:6px;
  flex-shrink: 0;
}
.online-count {
  background:var(--accent-dim); color:var(--accent);
  font-size:.66rem; padding:1px 7px; border-radius:var(--r-full);
}

#online-users-list {
  list-style:none;
  padding:0 6px 8px;
  flex: 1 1 0;
  min-height: 0;
  overflow-y: auto;
}

.online-user-item {
  display:flex; align-items:center; gap:9px;
  padding:4px 7px; border-radius:var(--r-sm);
  cursor:default; transition:background .1s;
}
.online-user-item:hover { background:var(--glass-h); }
.online-user-item .pic-wrap { position:relative; flex-shrink:0; }
.online-user-item img {
  width:28px; height:28px; border-radius:50%; object-fit:cover; display:block;
}
.status-indicator {
  position:absolute; bottom:-1px; right:-1px;
  width:9px; height:9px; border-radius:50%;
  background:var(--text3); border:2px solid var(--bg2);
}
.status-indicator.studying { background:var(--green); }
.status-indicator.resting  { background:var(--yellow); }
.status-indicator.online   { background:var(--green); }
.online-user-info { flex:1; min-width:0; }
.online-user-name  { font-size:.79rem; font-weight:600; color:var(--text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.online-user-badge { font-size:.65rem; color:var(--text3); }

.sidebar-profile-panel {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 9px 10px;
  background: var(--bg3);
  border-top: 1px solid var(--panel-border);
  cursor: pointer;
  transition: background .15s;
  user-select: none;
}
.sidebar-profile-panel:hover { background: rgba(255,255,255,.04); }
.sidebar-profile-panel .s-pic {
  width: 32px; height: 32px;
  border-radius: 50%; object-fit: cover;
  border: 2px solid var(--panel-border);
  flex-shrink: 0;
  display: block;
}
.sidebar-profile-panel .s-info {
  flex: 1; min-width: 0;
}
.sidebar-profile-panel .s-name {
  font-size: .82rem; font-weight: 700;
  color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  line-height: 1.3;
}
.sidebar-profile-panel .s-badge {
  font-size: .66rem; color: var(--text3);
  margin-top: 1px;
  line-height: 1.2;
}
.sidebar-profile-panel .s-edit-icon {
  font-size: .76rem;
  color: var(--text3);
  flex-shrink: 0;
  transition: color .15s;
  opacity: 0;
  transition: opacity .15s;
}
.sidebar-profile-panel:hover .s-edit-icon { opacity: 1; color: var(--accent); }

/* ══════════════════════════════════════════════
   채팅 사이드바
══════════════════════════════════════════════ */
.chat-header {
  padding:10px 14px 9px; font-size:.73rem; font-weight:700;
  letter-spacing:.05em; text-transform:uppercase; color:var(--text2);
  border-bottom:1px solid var(--panel-border);
  flex-shrink:0;
  display:flex; align-items:center; justify-content:space-between;
}

#chat-messages {
  flex:1; overflow-y:auto; padding:4px 0 8px;
  display:flex; flex-direction:column; gap:0;
  background: var(--bg2);
  justify-content: flex-start;
}

.chat-msg {
  display:flex; gap:10px; padding:2px 12px;
  transition:background .1s;
  position: relative;
  min-height: 0;
  flex-shrink: 0 !important;
}
.chat-msg:hover { background:var(--msg-hover); }
.chat-msg.is-own { background:var(--msg-own-bg); }
.chat-msg.is-own:hover { background:rgba(88,101,242,.09); }

.chat-msg.compact {
  padding-top: 1px;
  padding-bottom: 1px;
  margin-top: 0;
}
.chat-msg.compact .chat-msg-pic-wrap { visibility:hidden; }
.chat-msg.new-sender {
  margin-top: 8px;
  padding-top: 2px;
}

.chat-msg-pic-wrap { 
  flex-shrink: 0; 
  padding-top: 1px; 
  width: 36px; /* 이 부분을 추가하여 간격을 고정합니다 */
}
.chat-msg img { width:36px; height:36px; border-radius:50%; object-fit:cover; }
.chat-msg img.custom-emoji-inline { border-radius:5px; }

.chat-msg-body { flex:1; min-width:0; }
.chat-msg-header {
  display:flex; align-items:baseline; gap:6px; margin-bottom:1px;
}
.chat-msg-text  {
  font-size:.84rem; color:var(--text); word-break:break-word;
  line-height:1.6; /* 모든 줄 간격을 일정하게 맞춤 */
  white-space:pre-wrap;
  margin-top: 1px; /* 첫 줄과 헤더 사이의 간격을 본문 줄 간격과 일치 배정 */
}
.chat-msg-name  { font-size:.83rem; font-weight:700; color:var(--text); }
.chat-msg-name:hover { text-decoration: underline; cursor: pointer; }
.chat-msg-badge { font-size:.65rem; color:var(--text3); }
.chat-msg-time  { font-size:.65rem; color:var(--text3); margin-left:2px; }
.compact-time {
  display:none; position:absolute; left:12px; top:50%;
  transform:translateY(-50%);
  font-size:.62rem; color:var(--text3); width:36px; text-align:center;
  pointer-events:none;
}
.chat-msg.compact:hover .compact-time { display:block; }

.edited-mark {
  font-size:.62rem; color:var(--text3);
  margin-left:4px; font-style:italic;
}

.chat-msg-actions {
  position:absolute; right:8px; top:-16px;
  display:none; gap:2px;
  background:var(--bg3); border:1px solid var(--panel-border);
  border-radius:var(--r-sm); padding:3px 4px;
  z-index:10; box-shadow:var(--sh-sm);
}
/* .chat-msg:hover .chat-msg-actions { display:flex; } */
.chat-action-btn {
  background:transparent; border:none;
  color:var(--text2); font-size:.75rem;
  padding:3px 6px; border-radius:4px; cursor:pointer;
  font-weight:400;
  transition:background .12s, color .12s;
}
.chat-action-btn:hover { background:var(--glass-h); color:var(--text); }
.chat-action-btn.delete { color:var(--text2); }
.chat-action-btn.delete:hover { background:rgba(237,66,69,.15); color:#ed4245; }

.system-msg {
  text-align:center; font-size:.7rem; color:var(--text3);
  padding:4px 12px;
  display:flex; align-items:center; gap:8px;
  flex-shrink: 0;
}
.system-msg::before,
.system-msg::after {
  content:''; flex:1; height:1px; background:var(--panel-border);
}

.status-msg {
  display:flex; align-items:center; gap:8px;
  padding:4px 12px; font-size:.78rem;
  flex-shrink: 0;
}
.status-msg-icon { font-size:.85rem; flex-shrink:0; }
.status-msg-text { color:var(--text3); }
.status-msg-text strong { color:var(--text2); font-weight:600; }

.flex-msg {
  background:var(--purple-dim); border-left:3px solid var(--purple);
  margin: 4px 12px; border-radius:0 var(--r-sm) var(--r-sm) 0;
  padding:8px 10px;
  animation:flex-pop .28s cubic-bezier(.34,1.56,.64,1);
  flex-shrink: 0;
}
@keyframes flex-pop { from{transform:scale(.92);opacity:0} to{transform:scale(1);opacity:1} }

.md-bold   { font-weight:800; }
.md-italic { font-style:italic; }
.md-strike { text-decoration:line-through; color:var(--text2); }

@keyframes msg-in { from{opacity:0;transform:translateY(2px)} to{opacity:1;transform:none} }
.msg-anim { animation:msg-in .14s ease; }

.chat-format-hint { display: none !important; }
.chat-input-wrap {
  padding:8px 12px; border-top:1px solid var(--panel-border);
  display:flex; gap:8px; align-items:flex-end;
  background:var(--bg2); flex-shrink:0;
}
.chat-input-inner {
  flex:1; background:var(--input-bg);
  border:none; border-radius:var(--r-sm);
  padding:0;
  display:flex; flex-direction:column;
  overflow:hidden;
}
.chat-input-inner input {
  flex:1; background:transparent; border:none;
  padding:9px 12px;
  font-family:'Noto Sans KR',sans-serif; font-size:.84rem;
  color:var(--text); outline:none;
}
.chat-input-inner input::placeholder{ color:var(--text3); }
.btn-send {
  background:var(--accent); color:#fff;
  width:34px; height:34px; border-radius:var(--r-sm); font-size:.85rem;
  flex-shrink:0; padding:0; box-shadow:0 2px 8px var(--accent-glow);
}
.btn-send:hover { filter:brightness(1.1); }

/* ── 이모티콘 픽커 버튼 ──────────────────────── */
.btn-emoji-picker {
  background:transparent; border:none;
  color:var(--text2); width:34px; height:40px;
  border-radius:var(--r-sm); font-size:1.35rem; padding:0;
  flex-shrink:0; transition:background .12s, color .12s;
}

/* ══════════════════════════════════════════════
   모달 공통
══════════════════════════════════════════════ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  display:flex; align-items:center; justify-content:center;
  z-index:9000; animation:overlay-in .18s ease;
}
@keyframes overlay-in { from{opacity:0} to{opacity:1} }
.hidden { display:none !important; }
.modal-box {
  background:var(--bg2); border:1px solid var(--panel-border);
  border-radius:var(--r-xl); padding:24px; width:400px; max-width:95vw;
  box-shadow:var(--sh-lg); animation:modal-in .22s cubic-bezier(.34,1.56,.64,1);
  position:relative;
}
@keyframes modal-in { from{transform:scale(.9) translateY(10px);opacity:0} to{transform:scale(1);opacity:1} }
.modal-title {
  font-size:1rem; font-weight:800; margin-bottom:18px;
  display:flex; align-items:center; gap:7px; color:var(--text);
}
.form-group { margin-bottom:14px; }
.form-group label {
  display:block; font-size:.74rem; font-weight:700; color:var(--text2);
  margin-bottom:5px; letter-spacing:.04em; text-transform:uppercase;
}
.form-group select,
.form-group input[type="text"],
.form-group textarea {
  width:100%; background:var(--input-bg); border:1px solid var(--input-border);
  border-radius:var(--r-sm); padding:9px 12px;
  font-family:'Noto Sans KR',sans-serif; font-size:.84rem;
  color:var(--text); outline:none; transition:border-color .16s;
  user-select:text; -webkit-user-select:text;
}
.form-group select:focus,
.form-group input[type="text"]:focus,
.form-group textarea:focus { border-color:var(--accent); }
option { background:var(--bg2); color:var(--text); }
.modal-btn-row { display:flex; gap:8px; margin-top:18px; }
.modal-btn-row button { flex:1; padding:10px; border-radius:var(--r-sm); font-size:.85rem; }

.profile-edit-pic-wrap {
  display:flex; flex-direction:column; align-items:center; gap:10px; margin-bottom:4px;
}
.profile-edit-preview {
  width:80px; height:80px; border-radius:50%; object-fit:cover;
  border:3px solid var(--panel-border);
  box-shadow:0 0 0 4px var(--glass);
  transition:border-color .16s;
}
.profile-edit-preview:hover { border-color:var(--accent); }
.profile-edit-upload-btn {
  display:inline-flex; align-items:center; gap:5px;
  cursor:pointer; font-size:.76rem; font-weight:700; color:var(--accent);
  padding:5px 13px; border-radius:var(--r-full);
  background:var(--accent-dim); border:1px solid rgba(88,101,242,.25);
  transition:background .15s;
}
.profile-edit-upload-btn:hover { background:rgba(88,101,242,.22); }
.cooldown-notice {
  display:flex; align-items:center; gap:6px;
  font-size:.78rem; color:var(--yellow); font-weight:600;
  padding:8px 12px; margin-bottom:4px;
  background:rgba(240,178,50,.07); border:1px solid rgba(240,178,50,.18);
  border-radius:var(--r-sm);
}

/* 뱃지 도감 */
.badge-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:7px;
  max-height:340px; overflow-y:auto; margin-top:2px;
  padding-right:2px;
}
.badge-item {
  background:var(--glass); border:1px solid var(--panel-border);
  border-radius:var(--r-md); padding:12px 9px;
  display:flex; flex-direction:column; align-items:center;
  gap:4px; text-align:center; transition:all .12s;
}
.badge-item.unlocked       { border-color:rgba(240,178,50,.28); background:rgba(240,178,50,.05); }
.badge-item.unlocked:hover { border-color:rgba(240,178,50,.48); background:rgba(240,178,50,.08); }
.badge-item.locked         { opacity:.3; filter:grayscale(.9); }
.badge-item-icon { font-size:1.6rem; line-height:1; }
.badge-item-name { font-size:.76rem; font-weight:800; color:var(--text); }
.badge-item-desc { font-size:.66rem; color:var(--text2); line-height:1.4; }

/* ══════════════════════════════════════════════
   로그인 화면
══════════════════════════════════════════════ */
#auth-screen {
  position:fixed; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:var(--bg); z-index:8000;
}
.auth-box {
  background:var(--panel); border:1px solid var(--panel-border);
  border-radius:var(--r-xl); padding:40px 32px; width:370px; max-width:94vw;
  text-align:center; box-shadow:var(--sh-lg); position:relative; overflow:hidden;
}
.auth-logo     { font-size:2.4rem; margin-bottom:7px; line-height:1; }
.auth-title    { font-size:1.35rem; font-weight:900; margin-bottom:5px; letter-spacing:-.02em; color:var(--text); }
.auth-subtitle { font-size:.82rem; color:var(--text2); margin-bottom:22px; line-height:1.55; }
.auth-features { display:flex; flex-direction:column; gap:7px; margin-bottom:22px; text-align:left; }
.auth-feature {
  display:flex; align-items:center; gap:9px; font-size:.8rem; color:var(--text2);
  padding:7px 10px; background:var(--glass); border-radius:var(--r-sm);
  border:1px solid var(--panel-border);
}
.auth-feature-icon { font-size:.9rem; flex-shrink:0; }

/* ══════════════════════════════════════════════
   Toast
══════════════════════════════════════════════ */
#toast-container {
  position: fixed;
  left: 252px;
  bottom: 20px;
  top: auto;
  right: auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 9999;
  align-items: flex-start;
  pointer-events: none;
}
.toast {
  background:var(--bg3); border:1px solid var(--panel-border);
  border-radius:var(--r-md); padding:9px 18px; font-size:.82rem; font-weight:600;
  box-shadow:var(--sh-md); display:flex; align-items:center; gap:7px;
  max-width:360px; min-width:160px;
  animation:toast-in .3s cubic-bezier(.34,1.56,.64,1); color:var(--text);
  pointer-events: auto;
  white-space: normal;
  word-break: keep-all;
  line-height: 1.4;
}
.toast.out      { animation:toast-out .22s ease forwards; }
.toast-warn     { border-color:rgba(240,178,50,.3); }
.toast-badge    { background:rgba(240,178,50,.08); border-color:rgba(240,178,50,.28); }
@keyframes toast-in  { from{transform:translateY(12px);opacity:0} to{transform:translateY(0);opacity:1} }
@keyframes toast-out { from{transform:translateY(0);opacity:1} to{transform:translateY(10px);opacity:0} }

/* ══════════════════════════════════════════════
   반응형
══════════════════════════════════════════════ */
@media (max-width:1000px) {
  .app-wrapper { grid-template-columns:200px 1fr 260px; }
  #toast-container { left: 212px; }
}
@media (max-width:720px) {
  .app-wrapper {
    grid-template-columns:1fr;
    grid-template-rows:48px 1fr 52px;
    height:auto; min-height:100vh; overflow:visible;
  }
  body { overflow:auto; }
  .topbar       { grid-column:1; position:sticky; top:0; z-index:20; }
  .sidebar-left { display:none; }
  .main-content { grid-column:1; padding:12px; }
  .sidebar-right{ grid-column:1; height:300px; }
  .live-timer   { font-size:3rem; }
  .accum-timer  { font-size:2.2rem; }
  #toast-container { left: 12px; bottom: 16px; }
}

/* ══ 뱃지 가독성 개선 ══ */
.online-user-badge { font-size: .65rem; color: var(--text2); }
.chat-msg-badge    { font-size: .65rem; color: var(--text2); }
.sidebar-profile-panel .s-badge { font-size: .66rem; color: var(--text2); margin-top: 1px; line-height: 1.2; }
.ranking-badge { font-size: .67rem; color: var(--text2); }

/* ══ 공지 메시지 스타일 ══ */
.announce-msg {
  margin: 6px 12px;
  border-radius: var(--r-sm);
  background: rgba(88,101,242,0.10);
  border: 1px solid rgba(88,101,242,0.28);
  border-left: 3px solid var(--accent);
  padding: 9px 12px;
  flex-shrink: 0;
  animation: msg-in .18s ease;
}
.announce-msg-inner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.announce-icon { font-size: 1rem; flex-shrink: 0; line-height: 1.4; }
.announce-sender {
  font-size: .76rem; font-weight: 700; color: var(--accent);
  margin-bottom: 3px; display: flex; align-items: center; gap: 5px;
}
.announce-label {
  font-size: .62rem; font-weight: 800;
  background: var(--accent); color: #fff;
  padding: 1px 6px; border-radius: var(--r-full); letter-spacing: .04em;
}
.announce-text {
  font-size: .84rem; color: var(--text);
  word-break: break-word; line-height: 1.45; white-space: pre-wrap;
}

/* ══ 공지 전송 모달 textarea ══ */
#announce-input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  padding: 10px 13px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: .86rem;
  color: var(--text);
  outline: none;
  resize: vertical;
  transition: border-color .18s;
  user-select: text;
  -webkit-user-select: text;
  min-height: 90px;
}
#announce-input:focus { border-color: var(--accent); }
#announce-input::placeholder { color: var(--text3); }
.announce-char-count { font-size: .7rem; color: var(--text3); text-align: right; margin-top: 4px; }
.announce-char-count.warn { color: var(--yellow); }

/* ══ 공지사항 열람 모달 ══ */
.announce-list-container {
  flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 10px;
  padding-right: 2px; max-height: calc(80vh - 120px);
}
.announce-list-empty { text-align: center; font-size: .85rem; color: var(--text3); padding: 32px 0; }
.announce-list-item {
  background: var(--glass); border: 1px solid var(--panel-border);
  border-left: 3px solid var(--yellow); border-radius: var(--r-md);
  padding: 12px 14px; transition: background .12s;
}
.announce-list-item:hover { background: var(--glass-h); }
.announce-list-meta {
  display: flex; align-items: center; gap: 7px; margin-bottom: 7px; flex-wrap: wrap;
}
.announce-list-pic { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.announce-list-name  { font-size: .8rem; font-weight: 700; color: var(--text); }
.announce-list-badge { font-size: .68rem; color: var(--text2); }
.announce-list-date  { font-size: .68rem; color: var(--text3); margin-left: auto; }
.announce-list-msg   { font-size: .84rem; color: var(--text); word-break: break-word; line-height: 1.5; white-space: pre-wrap; }

/* ══ 공지 삭제 인라인 확인 ══ */
.announce-chat-delete-confirm {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px; padding: 8px 10px;
  background: rgba(237,66,69,0.08); border: 1px solid rgba(237,66,69,0.25);
  border-radius: var(--r-sm); font-size: .82rem; color: var(--text2);
  animation: msg-in .15s ease;
}
.announce-chat-delete-confirm span { flex: 1; }

/* ══════════════════════════════════════════════
   이모티콘 픽커 팝업
══════════════════════════════════════════════ */
.emoji-picker-popup {
  position: fixed;
  bottom: 56px;
  right: 8px;
  width: 320px;
  max-height: 380px;
  background: var(--bg3);
  border: 1px solid var(--panel-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-lg);
  z-index: 9500;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: modal-in .18s cubic-bezier(.34,1.56,.64,1);
}

.emoji-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--panel-border);
  flex-shrink: 0;
}
.emoji-picker-title {
  font-size: .78rem; font-weight: 700; color: var(--text2);
  letter-spacing: .04em; text-transform: uppercase;
}
.emoji-picker-close {
  background: transparent; border: none;
  color: var(--text3); font-size: 1rem;
  width: 24px; height: 24px; border-radius: var(--r-sm);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background .12s, color .12s;
}
.emoji-picker-close:hover { background: var(--glass-h); color: var(--text); }

.emoji-picker-search {
  padding: 8px 12px;
  flex-shrink: 0;
  border-bottom: 1px solid var(--panel-border);
}
.emoji-picker-search input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  padding: 6px 10px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: .82rem;
  color: var(--text);
  outline: none;
  transition: border-color .16s;
}
.emoji-picker-search input:focus { border-color: var(--accent); }
.emoji-picker-search input::placeholder { color: var(--text3); }

.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 4px;
  padding: 10px;
  overflow-y: auto;
  flex: 1;
}
.emoji-picker-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 4px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background .1s;
  border: 1px solid transparent;
}
.emoji-picker-item:hover {
  background: var(--glass-h);
  border-color: var(--panel-border);
}
.emoji-picker-item img {
  width: 40px; height: 40px;
  object-fit: contain;
  border-radius: var(--r-xs);
  display: block;
}
.emoji-picker-item-name {
  font-size: .58rem; color: var(--text3);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  width: 100%; text-align: center;
  max-width: 52px;
}
.emoji-picker-empty {
  grid-column: 1/-1;
  text-align: center; font-size: .8rem; color: var(--text3);
  padding: 20px 0;
}

/* 채팅 메시지 내 커스텀 이모티콘 */
.custom-emoji-inline {
  width: 22px; height: 22px;
  object-fit: contain;
  vertical-align: middle;
  display: inline-block;
  margin: 0 1px;
  border-radius: 5px !important;
}

/* ══════════════════════════════════════════════
   이모티콘 관리 모달
══════════════════════════════════════════════ */
.emoji-manage-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--panel-border);
}
.emoji-manage-tab {
  flex: 1; padding: 8px 0; font-size: .8rem; font-weight: 700;
  background: transparent; color: var(--text2);
  border-radius: 0; border-bottom: 2px solid transparent;
  transition: color .13s, border-color .13s;
}
.emoji-manage-tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.emoji-manage-tab:hover:not(.active) { color: var(--text); }

.emoji-manage-panel { display: none; }
.emoji-manage-panel.active { display: block; }

/* 이모티콘 등록 폼 */
.emoji-upload-preview-wrap {
  display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.emoji-upload-preview {
  width: 64px; height: 64px;
  border-radius: var(--r-md);
  object-fit: contain;
  background: var(--glass);
  border: 2px solid var(--panel-border);
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  overflow: hidden;
}
.emoji-upload-preview img {
  width: 100%; height: 100%; object-fit: contain;
}
.emoji-upload-info { flex: 1; min-width: 0; }

.emoji-upload-btn {
  display: inline-flex; align-items: center; gap: 5px;
  cursor: pointer; font-size: .76rem; font-weight: 700; color: var(--accent);
  padding: 5px 13px; border-radius: var(--r-full);
  background: var(--accent-dim); border: 1px solid rgba(88,101,242,.25);
  transition: background .15s;
}
.emoji-upload-btn:hover { background: rgba(88,101,242,.22); }

/* 내 이모티콘 목록 */
.my-emoji-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 300px; overflow-y: auto;
  padding-right: 2px;
}
.my-emoji-item {
  display: flex; align-items: center; gap: 10px;
  background: var(--glass); border: 1px solid var(--panel-border);
  border-radius: var(--r-md); padding: 8px 10px;
  transition: background .1s;
}
.my-emoji-item:hover { background: var(--glass-h); }
.my-emoji-item img {
  width: 36px; height: 36px; object-fit: contain;
  border-radius: var(--r-sm); flex-shrink: 0;
}
.my-emoji-item-info { flex: 1; min-width: 0; }
.my-emoji-item-name {
  font-size: .82rem; font-weight: 700; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.my-emoji-item-code {
  font-size: .7rem; color: var(--text3);
  font-family: 'Space Mono', monospace;
}
.my-emoji-item-owner {
  font-size: .67rem; color: var(--text3);
}
.my-emoji-item-actions { display: flex; gap: 4px; flex-shrink: 0; }
.my-emoji-empty {
  text-align: center; font-size: .82rem; color: var(--text3); padding: 24px 0;
}

/* 이모티콘 수정 인라인 영역 */
.emoji-edit-inline {
  background: var(--glass);
  border: 1px solid var(--accent);
  border-radius: var(--r-sm);
  padding: 10px;
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  animation: msg-in .15s ease;
}
.emoji-edit-inline input {
  width: 100%;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-sm);
  padding: 7px 10px;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: .84rem;
  color: var(--text);
  outline: none;
  transition: border-color .16s;
}
.emoji-edit-inline input:focus { border-color: var(--accent); }
.emoji-edit-row { display: flex; gap: 6px; align-items: center; }

/* 이모티콘 삭제 확인 */
.emoji-delete-confirm {
  display: flex; align-items: center; gap: 8px;
  margin-top: 6px; padding: 8px 10px;
  background: rgba(237,66,69,0.08); border: 1px solid rgba(237,66,69,0.25);
  border-radius: var(--r-sm); font-size: .82rem; color: var(--text2);
  animation: msg-in .15s ease;
}
.emoji-delete-confirm span { flex: 1; }