/*
 * 번개모임.
 *
 * 목록에서 한눈에 읽혀야 하는 것은 셋이다 — **어디, 언제, 몇 자리 남았나.**
 * 그래서 카드 한 장에 그 셋만 크게 두고 나머지는 작게 깔았다.
 *
 * 맵기는 왼쪽에 색으로 세워 둔다. 지도의 핀과 같은 색이라, 목록을 훑을 때
 * 어느 방이 센 집인지 글자를 안 읽어도 보인다.
 */

.mb-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    margin: 0 0 var(--sp-4);
}

/* ── 카드 ─────────────────────────────────────────── */

.mb-list {
    display: flex;
    flex-direction: column;
    gap: var(--sp-3);
}

.mb-card {
    display: flex;
    align-items: center;
    gap: var(--sp-4);
    width: 100%;
    padding: var(--sp-4);
    text-align: left;
    appearance: none;
    font: inherit;
    color: var(--ink);
    background: var(--surface);
    border: 1px solid var(--line-2);
    border-radius: var(--r-3);
    cursor: pointer;
}
.mb-card:hover { border-color: var(--brand); }

/*
 * 혼자 못 가는 집.
 *
 * 이 기능이 있는 이유가 여기다 — 서약서 쓰는 집은 혼자 가면 남기고
 * 나온다. 그래서 목록에서 눈에 띄게 세워 둔다. 다만 배경을 칠하지는
 * 않는다. 칠하면 '위험' 으로 읽히고, 도전하러 온 사람에게는 그게
 * 말리는 것처럼 보인다.
 */
.mb-card.is-hard { border-left: 3px solid var(--brand); }

.mb-card__lv {
    flex: none;
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    border-radius: var(--r-pill);
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--t-caption);
    /*
     * 색은 지도 핀과 같은 짝을 쓴다 (lv-1 ~ lv-5). 없으면 회색.
     *
     * tokens.css 의 .lv-N 이 --lv / --lv-on 을 채워 준다. 예전에는 그 변수를
     * 안 읽고 회색을 못 박아 두어서, 목록의 배지가 **어느 방이든 회색**이었다.
     * 왼쪽 색으로 센 집을 알아보라고 만든 자리가 통째로 죽어 있었다.
     */
    background: var(--lv, var(--line-2));
    color: var(--lv-on, var(--ink-dim));
}

.mb-card__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.mb-card__t {
    font-weight: 700;
    /* 제목이 길면 줄이지 않고 두 줄까지 보여 준다 — '핵불닭 같이
       도전하실 분' 이 '핵불닭 같이…' 가 되면 무슨 방인지 안 남는다. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.mb-card__store,
.mb-card__meta {
    display: flex;
    align-items: center;
    gap: 4px;
    color: var(--smoke);
    font-size: var(--t-caption);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mb-card__seat {
    flex: none;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-dim);
    font-size: var(--t-caption);
    font-weight: 600;
}
.mb-card__seat.is-full { color: var(--smoke); }

/* ── 방 안쪽 ───────────────────────────────────────── */

.mb-room__store,
.mb-room__when {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sp-2);
    color: var(--ink-dim);
    font-size: var(--t-caption);
}
.mb-room__note {
    margin: var(--sp-3) 0;
    padding: var(--sp-3);
    background: var(--surface-2);
    border-radius: var(--r-2);
    font-size: var(--t-caption);
}

