/* 방 목록 (조직도방 + 개인방)  v1.0  2026-08-07
   운영자 지시: 조직도방 = 노랑 / 개인방 = 초록.
   두 색만 쓰고 나머지는 흰 바탕에 검은 글씨로 둔다.
   정확한 톤은 시안이 나오면 여기 변수만 갈아 끼우면 된다. */
:root {
    --sr-team:     #F2C94C;   /* 노랑 — 조직도에서 온 팀방 */
    --sr-team-bg:  #FFFBEF;
    --sr-personal: #34A853;   /* 초록 — 회원이 만든 방 */
    --sr-personal-bg: #F1FAF4;
    --sr-row-ink:  #2B2B2B;
    --sr-row-sub:  #8A8A8A;
}

#srRoomsBoard { padding: 10px 12px 16px; }

/* 구역 제목 — 작게, 조용하게 */
.sr-room-sec {
    display: flex; align-items: center; justify-content: space-between;
    font-size: 12px; font-weight: 700; color: var(--sr-row-sub);
    letter-spacing: -0.2px; margin: 14px 2px 6px;
}
.sr-room-sec:first-child { margin-top: 2px; }

/* 방 한 줄 — 카톡 채팅 목록과 같은 배치 */
.sr-room-row {
    display: flex; align-items: center; gap: 10px;
    padding: 10px 12px; margin-bottom: 6px;
    background: #fff; border: 1px solid #EFEFEF; border-left-width: 4px;
    border-radius: 12px; cursor: pointer;
    transition: background .15s ease;
}
.sr-room-row:active { background: #FAFAFA; }
.sr-tone-team     { border-left-color: var(--sr-team);     background: var(--sr-team-bg); }
.sr-tone-personal { border-left-color: var(--sr-personal); background: var(--sr-personal-bg); }

.sr-room-ava {
    width: 40px; height: 40px; border-radius: 14px; flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; font-weight: 700; color: #fff;
}
.sr-tone-team     .sr-room-ava { background: var(--sr-team); }
.sr-tone-personal .sr-room-ava { background: var(--sr-personal); }

.sr-room-body { flex: 1; min-width: 0; }
.sr-room-line1 { display: flex; align-items: baseline; gap: 8px; }
.sr-room-name {
    flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: var(--sr-row-ink);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-room-time { font-size: 11px; color: var(--sr-row-sub); flex-shrink: 0; }

.sr-room-line2 { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.sr-room-msg {
    flex: 1; min-width: 0; font-size: 12.5px; color: #6B6B6B;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.sr-room-quiet { color: #B4B4B4; }

/* 안읽음 — 카톡처럼 동그란 배지 */
.sr-room-badge {
    flex-shrink: 0; min-width: 18px; height: 18px; padding: 0 6px;
    display: flex; align-items: center; justify-content: center;
    background: #FF3B30; color: #fff; font-size: 10px; font-weight: 700;
    border-radius: 9px;
}

/* 다른 팀은 접어 둔다 — "조직도는 볼 때만" */
.sr-room-more {
    width: 100%; margin: 2px 0 4px; padding: 9px 0;
    border: 1px dashed #E2D9C2; border-radius: 10px;
    background: transparent; color: #9A8B6B;
    font-size: 12px; font-weight: 600; cursor: pointer;
}
.sr-room-more:active { background: rgba(242,201,76,0.10); }

.sr-room-add {
    border: none; border-radius: 8px; padding: 4px 10px; cursor: pointer;
    background: var(--sr-personal); color: #fff; font-size: 11px; font-weight: 700;
}

.sr-room-empty {
    padding: 14px 12px; font-size: 12.5px; color: #A0A0A0;
    background: #FAFAFA; border-radius: 10px; text-align: center;
}

/* 조직도 트리 여닫이 */
.sr-tree-toggle {
    display: block; width: 100%; margin: 12px 0 0; padding: 9px 0;
    border: 1px solid #E8E8E8; border-radius: 10px; background: #fff;
    color: #7A7A7A; font-size: 12px; font-weight: 600; cursor: pointer;
}

@media (max-width: 640px) {
    #srRoomsBoard { padding: 8px 10px 14px; }
    .sr-room-row { padding: 9px 10px; }
    .sr-room-ava { width: 36px; height: 36px; border-radius: 12px; font-size: 15px; }
    .sr-room-name { font-size: 13.5px; }
    .sr-room-msg { font-size: 12px; }
}

/* 방 설정 (방장만) — 행 오른쪽 끝. 방에 들어가려는 손짓과 겹치지 않게 따로 뒀다. */
.sr-room-gear {
    flex-shrink: 0; width: 30px; height: 30px; margin-left: 2px;
    display: flex; align-items: center; justify-content: center;
    border: none; background: transparent; cursor: pointer;
    color: #9A9A9A; border-radius: 8px;
}
.sr-room-gear:active { background: rgba(0,0,0,0.05); }
.sr-room-gear svg { width: 15px; height: 15px; }
/* 잠긴 방은 자물쇠가 조금 더 또렷하게 — 잠겼다는 걸 목록에서 바로 알아야 한다 */
.sr-tone-personal .sr-room-gear { color: #6FA98A; }

/* 참여코드가 필요한 방 — 목록에서 한눈에 (이모지 대신 SVG) */
.sr-room-lock {
    flex-shrink: 0; display: inline-flex; align-items: center;
    width: 13px; height: 13px; margin-right: 4px; color: #6FA98A;
}
.sr-room-lock svg { width: 13px; height: 13px; }