/* â?�€â?�€â?�€ Reset & base â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
    :root {
      --bg-main:      #f4f2f9;
      --bg-card:      #ffffff;
      --bg-hover:     #ece9f5;
      --bg-active:    #e4e0f1;
      --accent:       #8a63e5;
      --accent-light: #a485ef;
      --accent-glow:  rgba(138, 99, 229, 0.25);
      --text-main:    #2d2b38;
      --text-sub:     #6b667e;
      --text-ghost:   #9e99af;
      --border:       rgba(138, 99, 229, 0.15);
      --unread-bg:    #ff5c8a;
      --online-bg:    #10b981;
      --radius-sm:    8px;
      --radius-md:    14px;
      --radius-lg:    20px;
      --header-h:     54px;
      --profile-h:    72px;
      --search-h:     44px;
      --tab-h:        58px; /* [Phase 6] í?�˜ë‹�?ë?�¤ë¹�?*/
      --transition:   all 0.18s ease;
      /* â?�€â?�€ Phase 4~6 ì?�ì„�?ì?��??�©�?��˜ëŠ�?alias ë³???��?(기존 ë³???�˜�?��?ë?�¤ë¥�?이ë¦?? â?�€â?�€ */
      --bg-app:         #f4f2f9;  /* = --bg-main  (ì±?��?�…ë£�?ì?¤ë²?�ë ˆ�?��?ë°°ê²½) */
      --text-primary:   #2d2b38;  /* = --text-main */
      --text-secondary: #6b667e;  /* = --text-sub  */
      --text-muted:     #9e99af;  /* = --text-ghost (음��?패��?��? */
    }

    html, body {
      height: 100%;
      overflow: hidden;
      background: var(--bg-main);
      color: var(--text-main);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Apple SD Gothic Neo',
                   'Noto Sans KR', sans-serif;
      font-size: 14px;
      -webkit-font-smoothing: antialiased;
    }

    /* â?�€â?�€â?�€ Layout shell â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #app {
      display: flex;
      flex-direction: column;
      height: 100dvh;
      width: 100%;
      background: var(--bg-main);
      position: relative;
    }

    /* â?�€â?�€ [v20.9] ë¹?�PWA 브라우ì ?? PCì?�ì„�?ì¤?�ì•™ 480px ê³ ì ??â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€
       standalone(PWA) 모ë?�œì—ì„œëŠ�?ì ?��?��?폭 ì?��??��?
       일ë°? 브라우ì ??PCì?�ì„œëŠ�?ë©?�ì‹ �?�€ì²?럼 ì¤?�ì•™ì ?�ë �?
    â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    @media (min-width: 769px) {
      body {
        background: var(--bg-hover);
        display: flex;
        justify-content: center;
      }
      #app {
        max-width: 400px;
        box-shadow: 0 0 60px rgba(138, 99, 229, 0.15), 0 0 0 1px rgba(138, 99, 229, 0.1);
      }
    }
    /* PWA standalone: ì ?��?��?폭, ë°°ê²½ ì?�ëž˜ëŒ€ë¡œ */
    @media (display-mode: standalone) {
      body { background: var(--bg-main); display: block; }
      #app { max-width: none; box-shadow: none; }
    }
    /* window-controls-overlay�?���?��?�리 */
    @media (display-mode: window-controls-overlay) {
      body { background: var(--bg-main); display: block; }
      #app { max-width: none; box-shadow: none; }
    }

    /* â?�€â?�€â?�€ Loading overlay â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #loadingOverlay {
      position: fixed;
      inset: 0;
      background: var(--bg-main);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      z-index: 9999;
      transition: opacity 0.3s ease;
    }
    #loadingOverlay.hidden { opacity: 0; pointer-events: none; }
    .loading-logo {
      width: 64px; height: 64px;
      border-radius: 18px;
      background: linear-gradient(135deg, #a485ef, #8a63e5);
      display: flex; align-items: center; justify-content: center;
      font-size: 32px;
      box-shadow: 0 8px 32px rgba(138, 99, 229, 0.3);
    }
    .loading-title { font-size: 20px; font-weight: 700; color: var(--text-main); }
    .loading-sub   { font-size: 13px; color: var(--text-sub); }
    .loading-spinner {
      width: 28px; height: 28px;
      border: 3px solid rgba(255,255,255,0.1);
      border-top-color: var(--accent);
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }

    /* â?�€â?�€â?�€ Header â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #messengerHeader {
      height: var(--header-h);
      display: flex;
      align-items: center;
      padding: 0 12px;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      gap: 8px;
      position: relative;
      z-index: 10;
    }
    .header-logo-wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      flex: 1;
    }
    .header-logo-icon {
      width: 30px; height: 30px;
      border-radius: 8px;
      background: linear-gradient(135deg, #4f46e5, #7c3aed);
      display: flex; align-items: center; justify-content: center;
      font-size: 16px;
      flex-shrink: 0;
    }
    .header-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      letter-spacing: -0.3px;
    }
    /* [v20.8] í?�¤ë�?í?��?링크 ë²?��?��?*/
    .header-title-btn {
      font-size: 15px;
      font-weight: 700;
      color: var(--accent-light);
      letter-spacing: -0.3px;
      background: none;
      border: none;
      cursor: pointer;
      padding: 0;
      transition: opacity 0.15s;
    }
    .header-title-btn:hover { opacity: 0.75; }
    .header-btns {
      display: flex;
      align-items: center;
      gap: 2px;
    }
    .hbtn {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-sub);
      font-size: 20px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
    }
    .hbtn:hover { background: var(--bg-hover); color: var(--text-main); }
    /* [v20.7] í?�”ë©�?크기 í?�„ë¦�?�…�?ë²?��?��?*/
    .hbtn-preset {
      width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border);
      background: transparent; color: var(--text-ghost); font-size: 14px;
      cursor: pointer; display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
    }
    .hbtn-preset:hover { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,.1); }
    .hbtn-preset.active { border-color: var(--accent); color: var(--accent); background: rgba(99,102,241,.18); }
    .header-preset-group { display: flex; align-items: center; gap: 3px; margin-right: 4px; }
    .header-divider { width: 1px; height: 18px; background: var(--border); margin: 0 4px; }
    /* [v20.8] 모ë°?��?�¼ì—ì„�?í?�„ë¦�?�…�?ë²?��?��?ì?¨ê¹??(resizeTo 미ì§??�›�? */
    @media (max-width: 768px) {
      .header-preset-group, .header-divider { display: none !important; }
    }

    /* â?�€â?�€â?�€ [v21.3] ë©?�ì‹ �?�€ í?�¤ë�?â?��?í?�´�?�ë�?ì ?��?��? 그룹 â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #msgr-res-group {
      position: relative; display: flex; align-items: center; gap: 2px;
      margin-right: 2px;
    }
    #msgr-res-group .res-mobile-toggle { display: none; }
    #msgr-res-group .res-btn-list      { display: flex; gap: 2px; }
    /* [v23.8] msgr-btn-res — hbtn 스타일로 통일 */
    .msgr-btn-res {
      width: 36px; height: 36px; padding: 0; border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      background: transparent; border: none;
      color: var(--text-sub); cursor: pointer;
      transition: var(--transition); font-size: 18px;
    }
    .msgr-btn-res:hover { background: var(--bg-hover); color: var(--text-main); }
    .msgr-btn-res.active { background: rgba(99,102,241,.18); color: var(--accent); }
    @media (max-width: 768px) {
      #msgr-res-group .res-mobile-toggle { display: flex; }
      #msgr-res-group .res-btn-list { display: none; }
      #msgr-res-group.expanded .res-btn-list { display: flex; }
    }

    /* â?�€â?�€â?�€ [v21.3] ë©?�ì‹ �?�€ í?�¤ë�?â?��?ë²?ì?��?ì§??�µ�?�³�? ìœ?��?��?â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    .translate-widget-container { position: relative; display: flex; align-items: center; }
    /* [v23.8] btn-trans — hbtn 스타일로 통일 */
    .btn-trans {
      position: relative; display: flex; align-items: center; justify-content: center;
      width: 36px; height: 36px; border-radius: 50%; border: none;
      background: transparent; cursor: pointer; color: #9e9e9e; /* 꺼졌을 때 회색 */
      transition: var(--transition), color 0.2s; font-size: 20px;
    }
    .btn-trans.on { color: #22c55e; /* 켜졌을 때 밝은 초록색 */ }
    .btn-trans:hover { background: var(--bg-hover); color: var(--text-main); }
    .trans-dropdown {
      display: none; position: absolute; top: 100%; right: 0; margin-top: 6px;
      background: var(--bg-card); border: 1px solid var(--border);
      border-radius: 10px; box-shadow: 0 8px 32px rgba(0,0,0,0.4);
      z-index: 9999; min-width: 160px; max-height: 340px;
      overflow-y: auto; flex-direction: column; padding: 6px 0;
    }
    .trans-dropdown.show { display: flex; }
    .trans-item {
      padding: 8px 14px; font-size: 13px; font-weight: 500;
      color: var(--text-main); cursor: pointer; background: transparent;
      transition: background 0.15s;
    }
    .trans-item:hover { background: var(--bg-hover); color: var(--accent-light); }
    .trans-item.active { font-weight: 700; color: var(--accent-light); }
    .trans-badge {
      position: absolute; top: 3px; right: 3px; width: 7px; height: 7px;
      border-radius: 50%; background: #4caf50;
      border: 1.5px solid var(--bg-card); pointer-events: none;
    }
    .trans-badge.off { background: #777; }
    .trans-toggle-row {
      display: flex; align-items: center; justify-content: space-between;
      padding: 9px 14px; border-bottom: 1px solid var(--border); margin-bottom: 4px;
      cursor: pointer; user-select: none;
    }
    .trans-toggle-row:hover { background: var(--bg-hover); }
    .trans-toggle-label { font-size: 11px; font-weight: 700; color: var(--text-sub); letter-spacing: 0.04em; }
    .trans-toggle-switch {
      width: 34px; height: 18px; border-radius: 9px; background: #555;
      position: relative; transition: background 0.25s; flex-shrink: 0;
    }
    .trans-toggle-switch::after {
      content: ''; position: absolute; top: 2px; left: 2px;
      width: 14px; height: 14px; border-radius: 50%; background: #fff;
      transition: left 0.25s; box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    }
    .trans-toggle-switch.on { background: #4caf50; }
    .trans-toggle-switch.on::after { left: 18px; }

    /* â?�€â?�€â?�€ My Profile bar â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #myProfile {
      height: var(--profile-h);
      display: flex;
      align-items: center;
      padding: 0 16px;
      gap: 12px;
      background: linear-gradient(180deg, var(--bg-card) 0%, var(--bg-main) 100%);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      cursor: pointer;
      transition: var(--transition);
    }
    #myProfile:hover { background: linear-gradient(180deg, var(--bg-hover) 0%, var(--bg-main) 100%); }
    .my-avatar-wrap { position: relative; flex-shrink: 0; }
    #myAvatar {
      width: 44px; height: 44px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-hover);
      border: 2px solid var(--accent);
    }
    .my-online-dot {
      position: absolute;
      bottom: 1px; right: 1px;
      width: 12px; height: 12px;
      border-radius: 50%;
      background: var(--online-bg);
      border: 2px solid var(--bg-main);
    }
    .my-info { flex: 1; min-width: 0; }
    #myNick {
      font-size: 15px;
      font-weight: 700;
      color: var(--text-main);
      display: block;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #myStatusTxt {
      font-size: 12px;
      color: var(--text-sub);
      display: block;
      margin-top: 2px;
    }
    #myPoints {
      font-size: 12px;
      color: var(--accent-light);
      font-weight: 600;
    }

    /* â?�€â?�€â?�€ Search bar â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #searchBar {
      height: 0;
      overflow: hidden;
      background: var(--bg-card);
      border-bottom: 0px solid var(--border);
      transition: height 0.2s ease, border-bottom-width 0.2s ease;
      flex-shrink: 0;
    }
    #searchBar.open {
      height: var(--search-h);
      border-bottom-width: 1px;
    }
    #searchInput {
      width: 100%;
      height: var(--search-h);
      background: transparent;
      border: none;
      outline: none;
      color: var(--text-main);
      font-size: 14px;
      padding: 0 16px;
    }
    #searchInput::placeholder { color: var(--text-ghost); }

    /* â?�€â?�€â?�€ Tab bar (Phase 6: í?�˜ë‹�?ë?�¤ë¹„게�?�´ì…�? â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #tabBar {
      height: calc(var(--tab-h) + env(safe-area-inset-bottom, 0px));
      padding-bottom: env(safe-area-inset-bottom, 0px);
      display: flex;
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
      order: 99; /* flex column 최í?�˜ë‹�?*/
    }
    .tab-btn {
      flex: 1;
      border: none;
      background: transparent;
      color: var(--text-sub);
      font-size: 10px;
      font-weight: 600;
      letter-spacing: -0.2px;
      cursor: pointer;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 3px;
      position: relative;
      transition: var(--transition);
      padding: 0 2px;
      border-top: 2px solid transparent;
    }
    .tab-btn i { font-size: 22px; line-height: 1; }
    .tab-btn:hover { color: var(--text-main); background: var(--bg-hover); }
    .tab-btn.active {
      color: var(--accent-light);
      border-top-color: var(--accent);
    }
    .tab-badge {
      position: absolute;
      top: 4px;
      right: calc(50% - 16px);
      background: var(--unread-bg);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      min-width: 16px;
      height: 16px;
      border-radius: 8px;
      padding: 0 4px;
      display: flex;
      align-items: center;
      justify-content: center;
      line-height: 1;
    }
    .tab-badge.hidden { display: none; }

    /* â?�€â?�€â?�€ Content panels â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #contentArea {
      flex: 1;
      overflow: hidden;
      position: relative;
    }
    .panel {
      position: absolute;
      inset: 0;
      overflow-y: auto;
      overscroll-behavior: contain;
      display: none;
    }
    .panel.active { display: block; }

    /* â?�€â?�€â?�€ DM list items â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    .dm-item {
      display: flex;
      align-items: center;
      padding: 10px 16px;
      gap: 12px;
      cursor: pointer;
      transition: var(--transition);
      border-bottom: 1px solid var(--border);
      position: relative;
    }
    .dm-item:hover { background: var(--bg-hover); }
    .dm-item:active { background: var(--bg-active); }

    .dm-avatar-wrap { position: relative; flex-shrink: 0; }
    .dm-avatar {
      width: 48px; height: 48px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-hover);
    }
    .dm-online-dot {
      position: absolute;
      bottom: 1px; right: 1px;
      width: 11px; height: 11px;
      border-radius: 50%;
      background: var(--online-bg);
      border: 2px solid var(--bg-main);
    }

    .dm-body { flex: 1; min-width: 0; }
    .dm-header { display: flex; align-items: baseline; gap: 4px; margin-bottom: 3px; }
    .dm-name {
      font-size: 14px;
      font-weight: 600;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex: 1;
    }
    .dm-time {
      font-size: 11px;
      color: var(--text-ghost);
      flex-shrink: 0;
    }
    .dm-preview {
      font-size: 12px;
      color: var(--text-sub);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .dm-preview.unread { color: var(--text-main); }

    .dm-right { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
    .dm-unread-badge {
      background: var(--unread-bg);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      min-width: 18px;
      height: 18px;
      border-radius: 9px;
      padding: 0 5px;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    /* Type badges */
    .dm-type-badge {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 10px;
      background: rgba(79,70,229,0.2);
      color: var(--accent-light);
      border: 1px solid rgba(79,70,229,0.3);
    }
    .dm-type-badge.sent { background: rgba(34,197,94,0.1); color: #4ade80; border-color: rgba(34,197,94,0.3); }

    /* â?�€â?�€â?�€ [v20.7] Room Cards (lobby.html ë?�”�?��?��?이ì?��? â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    .category-tabs {
      display: flex; gap: 6px;
      padding: 8px 12px 4px;
      overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
      flex-wrap: nowrap; flex-shrink: 0;
    }
    .category-tabs::-webkit-scrollbar { display: none; }
    .cat-tab {
      flex-shrink: 0; padding: 5px 13px;
      border-radius: 20px; border: 1.5px solid var(--border);
      background: var(--bg-surface, var(--bg-hover));
      color: var(--text-sub); font-size: 11px; font-weight: 600;
      cursor: pointer; white-space: nowrap;
      transition: all 0.2s cubic-bezier(0.4,0,0.2,1);
    }
    .cat-tab:hover { border-color: var(--accent); color: var(--accent); }
    .cat-tab.active {
      background: var(--accent); border-color: var(--accent);
      color: #fff; font-weight: 700;
    }

    /* ë°© 목록 ê²???�‰ë°�?*/
    .rooms-search-bar {
      display: flex; align-items: center; gap: 8px;
      padding: 6px 12px 2px; flex-shrink: 0;
    }
    .rooms-search-input {
      flex: 1; background: var(--bg-hover); border: 1px solid var(--border);
      border-radius: 20px; padding: 6px 12px;
      color: var(--text-main); font-size: 12px; outline: none;
    }
    .rooms-search-input:focus { border-color: var(--accent); }

    /* 카��?그리��?*/
    .room-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 10px; padding: 10px 12px 20px;
      flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch;
      align-items: start;
    }

    /* 카��?기본 */
    .room-card {
      background: var(--bg-surface, var(--bg-panel));
      border-radius: 14px; border: 1.5px solid var(--border);
      cursor: pointer; overflow: hidden;
      display: flex; flex-direction: column;
      transition: transform .22s cubic-bezier(0.4,0,0.2,1),
                  box-shadow .22s cubic-bezier(0.4,0,0.2,1),
                  border-color .22s ease;
    }
    .room-card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px rgba(0,0,0,.35); border-color: var(--accent); }
    .room-card:active { transform: scale(.96); }

    /* 커�?*/
    .room-cover { height: 80px; position: relative; overflow: hidden; flex-shrink: 0; }
    .room-cover.cat-game    { background: linear-gradient(135deg, #3b0d8e 0%, #7c3aed 50%, #4f46e5 100%); }
    .room-cover.cat-study   { background: linear-gradient(135deg, #065f46 0%, #059669 50%, #0d9488 100%); }
    .room-cover.cat-social  { background: linear-gradient(135deg, #9d174d 0%, #ec4899 50%, #f97316 100%); }
    .room-cover.cat-economy { background: linear-gradient(135deg, #1e3a8a 0%, #2563eb 50%, #0ea5e9 100%); }
    .room-cover.cat-music   { background: linear-gradient(135deg, #6b21a8 0%, #a855f7 50%, #ec4899 100%); }
    .room-cover.cat-movie   { background: linear-gradient(135deg, #1e1b4b 0%, #3730a3 50%, #1d4ed8 100%); }
    .room-cover.cat-consult { background: linear-gradient(135deg, #78350f 0%, #d97706 50%, #f59e0b 100%); }
    .room-cover.cat-default { background: linear-gradient(135deg, #1f2937 0%, #374151 50%, #4b5563 100%); }
    .room-card:hover .room-cover.cat-game    { background: linear-gradient(135deg, #4c1d95 0%, #8b5cf6 50%, #6366f1 100%); }
    .room-card:hover .room-cover.cat-study   { background: linear-gradient(135deg, #064e3b 0%, #10b981 50%, #14b8a6 100%); }
    .room-card:hover .room-cover.cat-social  { background: linear-gradient(135deg, #be185d 0%, #f472b6 50%, #fb923c 100%); }
    .room-card:hover .room-cover.cat-economy { background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #38bdf8 100%); }
    .room-card:hover .room-cover.cat-music   { background: linear-gradient(135deg, #7e22ce 0%, #c084fc 50%, #f472b6 100%); }
    .room-card:hover .room-cover.cat-movie   { background: linear-gradient(135deg, #312e81 0%, #4338ca 50%, #2563eb 100%); }
    .room-card:hover .room-cover.cat-consult { background: linear-gradient(135deg, #92400e 0%, #f59e0b 50%, #fbbf24 100%); }
    .room-card:hover .room-cover.cat-default { background: linear-gradient(135deg, #374151 0%, #4b5563 50%, #6b7280 100%); }

    .room-cover-bg {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      opacity: .22; transition: opacity .25s;
    }
    .room-card:hover .room-cover-bg { opacity: .38; }
    .room-ambiance-webm {
      position: absolute; inset: 0; width: 100%; height: 100%;
      object-fit: cover; pointer-events: none;
      opacity: 0.7; mix-blend-mode: screen; z-index: 1;
    }
    .room-cover-gradient {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, rgba(0,0,0,0) 30%, rgba(0,0,0,.6) 100%);
      pointer-events: none;
    }
    .room-cover-badges { position: absolute; top: 6px; left: 6px; display: flex; gap: 4px; pointer-events: none; }
    .category-badge {
      display: inline-flex; align-items: center; padding: 1px 6px;
      border-radius: 8px; background: rgba(0,0,0,.5);
      color: rgba(255,255,255,.95); font-size: 9px; font-weight: 700;
      backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,.15);
    }
    .room-cover-icons { position: absolute; top: 6px; right: 6px; display: flex; gap: 4px; }
    .room-icon-lock { font-size: 12px; color: #fde047; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
    .room-icon-star { font-size: 12px; color: #c4b5fd; filter: drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
    .room-temp-badge {
      position: absolute; bottom: 5px; left: 7px;
      font-size: 10px; font-weight: 700; background: rgba(0,0,0,.5);
      border-radius: 7px; padding: 1px 5px; backdrop-filter: blur(8px);
      color: #fff; pointer-events: none; border: 1px solid rgba(255,255,255,.1);
    }
    .room-members-badge {
      position: absolute; bottom: 5px; right: 7px;
      font-size: 10px; font-weight: 700; color: #7dd3fc;
      background: rgba(0,0,0,.5); border-radius: 7px; padding: 1px 6px;
      backdrop-filter: blur(8px); display: flex; align-items: center; gap: 2px;
      pointer-events: none; border: 1px solid rgba(125,211,252,.2);
    }

    /* 카��?���?���?*/
    .room-info { padding: 8px 10px 9px; display: flex; flex-direction: column; gap: 2px; flex: 1; }
    .room-name {
      font-size: 12px; font-weight: 700;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      color: var(--text-main); line-height: 1.35;
    }
    .room-desc-sm {
      font-size: 10px; color: var(--text-sub);
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      line-height: 1.4; min-height: 14px; opacity: .85;
    }
    .room-host-row {
      display: flex; align-items: center; gap: 5px;
      margin-top: 6px; padding-top: 6px;
      border-top: 1px solid var(--border);
    }
    .room-host-avatar {
      width: 18px; height: 18px; border-radius: 50%; object-fit: cover; flex-shrink: 0;
      border: 1px solid rgba(255,255,255,.15);
    }
    .room-host-nick {
      font-size: 10px; color: var(--text-sub); flex: 1; min-width: 0;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500;
    }
    .room-whisper-btn {
      width: 22px; height: 22px; border-radius: 50%;
      border: 1px solid var(--border); background: transparent;
      color: var(--text-ghost); font-size: 11px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; flex-shrink: 0; transition: all .18s ease;
    }
    .room-whisper-btn:hover { background: var(--bg-hover); color: var(--accent); border-color: var(--accent); }

    /* â?�€â?�€â?�€ Empty states â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    .empty-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 12px;
      padding: 60px 24px;
      text-align: center;
    }
    .empty-icon { font-size: 48px; opacity: 0.4; }
    .empty-title { font-size: 15px; font-weight: 600; color: var(--text-sub); }
    .empty-sub { font-size: 13px; color: var(--text-ghost); line-height: 1.5; }

    /* â?�€â?�€â?�€ DM Modal (reply / compose) â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #dmModal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    #dmModal.open { display: flex; }
    .dm-modal-box {
      width: 100%;
      max-width: 440px;
      background: var(--bg-card);
      border-radius: var(--radius-lg);
      max-height: 75vh;
      display: flex;
      flex-direction: column;
      animation: dmPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
      box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    }
    @keyframes dmPopIn {
      from { transform: scale(0.95) translateY(10px); opacity: 0; }
      to   { transform: scale(1) translateY(0); opacity: 1; }
    }
    .dm-modal-header {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 16px 16px 12px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .dm-modal-avatar {
      width: 40px; height: 40px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-hover);
    }
    .dm-modal-peer-name { font-size: 15px; font-weight: 700; flex: 1; }
    .dm-modal-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-sub);
      font-size: 20px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
    }
    .dm-modal-close:hover { background: var(--bg-hover); color: var(--text-main); }

    .dm-modal-messages {
      flex: 1;
      overflow-y: auto;
      padding: 12px 16px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .dm-msg {
      display: flex;
      flex-direction: column;
      max-width: 75%;
      gap: 2px;
    }
    .dm-msg.sent { align-self: flex-end; align-items: flex-end; }
    .dm-msg.recv { align-self: flex-start; align-items: flex-start; }
    .dm-msg-bubble {
      font-size: 13px;
      line-height: 1.5;
      padding: 8px 12px;
      border-radius: 14px;
      word-break: break-word;
    }
    .dm-msg.sent .dm-msg-bubble {
      background: var(--accent);
      color: #fff;
      border-radius: 14px 14px 4px 14px;
    }
    .dm-msg.recv .dm-msg-bubble {
      background: var(--bg-hover);
      color: var(--text-main);
      border-radius: 14px 14px 14px 4px;
    }
    .dm-msg-time { font-size: 10px; color: var(--text-ghost); }

    .dm-modal-compose {
      display: flex;
      align-items: flex-end;
      gap: 8px;
      padding: 10px 12px;
      border-top: 1px solid var(--border);
      background: var(--bg-main);
      flex-shrink: 0;
    }
    #dmReplyInput {
      flex: 1;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--text-main);
      font-size: 13px;
      padding: 8px 14px;
      outline: none;
      resize: none;
      min-height: 36px;
      max-height: 100px;
      line-height: 1.4;
      font-family: inherit;
    }
    #dmReplyInput::placeholder { color: var(--text-ghost); }
    #dmSendBtn {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 18px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
      transition: var(--transition);
    }
    #dmSendBtn:hover { background: var(--accent-light); }

    /* â?�€â?�€â?�€ Connection status bar â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #connBar {
      display: none;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: rgba(239,68,68,0.15);
      border-bottom: 1px solid rgba(239,68,68,0.3);
      padding: 5px;
      font-size: 11px;
      color: #fca5a5;
      flex-shrink: 0;
    }
    #connBar.visible { display: flex; }
    #connBar.reconnecting { background: rgba(234,179,8,0.12); border-color: rgba(234,179,8,0.3); color: #fde047; }

    /* â?�€â?�€â?�€ Scrollbar â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    .panel::-webkit-scrollbar { width: 4px; }
    .panel::-webkit-scrollbar-track { background: transparent; }
    .panel::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .panel::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

    /* â?�€â?�€â?�€ Toast â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #toastContainer {
      position: fixed;
      bottom: 20px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 9990;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      pointer-events: none;
    }
    .toast {
      background: rgba(30,30,50,0.95);
      color: var(--text-main);
      padding: 8px 16px;
      border-radius: 20px;
      font-size: 13px;
      border: 1px solid var(--border);
      backdrop-filter: blur(8px);
      animation: toastIn 0.2s ease, toastOut 0.2s ease 2.5s forwards;
      white-space: nowrap;
    }
    @keyframes toastIn  { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
    @keyframes toastOut { to   { opacity:0; transform:translateY(-6px); } }

    /* â?�€â?�€â?�€ Password prompt modal â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #pwModal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.65);
      z-index: 1100;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #pwModal.open { display: flex; }
    .pw-modal-box {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      padding: 24px;
      width: 100%;
      max-width: 320px;
      border: 1px solid var(--border);
    }
    .pw-modal-title { font-size: 16px; font-weight: 700; margin-bottom: 6px; }
    .pw-modal-sub   { font-size: 13px; color: var(--text-sub); margin-bottom: 16px; }
    #pwInput {
      width: 100%;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-main);
      font-size: 14px;
      padding: 10px 14px;
      outline: none;
      margin-bottom: 12px;
    }
    .pw-btn-row { display: flex; gap: 8px; justify-content: flex-end; }
    .pw-btn {
      padding: 8px 18px;
      border-radius: 20px;
      border: none;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }
    .pw-btn.cancel { background: var(--bg-hover); color: var(--text-sub); }
    .pw-btn.confirm { background: var(--accent); color: #fff; }
    .pw-btn.confirm:hover { background: var(--accent-light); }

    /* â?�€â?�€â?�€ Section headers â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    .section-header {
      padding: 10px 16px 5px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--text-ghost);
      text-transform: uppercase;
    }

    /* â?�€â?�€â?�€ Rooms panel header (ë°© 만ë?�¤ê¸�?ë²?��?��? â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    /* [v20.8] ì±?��?�…ë°�?패ë?? í?�¤�???ì?�„�?´ì½? ë²?��?��?(ë°©ë²??B) */
    .panel-hbtn {
      width: 30px; height: 30px;
      border-radius: 8px;
      border: none;
      background: transparent;
      color: var(--text-sub);
      font-size: 17px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
      flex-shrink: 0;
    }
    .panel-hbtn:hover { background: var(--bg-hover); color: var(--text-main); }
    .panel-hbtn.accent { color: var(--accent-light); }
    .panel-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 10px 16px 8px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
      /* [v20.9] sticky â?��?ìŠ¤í ¬ë¡¤í?�´�???í?�¤�???ì?�„�?´ì½? í?��??? ë?�¸�?��?*/
      position: sticky;
      top: 0;
      z-index: 5;
      background: linear-gradient(135deg, #fef4f9 0%, #f6efff 100%);
    }
    .panel-header-title {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.5px;
      color: var(--accent);
      text-transform: uppercase;
    }
    .btn-create-room {
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 20px;
      border: 1px solid var(--accent);
      background: rgba(79,70,229,0.12);
      color: var(--accent-light);
      font-size: 12px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
      -webkit-app-region: no-drag;
    }
    .btn-create-room:hover {
      background: var(--accent);
      color: #fff;
    }

    /* ?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═??
       [DM 분리] dmIframeWrap: 1:1 ?�용�??�로??PIP (Drag & Resize)
    ?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═?�═??*/
    #dmIframeWrap {
      display: none;
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%); /* Center by default */
      width: 400px;
      height: 600px;
      z-index: 9000;
      background: var(--bg-main);
      border-radius: 12px;
      box-shadow: 0 10px 40px rgba(0,0,0,0.6);
      overflow: hidden;
      border: 1px solid var(--border);
      flex-direction: column;
    }
    #dmIframeWrap.active { display: flex; }
    
    #dmIframeHeader {
      height: 36px;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 12px;
      cursor: move; /* Indicate draggable */
      flex-shrink: 0;
      user-select: none;
    }
    .dm-iframe-title {
      font-size: 13px;
      font-weight: 700;
      color: var(--text-main);
    }
    /* [v23.9] 헤더 컨트롤 영역 */
    .dm-header-controls {
      display: flex; align-items: center; gap: 2px; flex-shrink: 0;
    }
    .dm-iframe-ctrl {
      width: 26px; height: 26px;
      border-radius: 50%; border: none;
      background: transparent; color: var(--text-sub);
      font-size: 15px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; transition: background 0.15s;
    }
    .dm-iframe-ctrl:hover { background: var(--bg-hover); color: var(--text-main); }
    .dm-iframe-close { color: var(--text-sub); }
    .dm-iframe-close:hover { background: var(--bg-hover); color: var(--danger); }

    #dmIframeWrap iframe {
      width: 100%;
      flex: 1;
      border: none;
      display: block;
      pointer-events: auto;
    }
    /* When dragging, disable iframe pointer events to prevent iframe stealing mousemove */
    #dmIframeWrap.dragging iframe { pointer-events: none; }

    /* [v23.6] 멀티 리사이즈 핸들 공통 */
    .pip-resizer {
      position: absolute;
      z-index: 10;
      opacity: 0;
      transition: opacity .2s;
    }
    #dmIframeWrap:hover .pip-resizer { opacity: 1; }

    /* 우 (right edge) */
    #pipResizerR  { right: 0; top: 36px; bottom: 16px; width: 6px; cursor: ew-resize;
                    background: linear-gradient(90deg, transparent 40%, var(--text-ghost) 100%); }
    /* 좌 (left edge) */
    #pipResizerL  { left: 0; top: 36px; bottom: 16px; width: 6px; cursor: ew-resize;
                    background: linear-gradient(270deg, transparent 40%, var(--text-ghost) 100%); }
    /* 하 (bottom edge) */
    #pipResizerB  { bottom: 0; left: 16px; right: 16px; height: 6px; cursor: ns-resize;
                    background: linear-gradient(180deg, transparent 40%, var(--text-ghost) 100%); }
    /* 좌하 (bottom-left corner) */
    #pipResizerBL { bottom: 0; left: 0; width: 16px; height: 16px; cursor: nesw-resize;
                    background: linear-gradient(225deg, transparent 50%, var(--text-ghost) 100%); }
    /* 우하 (bottom-right corner) */
    #pipResizerBR { bottom: 0; right: 0; width: 16px; height: 16px; cursor: nwse-resize;
                    background: linear-gradient(135deg, transparent 50%, var(--text-ghost) 100%); }
    
    /* [v23.9] 최대화 상태 — 메신저 윈도우 전체 */
    #dmIframeWrap.dm-maximized {
      top: 0 !important; left: 0 !important;
      width: 100% !important; height: 100% !important;
      border-radius: 0 !important;
      transform: none !important;
      z-index: 9999 !important;
      box-shadow: none !important;
    }
    #dmIframeWrap.dm-maximized .pip-resizer { display: none !important; }
    #dmIframeWrap.dm-maximized #dmIframeHeader { cursor: default !important; }

    /* 모바??반응??처리 */
    /* [v23.5] CSS 변수 방식 — JS의 setProperty('--pip-*') 가 !important 를 통과 */
    @media (max-width: 480px) {
      #dmIframeWrap {
        width: var(--pip-width, 95%) !important;
        height: var(--pip-height, 60%) !important;
        top: var(--pip-top, 50%) !important;
        left: var(--pip-left, 50%) !important;
        transform: var(--pip-transform, translate(-50%,-50%)) !important;
        border-radius: 16px;
      }
      .pip-resizer { opacity: 1 !important; } /* 모바일: 항상 표시 */
      #dmIframeHeader { cursor: grab; }    /* [v23.9] 최대화 상태 — 메신저 윈도우 전체 */
    #dmIframeWrap.dm-maximized {
      top: 0 !important; left: 0 !important;
      width: 100% !important; height: 100% !important;
      border-radius: 0 !important;
      transform: none !important;
      z-index: 9999 !important;
      box-shadow: none !important;
    }
    #dmIframeWrap.dm-maximized .pip-resizer { display: none !important; }
    #dmIframeWrap.dm-maximized #dmIframeHeader { cursor: default !important; }

    /* 모바일 드래그 허용 */
    }

    /* ?�——————————————————————————————————————————�?Room creation modal ?�—————————————————————————————————————————�?*/
    #createRoomModal {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.72);
      z-index: 1200;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    #createRoomModal.open { display: flex; }
    .cr-modal-box {
      background: var(--bg-card);
      border-radius: var(--radius-md);
      width: 100%;
      max-width: 360px;
      border: 1px solid var(--border);
      display: flex;
      flex-direction: column;
      max-height: 90vh;
      overflow-y: auto;
    }
    .cr-modal-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 20px 14px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .cr-modal-title { font-size: 15px; font-weight: 700; }
    .cr-modal-close {
      width: 32px; height: 32px;
      border-radius: 50%;
      border: none;
      background: transparent;
      color: var(--text-sub);
      font-size: 20px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
    }
    .cr-modal-close:hover { background: var(--bg-hover); color: var(--text-main); }
    .cr-modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 14px; }
    .cr-field { display: flex; flex-direction: column; gap: 5px; }
    .cr-label { font-size: 12px; font-weight: 600; color: var(--text-sub); }
    .cr-label span { font-size: 11px; color: var(--text-ghost); font-weight: 400; }
    .cr-input {
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-main);
      font-size: 13px;
      padding: 9px 12px;
      outline: none;
      transition: border-color 0.15s ease;
      font-family: inherit;
    }
    .cr-input:focus { border-color: var(--accent); }
    .cr-input::placeholder { color: var(--text-ghost); }
    #crPwGroup { display: none; }
    .cr-modal-footer {
      display: flex;
      gap: 8px;
      justify-content: flex-end;
      padding: 14px 20px 18px;
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    .cr-btn {
      padding: 8px 20px;
      border-radius: 20px;
      border: none;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      transition: var(--transition);
    }
    .cr-btn.cancel { background: var(--bg-hover); color: var(--text-sub); }
    .cr-btn.cancel:hover { color: var(--text-main); }
    .cr-btn.confirm { background: var(--accent); color: #fff; }
    .cr-btn.confirm:hover { background: var(--accent-light); }

    /* ?�——————————————————————————————————————————�?Social panel ?�—————————————————————————————————————————————————�?*/
    .social-add-bar {
      display: flex;
      align-items: center;
      gap: 6px;
      padding: 4px 12px 6px;
      border-bottom: 1px solid var(--border);
      background: var(--bg-card);
      flex-shrink: 0;
    }
    .social-add-input {
      flex: 1;
      background: var(--bg-hover);
      border: 1px solid var(--border);
      border-radius: 20px;
      color: var(--text-main);
      font-size: 12px;
      padding: 5px 12px;
      outline: none;
      font-family: inherit;
      transition: border-color 0.15s ease;
    }
    .social-add-input:focus { border-color: var(--accent); }
    .social-add-input::placeholder { color: var(--text-ghost); }
    .social-add-btn {
      width: 26px; height: 26px;
      border-radius: 50%;
      border: none;
      background: var(--accent);
      color: #fff;
      font-size: 14px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
      flex-shrink: 0;
    }
    .social-add-btn:hover { background: var(--accent-light); box-shadow: 0 0 10px var(--accent-glow); }

    .social-section-hdr {
      padding: 12px 16px 5px;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-ghost);
      letter-spacing: 0.6px;
      text-transform: uppercase;
    }

    .friend-item {
      display: flex;
      align-items: center;
      padding: 9px 16px;
      gap: 11px;
      border-bottom: 1px solid var(--border);
      transition: var(--transition);
    }
    .friend-item:hover { background: var(--bg-hover); }
    .friend-avatar-wrap { position: relative; flex-shrink: 0; }
    .friend-avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      object-fit: cover;
      background: var(--bg-hover);
    }
    .friend-online-dot {
      position: absolute;
      bottom: 1px; right: 1px;
      width: 10px; height: 10px;
      border-radius: 50%;
      background: var(--online-bg);
      border: 2px solid var(--bg-main);
    }
    .friend-info { flex: 1; min-width: 0; }
    .friend-nick {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .friend-status {
      font-size: 11px;
      color: var(--text-ghost);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      margin-top: 2px;
    }
    .friend-actions { display: flex; gap: 5px; flex-shrink: 0; }
    .friend-btn {
      width: 30px; height: 30px;
      border-radius: 50%;
      border: none;
      background: var(--bg-hover);
      color: var(--text-sub);
      font-size: 15px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: var(--transition);
    }
    .friend-btn:hover { background: var(--bg-active); color: var(--text-main); }
    .friend-btn.accept  { background: rgba(34,197,94,0.15); color: #4ade80; }
    .friend-btn.accept:hover  { background: rgba(34,197,94,0.28); }
    .friend-btn.decline { background: rgba(239,68,68,0.12); color: #f87171; }
    .friend-btn.decline:hover { background: rgba(239,68,68,0.25); }

    /* â?�€â?�€â?�€ My Info panel â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    .myinfo-profile-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      background: linear-gradient(135deg, var(--bg-card) 0%, rgba(79,70,229,0.1) 100%);
      border-bottom: 1px solid var(--border);
    }
    .myinfo-avatar {
      width: 42px; height: 42px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--accent);
      flex-shrink: 0;
    }
    .myinfo-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main);
    }
    .myinfo-meta {
      display: flex;
      gap: 6px;
      align-items: center;
      margin-top: 2px;
      flex-wrap: wrap;
    }
    .myinfo-badge {
      font-size: 10px;
      padding: 1px 6px;
      border-radius: 8px;
      background: rgba(79,70,229,0.2);
      color: var(--accent-light);
      border: 1px solid rgba(79,70,229,0.3);
    }
    .myinfo-points-big {
      font-size: 12px;
      font-weight: 700;
      color: #fbbf24;
    }

    .myinfo-section { border-bottom: 1px solid var(--border); }
    .myinfo-section-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-ghost);
      letter-spacing: 0.6px;
      text-transform: uppercase;
      padding: 14px 16px 5px;
    }
    .myinfo-row {
      display: flex;
      align-items: center;
      padding: 11px 16px;
      gap: 12px;
      cursor: pointer;
      transition: var(--transition);
    }
    .myinfo-row:hover { background: var(--bg-hover); }
    .myinfo-row-icon {
      width: 34px; height: 34px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      flex-shrink: 0;
    }
    .myinfo-row-text { flex: 1; }
    .myinfo-row-label {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
    }
    .myinfo-row-sub {
      font-size: 11px;
      color: var(--text-ghost);
      margin-top: 1px;
    }
    .myinfo-row-arrow {
      color: var(--text-ghost);
      font-size: 16px;
      flex-shrink: 0;
    }

    /* â?�€â?�€â?�€ Friend request popup (messenger ì ?��?��? â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #msgrFriendReqPopup {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 32px);
      max-width: 440px;
      background: var(--bg-card);
      border: 1px solid rgba(79,70,229,0.35);
      border-radius: var(--radius-md);
      overflow: hidden;
      box-shadow: 0 8px 32px rgba(0,0,0,0.55);
      z-index: 9900;
      animation: slideUp 0.25s ease;
    }

    /* â?�â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•�?
       [Phase 4] ì±?��?�…ë£�?ì?¤ë²?�ë ˆ�?��?â?��?messenger.html 인ì?��?ì±?��?�…ë°�?모ë?��?
       ë?�¨ë�?í?­(모ë°?��?�¼Â·PWA) ì ?��?��? opener ì?�†�?��?ë?�Œë§�?í?�œì„±�?��??
    â?�â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•�?*/
    /* [v20.7.1] #chatRoomOverlay â?��?ë©?�ì‹ �?�€ #app ë?��?flex child (position:fixed 제거)
       #app.cr-active 클ëž?스ê°??ë¶?��?�¼ë©�?contentArea/myProfile/searchBar ì?¨ê¹??
       â?��?ë©?�ì‹ �?�€ í?�¤ë�?#messengerHeader)·í?­ë°??#tabBar)ëŠ??í?��??��?í?�œì‹œë�?*/
    #chatRoomOverlay {
      display: none;
      flex: 1;
      min-height: 0;
      flex-direction: column;
      background: var(--bg-app);
      overflow: hidden;
    }
    #chatRoomOverlay.cr-open { display: flex; }

    /* â?�â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•�?
       [v20.8] Bì?��?â?��?chat.html iframe ë?�´�?��?
       #chatIframeWrap: position:absolute ��?#app ���?��?커�?
       chat-iframe-active ì?��?ë©?�ì‹ �?�€ 크롬(í?�¤ë”·�?��?�°�?ë?��? ì?�„�?��?ì?¨ê¹??
       â?��?chat.html이 팝ì?��?ì°½ 100% ì?��??��?(기능 ì?�ì‹�?0)
    â?�â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•�?*/
    #chatIframeWrap {
      display: none;
      position: absolute;
      inset: 0;
      z-index: 500;
      background: var(--bg-main);
    }
    #chatIframeWrap.active { display: block; }
    #chatIframeWrap iframe {
      width: 100%;
      height: 100%;
      border: none;
      display: block;
    }
    /* ì±?��?��?iframe í?�œì„�? ë©?�ì‹ �?�€ 모ë?��?UI ì?¨ê¹??*/
    #app.chat-iframe-active > #messengerHeader,
    #app.chat-iframe-active > #connBar,
    #app.chat-iframe-active > #myProfile,
    #app.chat-iframe-active > #searchBar,
    #app.chat-iframe-active > #tabBar,
    #app.chat-iframe-active > #contentArea { display: none !important; }

    /* cr-active: contentArea/í?�„ë¡œ�?���?ê²???�‰ë°�?ì?¨ê¸°ê³  ì±?��?�…룸ë§�?í?�œì‹�?*/
    #app.cr-active #contentArea,
    #app.cr-active #myProfile,
    #app.cr-active #searchBar { display: none !important; }

    /* â?�€â?�€ ì±?��?�…ë£�?ë?��?2ë?��?ë ?이ì?�„ì›�?(본문 + ì?��??�´ë“œ�?�¨ë„�? â?�€â?�€ */
    .cr-body-wrap {
      display: flex;
      flex: 1;
      min-height: 0;
      overflow: hidden;
    }
    .cr-main-area {
      display: flex;
      flex-direction: column;
      flex: 1;
      min-width: 0;
      min-height: 0;
    }

    /* â?�€â?�€ ì?��??�´ë“œ�?�¨ë„�?(멤ë²??목록) â?�€â?�€ */
    .cr-side-panel {
      width: 0;
      overflow: hidden;
      background: var(--bg-card);
      border-left: 0px solid var(--border);
      display: flex;
      flex-direction: column;
      transition: width 0.2s ease, border-left-width 0.2s ease;
      flex-shrink: 0;
    }
    .cr-side-panel.open {
      width: 200px;
      border-left-width: 1px;
    }
    .cr-side-title {
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      letter-spacing: 0.5px;
      text-transform: uppercase;
      padding: 10px 12px 6px;
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .cr-member-list {
      flex: 1;
      overflow-y: auto;
      padding: 6px 4px;
    }
    .cr-member-list::-webkit-scrollbar { width: 3px; }
    .cr-member-list::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
    .cr-member-item {
      display: flex;
      align-items: center;
      gap: 7px;
      padding: 5px 8px;
      border-radius: 8px;
      cursor: default;
      transition: background 0.12s;
    }
    .cr-member-item:hover { background: var(--bg-hover); }
    .cr-member-avatar {
      width: 26px; height: 26px; border-radius: 50%;
      background: var(--accent); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 10px; font-weight: 700; color: #fff;
      overflow: hidden;
    }
    .cr-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .cr-member-nick {
      font-size: 12px;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cr-member-host { font-size: 9px; color: var(--accent-light); margin-left: 2px; }

    /* ì?��??�´ë“œ�?�¨ë„�?í?� ê¸€ ë²?��?��?*/
    .cr-panel-btn {
      background: none; border: none;
      color: var(--text-secondary);
      cursor: pointer; padding: 6px; border-radius: 8px;
      font-size: 18px; display: flex; align-items: center;
      transition: background 0.15s;
    }
    .cr-panel-btn:hover { background: rgba(255,255,255,0.07); }
    .cr-panel-btn.active { color: var(--accent-light); }

    /* ì±?��?�…ë£�?ì?ë?��?í?�¤ë�?*/
    .cr-header {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0 12px;
      height: 52px;
      min-height: 52px;
      background: var(--bg-card);
      border-bottom: 1px solid var(--border);
      flex-shrink: 0;
    }
    .cr-back-btn {
      background: none;
      border: none;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 6px;
      border-radius: 8px;
      font-size: 20px;
      display: flex;
      align-items: center;
      transition: background 0.15s;
    }
    .cr-back-btn:hover { background: rgba(255,255,255,0.07); }
    .cr-header-info { flex: 1; min-width: 0; }
    .cr-header-name {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-primary);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .cr-header-meta {
      font-size: 11px;
      color: var(--text-secondary);
      margin-top: 1px;
    }

    /* ì±?��?��?ë©?�ì‹œ�?�€ ì?ì?��?*/
    #crMsgList {
      flex: 1;
      overflow-y: auto;
      padding: 12px 10px;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    #crMsgList::-webkit-scrollbar { width: 4px; }
    #crMsgList::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }

    /* ë©?�ì‹œ�?�€ ì?�„�?�´�?���?*/
    .cr-msg { display: flex; align-items: flex-start; gap: 7px; padding: 3px 2px; }
    .cr-msg.cr-mine  { flex-direction: row-reverse; }
    .cr-msg-avatar {
      width: 28px; height: 28px; border-radius: 50%;
      background: var(--accent); flex-shrink: 0;
      display: flex; align-items: center; justify-content: center;
      font-size: 11px; font-weight: 700; color: #fff;
      overflow: hidden;
    }
    .cr-msg-avatar img { width: 100%; height: 100%; object-fit: cover; }
    .cr-msg-body { max-width: 72%; display: flex; flex-direction: column; gap: 2px; }
    .cr-msg.cr-mine .cr-msg-body { align-items: flex-end; }
    .cr-msg-nick { font-size: 10px; color: var(--text-secondary); padding: 0 4px; }
    .cr-msg-bubble {
      padding: 7px 11px;
      border-radius: 14px;
      font-size: 13px;
      line-height: 1.5;
      word-break: break-word;
      background: var(--bg-card);
      color: var(--text-primary);
      border: 1px solid var(--border);
    }
    .cr-msg.cr-mine .cr-msg-bubble {
      background: var(--accent);
      color: #fff;
      border-color: transparent;
    }
    .cr-msg-time { font-size: 9px; color: var(--text-secondary); padding: 0 4px; align-self: flex-end; }

    /* ì?�œ�?�¤�?���?ë©?�ì‹œ�?�€ */
    .cr-msg-sys {
      text-align: center;
      font-size: 11px;
      color: var(--text-secondary);
      padding: 5px 0;
      opacity: 0.6;
    }

    /* ì±?��?��?í?�˜ë‹�?ìž?�ë ¥ë°�?*/
    .cr-footer {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 10px;
      padding-bottom: max(8px, env(safe-area-inset-bottom));
      background: var(--bg-card);
      border-top: 1px solid var(--border);
      flex-shrink: 0;
    }
    #crInput {
      flex: 1;
      background: var(--bg-app);
      border: 1px solid var(--border);
      border-radius: 20px;
      padding: 8px 14px;
      color: var(--text-primary);
      font-size: 14px;
      outline: none;
      resize: none;
      min-height: 38px;
      max-height: 100px;
      font-family: inherit;
      transition: border-color 0.15s;
    }
    #crInput:focus { border-color: var(--accent-light); }
    .cr-send-btn {
      width: 38px; height: 38px;
      background: var(--accent);
      border: none; border-radius: 50%;
      color: #fff; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; flex-shrink: 0;
      transition: opacity 0.15s, transform 0.1s;
    }
    .cr-send-btn:active { transform: scale(0.92); }
    .cr-send-btn:disabled { opacity: 0.4; cursor: default; }

    /* STT ���?��?*/
    .cr-stt-btn {
      width: 36px; height: 36px;
      background: none;
      border: 1px solid var(--border);
      border-radius: 50%;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 16px; flex-shrink: 0;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .cr-stt-btn:hover { background: rgba(255,255,255,0.06); }
    .cr-stt-btn.stt-on {
      background: rgba(239,68,68,0.15);
      border-color: rgba(239,68,68,0.5);
      color: #f87171;
      animation: crSttPulse 1.4s ease-in-out infinite;
    }
    @keyframes crSttPulse {
      0%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0.3); }
      50%       { box-shadow: 0 0 0 5px rgba(239,68,68,0); }
    }

    /* DM 모��?STT ���?��?*/
    .dm-stt-btn {
      background: none;
      border: 1px solid var(--border);
      border-radius: 50%;
      width: 32px; height: 32px;
      color: var(--text-secondary);
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-size: 15px; flex-shrink: 0;
      transition: background 0.15s, color 0.15s, border-color 0.15s;
    }
    .dm-stt-btn:hover { background: rgba(255,255,255,0.06); }
    .dm-stt-btn.stt-on {
      background: rgba(239,68,68,0.15);
      border-color: rgba(239,68,68,0.5);
      color: #f87171;
    }

    /* ì±?��?��?ë©?�ì‹œ�?�€ ì?� ë‹ˆë©”�?�´ì…�?*/
    @keyframes _crMsgIn {
      from { opacity: 0; transform: translateY(6px); }
      to   { opacity: 1; transform: translateY(0); }
    }

    /* ê³µì§??ë°°ë?��?(ì±?��?�…ë£�?ë?��? */
    #crAnnounceBanner {
      display: none;
      background: rgba(245,158,11,0.12);
      border-bottom: 1px solid rgba(245,158,11,0.25);
      padding: 6px 12px;
      font-size: 12px;
      color: #fde047;
      align-items: center;
      gap: 6px;
      flex-shrink: 0;
    }
    #crAnnounceBanner.cr-ann-show { display: flex; }

    /* â?�€â?�€â?�€ [Phase 6] 음ì?��?패ë?��?â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€â?�€ */
    #panelVoice {
      padding: 0 0 16px;
    }
    .voice-section-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: var(--text-muted);
      padding: 14px 16px 6px;
    }
    /* STT 빠른 ì?�¤�?���?ì¹´ë?��?*/
    .voice-stt-card {
      margin: 12px 12px 4px;
      background: linear-gradient(135deg, rgba(79,70,229,0.15), rgba(124,58,237,0.15));
      border: 1px solid rgba(79,70,229,0.3);
      border-radius: 14px;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      gap: 12px;
      cursor: pointer;
      transition: var(--transition);
    }
    .voice-stt-card:hover { background: linear-gradient(135deg, rgba(79,70,229,0.22), rgba(124,58,237,0.22)); }
    .voice-stt-icon {
      width: 44px; height: 44px;
      border-radius: 50%;
      background: rgba(79,70,229,0.25);
      display: flex; align-items: center; justify-content: center;
      font-size: 22px;
      color: var(--accent-light);
      flex-shrink: 0;
      transition: var(--transition);
    }
    .voice-stt-card.stt-active .voice-stt-icon {
      background: rgba(239,68,68,0.2);
      color: #f87171;
      animation: crSttPulse 1.4s ease-in-out infinite;
    }
    .voice-stt-info { flex: 1; min-width: 0; }
    .voice-stt-label {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-main);
    }
    .voice-stt-sub {
      font-size: 12px;
      color: var(--text-sub);
      margin-top: 2px;
    }
    .voice-stt-badge {
      font-size: 10px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 10px;
      background: rgba(79,70,229,0.25);
      color: var(--accent-light);
      flex-shrink: 0;
    }
    .voice-stt-badge.on {
      background: rgba(239,68,68,0.2);
      color: #f87171;
    }
    /* 음ì?��?ì±?��?�…ë°�?목록 */
    .voice-room-item {
      display: flex;
      align-items: center;
      padding: 10px 16px;
      gap: 10px;
      cursor: pointer;
      transition: var(--transition);
      border-bottom: 1px solid var(--border);
    }
    .voice-room-item:last-child { border-bottom: none; }
    .voice-room-item:hover { background: var(--bg-hover); }
    .voice-room-icon {
      width: 38px; height: 38px;
      border-radius: 10px;
      background: rgba(16,185,129,0.12);
      display: flex; align-items: center; justify-content: center;
      font-size: 18px;
      color: #34d399;
      flex-shrink: 0;
    }
    .voice-room-info { flex: 1; min-width: 0; }
    .voice-room-name {
      font-size: 13px;
      font-weight: 600;
      color: var(--text-main);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .voice-room-meta {
      font-size: 11px;
      color: var(--text-sub);
      margin-top: 2px;
    }
    .voice-room-join {
      font-size: 11px;
      font-weight: 700;
      padding: 5px 10px;
      border-radius: 8px;
      border: 1px solid rgba(79,70,229,0.35);
      background: transparent;
      color: var(--accent-light);
      cursor: pointer;
      transition: var(--transition);
      flex-shrink: 0;
    }
    .voice-room-join:hover { background: rgba(79,70,229,0.15); }
    .voice-empty {
      padding: 32px 16px;
      text-align: center;
      color: var(--text-muted);
      font-size: 13px;
    }
    .voice-empty-icon { font-size: 36px; margin-bottom: 8px; }

    /* â?�â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•�?
       [v21.3] ë©?�ì‹ �?�€ 모ë°?��?��?퍼스트 UI/UX 최적í?��?
       â?�â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•â•�?*/

    /* â?�€â?�€ í?�¤ë�?컴팩트í?��?â?�€â?�€ */
    @media (max-width: 768px) {
      #messengerHeader {
        height: 48px;
        padding: 0 8px;
      }
      .header-logo-icon { width: 26px; height: 26px; font-size: 14px; }
      .header-title-btn { font-size: 14px; }
      .hbtn { width: 32px; height: 32px; font-size: 18px; }
      /* ë²?ì?��?ìœ?��?��?â?��?í?�¤ë”에ì„�?í?�œì‹�?*/
      #msgrTranslateWrap .btn-trans { width: 32px; height: 32px; font-size: 18px; }
    }

    /* â?�€â?�€ ë?��?í?�„ë¡œ�?���?ë°??컴팩트í?��?â?�€â?�€ */
    @media (max-width: 768px) {
      #myProfile {
        height: 60px;
        padding: 0 12px;
        gap: 10px;
      }
      #myAvatar { width: 38px; height: 38px; }
      .my-online-dot { width: 10px; height: 10px; }
      #myNick { font-size: 14px; }
      #myStatusTxt { font-size: 11px; }
      #myPoints { font-size: 11px; }
    }

    /* â?�€â?�€ ê²???�‰�?��?â?�€â?�€ */
    @media (max-width: 768px) {
      #searchBar { padding: 6px 12px; }
      #searchInput { font-size: 15px; height: 36px; padding: 0 14px; }
    }

    /* â?�€â?�€ í?­ ë?�¤ë¹„게�?�´ì…�?â?�€â?�€ */
    @media (max-width: 768px) {
      #tabBar .tab-btn, .tab-btn {
        min-height: 48px;
        font-size: 12px;
        padding: 6px 8px;
      }
      #tabBar .tab-btn i, .tab-btn i { font-size: 22px; }
    }

    /* â?�€â?�€ DM/ë°© 목록 ì?�„�?�´�?���?â?��?í?�°�?��?í???�²�?â?�€â?�€ */
    @media (max-width: 768px) {
      .conv-item, .room-item, .friend-item, .msg-list-item {
        min-height: 60px;
        padding: 10px 12px;
      }
      .conv-avatar, .room-list-avatar { width: 44px; height: 44px; }
      .conv-name, .room-list-name { font-size: 14px; }
      .conv-preview, .room-list-desc { font-size: 12px; }
    }

    /* â?�€â?�€ DM ìž?�ë ¥�?��?모ë°?��?��?â?�€â?�€ */
    @media (max-width: 768px) {
      .dm-input-area, .dm-input-bar {
        padding: 8px 12px;
        padding-bottom: max(8px, env(safe-area-inset-bottom));
      }
      .dm-input-area input, .dm-input-bar input,
      .dm-input-area textarea, .dm-input-bar textarea {
        font-size: 16px; /* iOS zoom 방�?*/
        min-height: 40px;
      }
      .dm-send-btn {
        width: 44px !important; height: 44px !important;
      }
    }

    /* â?�€â?�€ 모ë?��?â?��?ë°?��?��€ì?�œ�?��?â?�€â?�€ */
    @media (max-width: 768px) {
      .msgr-modal-overlay, .modal-overlay-msgr {
        align-items: flex-end !important;
      }
      .msgr-modal-card {
        width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 85dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        animation: msgrSlideUp 0.28s cubic-bezier(0.4,0,0.2,1);
      }
      @keyframes msgrSlideUp {
        from { transform: translateY(60px); opacity: 0.7; }
        to   { transform: translateY(0);    opacity: 1;   }
      }
    }

    /* â?�€â?�€ DM 모ë?��?/ í?�„ë¡œ�?���?팝ì?��?ë°?��?��€ì?�œ�?�¸�?��??â?�€â?�€ */
    @media (max-width: 768px) {
      /* messenger.html ��?각�?팝��?공��?*/
      [id$="Modal"] > div,
      [id$="Popup"] > div {
        border-radius: 20px 20px 0 0 !important;
        width: 100% !important;
        max-width: 100% !important;
      }
      /* 모ë?��?ë?��?ë²?��?��?í?�°�?��?í???�²�?*/
      [id$="Modal"] button,
      [id$="Popup"] button {
        min-height: 44px;
      }
    }

    /* â?�€â?�€ ë°© ì¹´ë?��?(모ë°?��?��?ì±?��?�…ë°�?목록) â?�€â?�€ */
    @media (max-width: 768px) {
      .room-card-msgr {
        border-radius: 14px;
      }
      .room-card-msgr .room-cover { height: 70px; }
    }

    /* â?�€â?�€ í?­ ë°°ì§??â?�€â?�€ */
    @media (max-width: 768px) {
      .tab-badge {
        font-size: 10px;
        min-width: 16px; height: 16px;
        line-height: 16px;
        padding: 0 4px;
        border-radius: 8px;
      }
    }

    /* â?�€â?�€ í?� �?�¤�?��?ì?�Œë¦�?ìœ?��?��?(í?�˜ë‹�?ë?�¤ë¹�?ìœ?? â?�€â?�€ */
    @media (max-width: 768px) {
      /* messenger.html 자체 í?� �?�¤�?�¸ë“�?*/
      .toast, #toast, [class*="toast"] {
        bottom: 16px !important;
        left: 12px !important;
        right: 12px !important;
        width: auto !important;
        max-width: none !important;
        font-size: 14px !important;
        padding: 12px 20px !important;
        border-radius: 12px !important;
      }
    }

    /* â?�€â?�€ í?�˜ë‹�?safe area ì?��?�°�?â?�€â?�€ */
    @media (max-width: 768px) {
      #app {
        padding-bottom: env(safe-area-inset-bottom);
      }
      #tabBar {
        padding-bottom: env(safe-area-inset-bottom);
      }
    }

    /* â?�€â?�€ [v20.9] PWA ì?�¤�?��?ë°°ë?��?â?�€â?�€ */
    #pwaInstallBanner {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 14px;
      background: linear-gradient(90deg, rgba(79,70,229,0.25), rgba(124,58,237,0.18));
      border-bottom: 1px solid rgba(79,70,229,0.3);
      font-size: 12px;
      color: var(--text-main);
      flex-shrink: 0;
      animation: slideDown 0.3s ease;
    }
    @keyframes slideDown {
      from { transform: translateY(-100%); opacity: 0; }
      to   { transform: translateY(0);    opacity: 1; }
    }
    #pwaInstallText { flex: 1; }
    #pwaInstallBtn {
      padding: 4px 14px; border-radius: 12px;
      background: var(--accent); color: #fff;
      border: none; font-size: 12px; font-weight: 700; cursor: pointer;
      flex-shrink: 0;
    }
    #pwaInstallBtn:hover { background: var(--accent-light); }
    #pwaInstallDismiss {
      width: 22px; height: 22px; border-radius: 50%;
      background: transparent; border: none;
      color: var(--text-ghost); font-size: 13px; cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    #pwaInstallDismiss:hover { color: var(--text-main); background: var(--bg-hover); }
    /* [v20.11] PWA ì?�¤�?��?ë²?��?��?â?��?ì´?록 ì?¨ì?��?�¸�?효과 */
    @keyframes pwa-breathe {
      0%, 100% {
        box-shadow: 0 0 0 0 rgba(34,197,94,0);
        transform: scale(1);
        color: #22c55e;
      }
      50% {
        box-shadow: 0 0 0 7px rgba(34,197,94,0.38);
        transform: scale(1.13);
        color: #4ade80;
      }
    }
    .pwa-install-pulse {
      animation: pwa-breathe 2s ease-in-out infinite;
      color: #22c55e !important;
    }
    .pwa-install-pulse:hover { animation: none; color: #4ade80 !important; }

/* ================================================================
   [DESIGN PATCH] ?��?지 기반 ?��? 복원 ???�로???�크 + ?�브??================================================================ */

/* ?�?� 1. ?�로???�크 ?��? ?�퍼: ?�면 ?�단 중앙 고정 ?�?� */
.floating-dock-wrapper {
  position: fixed;
  bottom: 18px;
  left: 0;
  right: 0;
  z-index: 9000;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  padding: 0 16px;
}

/* ?�?� 2. ?�크 본체: ?�두????�� ?�약 ?�?� */
.floating-dock-wrapper > #tabBar,
.floating-dock {
  pointer-events: all;
  display: flex !important;
  align-items: center !important;
  justify-content: space-around !important;
  background: rgba(50, 45, 65, 0.95) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-radius: 26px !important;
  box-shadow: 0 8px 36px rgba(0,0,0,0.38), 0 2px 10px rgba(0,0,0,0.22) !important;
  border: 1.5px solid #000000 !important;
  padding: 4px 10px !important;
  width: 100% !important;
  max-width: 320px !important;
  min-height: 44px !important;
  height: auto !important;
  border-top: none !important;
  flex-shrink: 0 !important;
  order: unset !important;
}

/* 모바??모드: ??조�???가로폭 �?가?�데 ?�렬 */
@media (max-width: 768px) {
  .floating-dock-wrapper > #tabBar,
  .floating-dock {
    max-width: 250px !important;
  }
}

/* ?�?� 3. 기존 #tabBar ?�반 ?��????�전 무력???�?� */
#tabBar {
  all: unset;
}

/* ?�?� 4. ?�크 ?�이??(??버튼) ?�?� */
.tab-btn.dock-item {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 2px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  padding: 3px 4px !important;
  border-radius: 18px !important;
  color: #ffffff !important;
  transition: color 0.22s ease, transform 0.18s ease !important;
  position: relative !important;
  min-width: 0 !important;
  border-top: none !important;
}

/* ?�이�?*/
.tab-btn.dock-item i {
  font-size: 20px !important;
  line-height: 1 !important;
  color: inherit !important;
  transition: transform 0.2s ease, color 0.2s ease !important;
}

/* ?�벨 ?�스??*/
.tab-btn.dock-item > span:not(.tab-badge) {
  font-size: 9px !important;
  font-weight: 600 !important;
  letter-spacing: -0.1px !important;
  color: inherit !important;
  white-space: nowrap !important;
}

/* ?�성 ?? 보라??+ ?�이�??�로 */
.tab-btn.dock-item.active {
  color: #b08aff !important;
}
.tab-btn.dock-item.active i {
  color: #b08aff !important;
  transform: translateY(-1px) !important;
}
.tab-btn.dock-item.active > span:not(.tab-badge) {
  color: #b08aff !important;
}

/* ?�버: ?�벤???�상 */
.tab-btn.dock-item:hover:not(.active) {
  color: #b08aff !important;
  background: transparent !important;
}
.tab-btn.dock-item:hover:not(.active) i {
  transform: translateY(-1px) !important;
}

/* ?�?� 5. 뱃�? ?�?� */
.tab-btn.dock-item .tab-badge {
  position: absolute !important;
  top: 1px !important;
  right: calc(50% - 18px) !important;
  background: #ff4d77 !important;
  color: #fff !important;
  font-size: 9px !important;
  font-weight: 700 !important;
  min-width: 16px !important;
  height: 16px !important;
  border-radius: 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 4px !important;
  border: 2px solid rgba(50, 45, 65, 0.95) !important;
}
.tab-btn.dock-item .tab-badge.hidden { display: none !important; }

/* ?�?� 6. 콘텐�??�역 ?�단 ?�백 (?�크 공간 ?�보) ?�?� */
#contentArea {
  padding-bottom: 96px !important;
  overflow-y: auto;
}

/* ?�?� 7. #app flex 구조?�서 tabBar ?�거 (?�퍼가 fixed?��?�? ?�?� */
#app {
  /* floating-dock-wrapper??fixed?��?�?#app flex ?�름?�서 분리 */
}
.floating-dock-wrapper {
  /* ?��? fixed ??#app�?무�? */
}

/* ?�?� 8. 채팅/iframe ?�성???�크 ?��? ?��? ?�?� */
#app.chat-iframe-active .floating-dock-wrapper,
#app.cr-active .floating-dock-wrapper {
  display: none !important;
}

/* ================================================================
   [DESIGN PATCH] ?�라???�이지 ?�브?????��?지 ?��? 복원
================================================================ */
.online-sub-tabs {
  display: flex !important;
  flex-direction: row !important;
  gap: 8px !important;
  padding: 8px 12px 4px 12px !important;
  background: transparent !important;
  flex-shrink: 0;
}

.online-sub-tab {
  flex: 1 !important;
  height: 32px !important;
  border: none !important;
  border-radius: 10px !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease !important;
  background: #ffffff !important;
  color: var(--text-sub, #6b667e) !important;
  letter-spacing: -0.2px !important;
}

.online-sub-tab.active {
  background: var(--accent, #8a63e5) !important;
  color: #ffffff !important;
}

.online-sub-tab:hover:not(.active) {
  background: var(--bg-hover, #ece9f5) !important;
  color: var(--text-main, #2d2b38) !important;
}

/* ?�라???�역 ?�시/?��? */
.online-area {
  display: none !important;
}
.online-area.active {
  display: block !important;
}

/* ================================================================
   [DESIGN PATCH] ?�체 ??배경 ???�한 ?�벤??(#f4f2f9)
================================================================ */
body, #app, #contentArea {
  background: var(--bg-main, #f4f2f9) !important;
}

.panel {
  background: var(--bg-main, #f4f2f9) !important;
}
/* ================================================================
   [DESIGN PATCH] DM ?�스??배너 ???�하???�라?�드???�림
================================================================ */
#dmToastBanner {
  position: fixed;
  bottom: 100px;
  right: 16px;
  z-index: 9999;
  display: none;
  align-items: center;
  gap: 10px;
  background: var(--bg-card, #ffffff);
  border: 1px solid var(--border, rgba(138,99,229,0.15));
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18), 0 2px 8px rgba(138,99,229,0.12);
  padding: 10px 12px 10px 10px;
  min-width: 220px;
  max-width: 280px;
  cursor: pointer;
  transform: translateX(120%);
  transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1), opacity 0.22s ease;
  opacity: 0;
}

#dmToastBanner.show {
  display: flex;
  transform: translateX(0);
  opacity: 1;
}

.dm-toast-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--accent, #8a63e5);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.dm-toast-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.dm-toast-name {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-main, #2d2b38);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-toast-preview {
  font-size: 12px;
  color: var(--text-sub, #6b667e);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dm-toast-close {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-ghost, #9e99af);
  font-size: 18px;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  transition: background 0.15s, color 0.15s;
}

.dm-toast-close:hover {
  background: var(--bg-hover, #ece9f5);
  color: var(--text-main, #2d2b38);
}

/* ========================================
   User List Items & Cards (imported from chat.css)
======================================== */
.user-card {
  background: var(--bg-surface, var(--bg-card));
  border: 1px solid var(--border-light, var(--border));
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  box-shadow: var(--shadow-sm);
}

.user-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  cursor: pointer;
  background: transparent;
  transition: var(--transition);
}

.user-card-header:hover {
  background: var(--bg-surface-hover, var(--bg-hover));
}

.user-card-body {
  padding: 4px 10px 6px;
  border-top: 1px dashed var(--border-light, var(--border));
  display: flex;
  flex-direction: column;
  gap: 3px;
  animation: slideUp 0.2s ease;
}

.card-bio {
  font-size: 12px;
  color: var(--text-primary, var(--text-main));
  background: var(--bg-input, var(--bg-hover));
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: flex-start;
  gap: 6px;
  word-break: break-all;
}

.card-stats {
  display: flex;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary, var(--text-sub));
  padding-bottom: 2px;
}

.card-stats span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.card-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3px;
  margin-top: 0;
}

.user-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
}

.user-item:hover {
  background: var(--bg-surface-hover, var(--bg-hover));
}

.user-item .u-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--text-tertiary, var(--text-ghost));
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  position: relative;
  flex-shrink: 0;
}

.user-item .u-info {
  flex: 1;
  min-width: 0;
}

.user-item .u-info .u-nick {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-main);
}

.user-item .u-info .u-status {
  font-size: 11px;
  color: var(--text-secondary, var(--text-sub));
}

.user-item .u-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: var(--transition);
}

.user-item:hover .u-actions {
  opacity: 1;
}

.btn-outline {
  background: transparent;
  border: 1px solid var(--border-color, var(--border));
  color: var(--text-secondary, var(--text-sub));
  border-radius: var(--radius-sm);
  cursor: pointer;
}
.btn-outline:hover {
  background: var(--bg-surface-hover, var(--bg-hover));
  color: var(--text-primary, var(--text-main));
  border-color: var(--text-tertiary, var(--text-ghost));
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ?�?�?� [v22.0] Direct Message Room List Styles ?�?�?� */
.direct-room-list {
  display: flex;
  flex-direction: column;
  padding: 10px 12px 20px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* [v23.6] 대화내용 지우기 버튼 */
.dm-clear-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-ghost);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  margin-left: 4px;
}
.dm-clear-btn:hover {
  background: rgba(245, 158, 11, 0.12);
  color: #f59e0b;
}

.dm-delete-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-ghost);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--transition);
  flex-shrink: 0;
  margin-left: 8px;
}
.dm-delete-btn:hover {
  background: rgba(239, 68, 68, 0.1);
  color: #ff5c8a;
}