.mb-members {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: var(--sp-3) 0;
}
.mb-mem {
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    font-size: var(--t-caption);
}
.mb-mem.is-host { background: var(--brand); color: #fff; }
.mb-mem em { font-style: normal; opacity: .7; }

/*
 * 대화.
 *
 * 높이를 못 박는다. 안 박으면 글이 쌓일수록 창이 길어지고, 결국
 * 아래 단추(나가기·신고)가 화면 밖으로 밀려난다. 불편해진 사람이
 * 빠져나오는 길은 언제나 보여야 한다.
 */
.mb-chat {
    height: 240px;
    overflow-y: auto;
    padding: var(--sp-3);
    margin: var(--sp-3) 0;
    background: var(--surface-2);
    border-radius: var(--r-2);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.mb-msg { display: flex; flex-direction: column; gap: 2px; max-width: 85%; }
.mb-msg b { font-size: var(--t-caption); color: var(--smoke); font-weight: 600; }
.mb-msg span {
    padding: 7px 11px;
    border-radius: var(--r-2);
    background: var(--paper);
    border: 1px solid var(--line-2);
    /* 긴 낱말이 칸을 밀어내지 않게 한다 — 주소나 링크가 그렇다. */
    overflow-wrap: anywhere;
}
.mb-msg.is-me { align-self: flex-end; align-items: flex-end; }
.mb-msg.is-me span { background: var(--brand); border-color: var(--brand); color: #fff; }

.mb-send { display: flex; gap: var(--sp-2); }
.mb-send .inp { flex: 1; }

.mb-room__acts {
    display: flex;
    gap: var(--sp-2);
    margin-top: var(--sp-4);
    padding-top: var(--sp-3);
    border-top: 1px solid var(--line);
}

/* ── 방 만들기 ─────────────────────────────────────── */

.mb-new { display: flex; flex-direction: column; gap: var(--sp-3); }
.mb-new__store {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: var(--sp-3);
    background: var(--surface-2);
    border-radius: var(--r-2);
    font-weight: 600;
}

.mb-hits { display: flex; flex-direction: column; gap: 4px; max-height: 200px; overflow-y: auto; }
.mb-hit {
    display: flex;
    flex-direction: column;
    gap: 2px;
    width: 100%;
    padding: 8px 11px;
    text-align: left;
    appearance: none;
    font: inherit;
    color: var(--ink);
    background: var(--surface-2);
    border: 1px solid transparent;
    border-radius: var(--r-2);
    cursor: pointer;
}
.mb-hit.is-on { border-color: var(--brand); background: var(--paper); }
.mb-hit em { font-style: normal; font-family: var(--mono); color: var(--smoke); }
.mb-hit small { color: var(--smoke); font-size: var(--t-caption); }

/* 좁은 화면에서 카드가 답답해지지 않게 한다. */
@media (max-width: 420px) {
    .mb-card { gap: var(--sp-3); padding: var(--sp-3); }
    .mb-card__lv { width: 38px; height: 38px; }
    .mb-chat { height: 200px; }
}

/* ── 방 만들기: 고른 가게 카드 ──────────────────────────
 *
 * 가게는 선택이라 뺄 수 있어야 한다. 가게 화면에서 들어왔더라도
 * "그 집 말고 사람만 모으자" 가 될 수 있기 때문이다.
 */
.mb-new .fld { margin-bottom: 0; }   /* 줄 사이는 .mb-new 의 gap 이 정한다 */
.mb-new__lv {
    flex: none;
    padding: 3px 9px;
    border-radius: var(--r-pill);
    background: var(--lv, var(--grey-pin));
    color: var(--lv-on, #FFFFFF);
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    font-weight: 700;
}
.mb-new__name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mb-new__x {
    flex: none;
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--paper);
    color: var(--smoke);
    cursor: pointer;
}
.mb-new__x:hover { color: var(--brand); }

/* 가게가 없는 방. 빈 줄 대신 그 사실을 적는다. */
.mb-card__store--none { color: var(--smoke); font-style: normal; }

/* ══ 방 화면 (room.html) ══════════════════════════════════
 *
 * 모달이던 방이 화면으로 나왔다 (2026-08-30). 그래서 여기서부터는
 * '창 안에 맞춘 높이' 가 아니라 **읽는 글의 폭**을 기준으로 짠다.
 */

/* 글이 드는 화면은 한 줄을 너무 길게 두지 않는다. 70자를 넘으면
   눈이 다음 줄 첫 글자를 못 찾는다. */
.doc--narrow { max-width: 720px; }

.rm__back { margin: 0 0 var(--sp-4); }
.rm__back a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--smoke);
    font-size: var(--t-caption);
}

.rm__head {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0 0 var(--sp-2);
}

/*
 * 상태를 맨 위에 둔다.
 *
 * 취소된 방을 모르고 읽으면 대화까지 다 읽고 나서야 못 가는 방인 것을
 * 안다. 제목보다 먼저 와야 하는 정보다.
 */
.rm__state {
    padding: 4px 11px;
    border-radius: var(--r-pill);
    font-size: var(--t-caption);
    font-weight: 700;
    background: var(--surface-2);
    color: var(--ink-dim);
}
.rm__state.is-open { background: var(--brand); color: #FFFFFF; }
.rm__state.is-full,
.rm__state.is-closed { background: var(--surface-2); color: var(--ink-dim); }
.rm__state.is-canceled,
.rm__state.is-done {
    background: var(--surface-2);
    color: var(--smoke);
    text-decoration: line-through;
}

.rm__region,
.rm__host {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--r-pill);
    background: var(--surface-2);
    color: var(--ink-dim);
    font-size: var(--t-caption);
    font-weight: 600;
}

.rm__title {
    margin: 0 0 var(--sp-4);
    font-size: var(--t-h1);
    line-height: 1.25;
    /* 가게 이름이 든 제목은 안 자른다 — 어디로 가는지가 통째로 사라진다. */
    overflow-wrap: anywhere;
}

.rm__facts {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--sp-4);
    background: var(--surface-2);
    border-radius: var(--r-3);
}
.rm__fact {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: var(--t-body);
    color: var(--ink);
    overflow-wrap: anywhere;
}
.rm__fact.muted { color: var(--smoke); }
.rm__lv {
    padding: 2px 8px;
    border-radius: var(--r-pill);
    background: var(--lv, var(--line-2));
    color: var(--lv-on, var(--ink-dim));
    font-family: var(--font-mono);
    font-size: var(--t-caption);
    font-weight: 700;
}

.rm__note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: var(--sp-4) 0 0;
    padding: var(--sp-4);
    background: var(--paper);
    border: 1px solid var(--line-2);
    border-radius: var(--r-2);
    color: var(--ink);
    overflow-wrap: anywhere;
}

.rm__h2 {
    margin: var(--sp-6) 0 var(--sp-3);
    font-size: var(--t-h3);
}

.rm__mems {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

/* 내보내기 단추. 방장에게만 보이고, 자기 자신에게는 안 보인다. */
.mb-mem { display: inline-flex; align-items: center; gap: 5px; }
.mb-mem__x {
    display: grid;
    place-items: center;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: inherit;
    opacity: .65;
    cursor: pointer;
}
.mb-mem__x:hover { opacity: 1; }

/*
 * 단추 줄.
 *
 * 줄바꿈을 허용한다. 폰에서 여섯 개가 한 줄에 안 들어가는데, 안 접으면
 * 오른쪽 것들이 화면 밖으로 나간다 — 나가기와 신고가 거기 있다.
 */
.rm__acts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin: var(--sp-5) 0 0;
}

/*
 * 방장 도구.
 *
 * 테두리로 묶고 누가 쓰는 것인지 적는다. 참여·나가기와 같은 줄에 섞으면
 * 참석자가 실수로 누를 자리에 '방 취소' 가 온다.
 */
.rm__host-box {
    margin: var(--sp-6) 0 0;
    padding: var(--sp-4);
    border: 1px dashed var(--line-2);
    border-radius: var(--r-3);
}
.rm__host-box h2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0 0 var(--sp-2);
    font-size: var(--t-h3);
}
.rm__host-box .note { margin: 0; }
.rm__host-box .rm__acts { margin: var(--sp-3) 0; }

.rm__law {
    margin: var(--sp-6) 0 0;
    color: var(--smoke);
    font-size: var(--t-caption);
}

/* 방 화면의 대화는 창에 갇혀 있지 않으니 조금 더 길게 둔다. */
.rm .mb-chat { height: 320px; }

/* ── 지역 칩 ─────────────────────────────────────────
 *
 * 열일곱 개다. 가로로만 흐르게 두면(.pickrow 의 기본) 데스크톱에서
 * 오른쪽 절반이 안 보이고, 스크롤 막대가 없어서 더 있다는 것도 모른다.
 */
.pickrow--wrap {
    flex-wrap: wrap;
    overflow: visible;
    margin: 0 0 var(--sp-4);
}

/* 가게가 정한 지역. 못 바꾼다 — 눌러도 안 되는 것은 단추가 아니다. */
.pick.is-fixed { cursor: default; }

/* ── 방 만들기 화면 ──────────────────────────────────── */

.mb-new__acts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-2);
    margin-top: var(--sp-2);
}

/* 내가 들어가 있는 방. 목록에서 바로 알아보게 한다. */
.mb-card__seat.is-mine { background: var(--brand); color: #FFFFFF; }

/* ── 탭 (열린 번개 / 내 방) ────────────────────────────
 *
 * 들어갈 방을 찾는 일과, 이미 들어간 방을 다시 여는 일은 다른 일이다.
 * 한 목록에 섞으면 내 방이 지역 필터에 걸려 사라진다.
 */
.mb-tabs {
    display: flex;
    gap: var(--sp-2);
    margin: 0 0 var(--sp-4);
    border-bottom: 1px solid var(--line-2);
}
.mb-tab {
    appearance: none;
    border: 0;
    background: none;
    font: inherit;
    font-weight: 700;
    color: var(--smoke);
    padding: 10px 4px;
    margin-bottom: -1px;
    /* 밑줄로 고른 것을 말한다. 색만 바꾸면 색각 이상이 있는 사람에게는
       아무 정보도 아니다 — 이 서비스가 배지에서 지키는 규칙과 같다. */
    border-bottom: 3px solid transparent;
    cursor: pointer;
}
.mb-tab + .mb-tab { margin-left: var(--sp-4); }
.mb-tab:hover { color: var(--ink); }
.mb-tab.is-on { color: var(--brand); border-bottom-color: var(--brand); }