/* ══════════════════════════════════════════════════════════
   💬 청취담 쪽지 서랍 — 서식

   친구메뉴(friends.html)와 채팅메뉴(chat.html)가 같이 쓴다.
   ⚠️ 두 화면에 같은 서식을 각각 적어 두면 한쪽만 고치는 일이 반드시 생긴다.
      한 자리에 두고 둘 다 여기를 본다.

   색은 쓰는 화면의 것을 물려받는다(--green 등). 없으면 기본값으로 버틴다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat {
    --c-green: var(--green, #123C36);
    --c-green2: var(--green2, #1A544B);
    --c-red: var(--red, #C82433);
    --c-bg: var(--bg, #F4F7F6);
    --c-ink: var(--ink, #142421);
    --c-dim2: var(--dim2, #86958F);
    --c-line: var(--line, rgba(18, 60, 54, 0.10));

    position: fixed; inset: 0; z-index: 2147483601; background: var(--c-bg);
    display: none; flex-direction: column;
    font-family: 'Pretendard', -apple-system, sans-serif; letter-spacing: -0.02em;
}
.ch2d-chat.on { display: flex; }

/* ══════════════════════════════════════════════════════════
   📤 대화창 없이 공유창만 — 스토리·모임을 보다가 나눠 줄 때

   ⚠️ 공유창(.act)은 대화창 안에 들어 있다. 대화창이 안 열려 있으면 함께 숨는다.
      그래서 껍데기만 살짝 열어 두고 그 안의 공유창만 보이게 한다.
   ⚠️ 스토리 창(2147483603)·모임 창(2147483606) 위에 떠야 한다 —
      아래에 깔리면 눌러도 아무 일이 없어 보인다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat.lite {
    display: flex; background: transparent; z-index: 2147483610; pointer-events: none;
}
.ch2d-chat.lite > *:not(.act) { display: none !important; }
.ch2d-chat.lite .act { pointer-events: auto; }

.ch2d-chat .chat-head {
    flex: 0 0 auto; background: var(--c-green); color: #FFFFFF;
    padding: calc(env(safe-area-inset-top, 0px) + 13px) 15px 13px;
    display: flex; align-items: center; gap: 12px;
}
.ch2d-chat .chat-head button {
    border: 0; background: transparent; color: #FFFFFF; font-size: 1.05rem; cursor: pointer; padding: 4px 6px;
}
/* ══════════════════════════════════════════════════════════
   🏛 운영진 국 단톡방 — 머리말이 «청취담 레드» 다 (2026-09-04, 대표 지시)

   ⚠️ 여느 단톡방(그린)과 한눈에 갈라 보여야 한다. 여기 오가는 말은 운영진끼리의
      것이고, 폰을 잠깐 건네주는 자리에서 「지금 어느 방인가」 가 색 하나로 읽혀야 한다.
   ⚠️ 딱지(.ops)는 ch2d-chat.js 가 방을 열 때 붙이고 닫을 때 «반드시» 뗀다.
      안 떼면 다음에 여는 여느 단톡방까지 붉게 남는다. */
.ch2d-chat.ops .chat-head { background: var(--c-red); }
.ch2d-chat.ops .chat-face { background: rgba(255,255,255,0.18); color: #FFE0E4; }
.ch2d-chat .chat-face {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
    background: rgba(255,255,255,0.14); color: #CFE5DE;
    display: flex; align-items: center; justify-content: center; font-size: 0.95rem;
}
.ch2d-chat .chat-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch2d-chat .chat-head .t { flex: 1; min-width: 0; }
/* 🗓 모임 방에서는 제목을 눌러 그 모임을 볼 수 있다 —
      누를 수 있다는 표가 없으면 아무도 안 눌러 본다. 작은 화살표 하나로 알린다. */
.ch2d-chat .chat-head .t.tap { cursor: pointer; }
.ch2d-chat .chat-head .t.tap b::after {
    content: '\f105';                      /* fa-angle-right */
    font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: 0.72em; opacity: 0.55; margin-left: 6px;
}
.ch2d-chat .chat-head .t.tap:active b { opacity: 0.7; }
.ch2d-chat .chat-head .t b {
    display: block; font-size: 0.95rem; font-weight: 800;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .chat-head .t span {
    display: block; font-size: 0.7rem; color: #A9C6BE; font-weight: 600; margin-top: 1px;
}

.ch2d-chat .chat-body {
    flex: 1 1 auto; overflow-y: auto; padding: 16px 14px;
    display: flex; flex-direction: column; gap: 7px;
}
/* ══════════════════════════════════════════════════════════
   ⬇️ 말은 «아래에서부터» 쌓인다   (2026-09-09, 대표 지시)

   대표 말: 「통합 면접 톡방의 채팅이 채팅 입력창 위로 와야 돼, 소통하려면」

   주고받은 말이 몇 마디뿐이면 그것들이 화면 «맨 위» 에 붙고 그 아래로 빈 자리가
   길게 남았다. 적는 줄과 마지막 말 사이가 손 한 뼘씩 떨어져, 방금 한 말과 지금
   적는 글이 한눈에 안 들어온다. 말이 많은 방에서는 안 보이던 일이라 여태 몰랐다.

   첫째 아이에게 margin-top: auto 를 준다 — 남는 자리를 위쪽이 다 먹고, 말은
   적는 줄 바로 위에 붙는다.
   ⚠️ justify-content: flex-end 를 쓰지 않는다. 말이 넘칠 때 «위쪽이 잘려»
      굴려도 첫 말에 못 닿는 브라우저가 있다. auto 여백은 남는 자리가 없으면
      스스로 0 이 되어 그런 일이 없다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .chat-body > :first-child { margin-top: auto; }
.ch2d-chat .bub {
    max-width: 100%; padding: 10px 14px; border-radius: 18px; font-size: 0.88rem;
    line-height: 1.55; white-space: pre-wrap;
    /* ⚠️ break-word 하나만 두면 한글 문장이 아무 데서나 잘려 읽기가 거칠다.
          낱말 단위로 넘기고, 그래도 안 되는 긴 주소만 강제로 자른다. */
    word-break: keep-all; overflow-wrap: anywhere;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════
   💬 한 줄의 짜임 — [시각·읽음] 과 [말풍선] 이 아래를 맞춰 나란히

   ⚠️ 말풍선 칸을 78% 로 잡아 두었더니, 짧은 말에도 칸은 그대로 넓어
      시각이 저 멀리 떨어져 붙었다. 특히 이모지 한 자만 보냈을 때
      '안 읽음 · 오후 07:38' 이 화면 반대편에 가 있어 무엇에 딸린 말인지 알 수 없었다.
      이제 칸은 글자만큼만 차지하고(max-content), 줄 전체의 너비만 82% 로 묶는다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .line-me,
.ch2d-chat .line-you {
    display: flex; align-items: flex-end; gap: 5px;
    max-width: 84%; min-width: 0;
    /* ⚠️ 세로 칸(chat-body) 안에서는 기본이 '가로로 늘리기' 라, 이걸 안 적으면
          줄이 화면 폭을 다 차지해 짧은 말에도 시각이 저 멀리 떨어져 붙는다. */
    align-self: flex-start;
}
.ch2d-chat .line-me  { align-self: flex-end; flex-direction: row-reverse; }

/* 🎨 내가 보낸 것은 청취담 레드, 받은 것은 청취담 그린.
   ⚠️ 예전에는 둘 다 초록 계열이라 누가 한 말인지 한눈에 안 갈렸다.
      글씨는 둘 다 흰색이어야 어느 쪽이든 또렷하게 읽힌다. */
.ch2d-chat .line-me .bub {
    background: var(--c-red); color: #FFFFFF; border-bottom-right-radius: 6px;
}
.ch2d-chat .line-you .bub {
    background: var(--c-green); color: #FFFFFF; border-bottom-left-radius: 6px;
}

/* 사진 말풍선 — 껍데기는 없애고 사진만 둥글게 */
.ch2d-chat .bub.pic {
    padding: 0; background: transparent !important; border: 0 !important;
    overflow: hidden; border-radius: 16px; max-width: 220px;
}
.ch2d-chat .bub.pic img {
    display: block; width: 100%; height: auto; border-radius: 16px; cursor: zoom-in; background: #E8EEEC;
}
/* 이모지만 보낸 것은 크게 — 껍데기 없이 그림처럼.
   ⚠️ line-height 를 넉넉히 두면 그 빈 자리만큼 옆의 시각이 아래로 밀려 내려간다.
      글자 크기에 딱 맞춰 두어야 시각이 이모지 옆에 나란히 선다. */
.ch2d-chat .bub.big {
    background: transparent !important; border: 0 !important; color: inherit !important;
    font-size: 2.1rem; line-height: 1; padding: 2px 2px 0;
}

.ch2d-chat .bubside {
    flex: 0 0 auto; display: flex; flex-direction: column;
    align-items: flex-end; gap: 0; padding-bottom: 3px;
}
.ch2d-chat .line-you .bubside { align-items: flex-start; }
.ch2d-chat .tm { font-size: 0.63rem; color: var(--c-dim2); font-weight: 600; white-space: nowrap; }
/* 읽음 표시 — 아직 안 본 사람 수.
   내가 한 말이든 남이 한 말이든 같은 자리, 같은 모양으로 둔다.
   숫자 하나로 — 「안 읽음」 이라는 글자보다 짧고, 옆의 시각과 결이 맞는다. */
.ch2d-chat .rd {
    font-size: 0.66rem; font-weight: 900; white-space: nowrap;
    line-height: 1; letter-spacing: 0;
}
.ch2d-chat .rd.yet { color: var(--c-red); }
.ch2d-chat .rd.done { color: #7FA79B; }

.ch2d-chat .day {
    align-self: center; font-size: 0.68rem; font-weight: 800; color: var(--c-dim2);
    background: #E8EEEC; padding: 4px 12px; border-radius: 999px; margin: 12px 0 8px;
}
.ch2d-chat .chat-empty {
    margin: auto; padding: 30px 10px; text-align: center; color: var(--c-dim2);
    font-size: 0.81rem; font-weight: 600; line-height: 1.7;
}
.ch2d-chat .chat-note {
    flex: 0 0 auto; text-align: center; font-size: 0.7rem; color: var(--c-dim2);
    padding: 0 15px 8px; font-weight: 600;
}

/* 이모티콘 판 */
.ch2d-chat .emo { display: none; background: #FFFFFF; border-top: 1px solid var(--c-line); padding: 10px 12px 4px; }
.ch2d-chat .emo.on { display: block; }
.ch2d-chat .emo .tabsE { display: flex; gap: 6px; margin-bottom: 8px; }
.ch2d-chat .emo .tabsE button {
    border: 0; background: #EDF3F1; color: #566763; border-radius: 999px;
    padding: 5px 12px; font-family: inherit; font-size: 0.72rem; font-weight: 800; cursor: pointer;
}
.ch2d-chat .emo .tabsE button.on { background: var(--c-green2); color: #FFFFFF; }
.ch2d-chat .emo .grid { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; max-height: 168px; overflow-y: auto; }
.ch2d-chat .emo .grid button {
    border: 0; background: transparent; font-size: 1.45rem; line-height: 1;
    padding: 7px 0; border-radius: 10px; cursor: pointer;
}
.ch2d-chat .emo .grid button:hover { background: #F2F6F5; }
@media (max-width: 380px) { .ch2d-chat .emo .grid { grid-template-columns: repeat(7, 1fr); } }

/* ⌨️ 「○○님이 입력 중…」 — 적는 칸 바로 위.
   ⚠️ 아무도 안 적을 때는 자리를 아예 안 차지해야 한다(hidden).
      빈 줄을 늘 띄워 두면 말풍선이 그만큼 위로 밀려 화면이 좁아진다.
   ⚠️ 자리를 차지하되 말풍선을 밀어내지 않게 flex: 0 0 auto 로 둔다. */
.ch2d-chat .typing {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: 7px 14px 6px; background: #FFFFFF;
    animation: ch2dTypeIn 0.18s ease;
}
.ch2d-chat .typing[hidden] { display: none !important; }
.ch2d-chat .typing .who {
    font-size: 0.71rem; font-weight: 700; color: var(--c-dim2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .typing .dots { display: inline-flex; align-items: flex-end; gap: 3px; height: 12px; }
.ch2d-chat .typing .dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--c-green2, #1A544B); opacity: 0.45;
    animation: ch2dTypeDot 1.1s infinite ease-in-out;
}
.ch2d-chat .typing .dots i:nth-child(2) { animation-delay: 0.16s; }
.ch2d-chat .typing .dots i:nth-child(3) { animation-delay: 0.32s; }
@keyframes ch2dTypeDot {
    0%, 60%, 100% { transform: translateY(0);    opacity: 0.35; }
    30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes ch2dTypeIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: none; }
}
/* 흔들리는 것이 불편한 분에게는 점만 밝아지게 */
@media (prefers-reduced-motion: reduce) {
    .ch2d-chat .typing .dots i { animation-name: ch2dTypeFade; }
    .ch2d-chat .typing { animation: none; }
    @keyframes ch2dTypeFade { 0%, 60%, 100% { opacity: 0.35; } 30% { opacity: 1; } }
}

/* 🗨 둘 사이 대화 — 상대 말풍선 자리에 그대로 뜬다.
   ⚠️ 시각·읽음 칸(.bubside)이 없다. 아직 「말」 이 아니라서 붙일 시각이 없다. */
.ch2d-chat .typing-line { animation: ch2dTypeIn 0.18s ease; }
.ch2d-chat .typing-bub {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 16px; min-width: 0;
}
/* ⚠️ 점이 안 보이던 까닭 — 크기를 정해 주는 규칙이 안 걸렸다.
      위쪽 규칙은 `.typing .dots i` 라서 조상에 .typing 이 있어야 한다.
      그런데 말풍선 쪽 뼈대는 `.line-you.typing-line > .bub.typing-bub > .dots`
      라 .typing 이 어디에도 없다. 그래서 <i> 가 폭·높이 없는 빈 글자로 남아
      배경색만 흰색으로 칠해진 채 0×0 이었다 — 눈에 보일 리가 없다.
      여기서 크기·모양·움직임을 처음부터 다시 적어 준다. */
.ch2d-chat .typing-bub .dots {
    display: inline-flex; align-items: flex-end; gap: 3px; height: 8px;
}
.ch2d-chat .typing-bub .dots i {
    width: 5px; height: 5px; border-radius: 50%;
    background: #FFFFFF; opacity: 0.6;
    animation: ch2dTypeDot 1.1s infinite ease-in-out;
}
.ch2d-chat .typing-bub .dots i:nth-child(2) { animation-delay: 0.16s; }
.ch2d-chat .typing-bub .dots i:nth-child(3) { animation-delay: 0.32s; }
@media (prefers-reduced-motion: reduce) {
    .ch2d-chat .typing-bub .dots i { animation-name: ch2dTypeFade; }
}

/* ══════════════════════════════════════════════════════════
   ✍️ 적는 줄 — 어떤 화면 폭에서도 «보내기 단추가 밖으로 밀려나지 않게»

   ⚠️ 밀려난 적이 있다 (2026-09-04, 대표 제보). 어떤 폰에서 보내기 단추가
      화면 오른쪽에 반 토막으로 걸렸다. 이 자리의 서식 자체로는 412 · 324px 에서
      다 들어가는 것을 재 보았으니, 기기마다 다른 «글자칸의 타고난 최소 폭» 이
      범인일 가능성이 크다.
      textarea 는 cols(기본 20자)만큼의 폭을 «최소» 로 요구한다(min-width:auto).
      글꼴이 커지는 손가락 화면(아래 pointer:coarse 규칙에서 16px)에서 그 최소가
      늘어나면, 줄이 화면보다 넓어지고 맨 끝의 보내기가 밖으로 나간다.

   그래서 세 겹으로 잠근다.
     ① 글자칸에 min-width:0 — 타고난 최소 폭을 포기하고 «남는 만큼만» 차지하게
     ② 줄에 overflow:hidden — 그래도 넘치면 밖으로 나가지 못하게
     ③ 아주 좁은 화면에서는 단추를 조금 줄인다(아래 별도 규칙)
   ⚠️ 줄어드는 것은 «글자칸» 이어야 한다. 보내기 단추가 줄면 누를 곳이 사라진다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .chat-foot {
    flex: 0 0 auto; background: #FFFFFF; border-top: 1px solid var(--c-line);
    padding: 10px 12px calc(env(safe-area-inset-bottom, 0px) + 10px);
    display: flex; gap: 7px; align-items: flex-end;
    width: 100%; max-width: 100%; min-width: 0;
    flex-wrap: nowrap; overflow: hidden; box-sizing: border-box;
}
/* 사진 · 이모티콘 단추 — 글자칸과 높이를 맞춰 줄이 흐트러지지 않게 */
.ch2d-chat .tool {
    flex: 0 0 auto; width: 40px; height: 42px; border: 0; border-radius: 14px;
    background: #EDF3F1; color: var(--c-green2); font-size: 0.95rem; cursor: pointer;
}
.ch2d-chat .tool:hover { background: #E1EBE8; }
.ch2d-chat .tool.on { background: var(--c-green2); color: #FFFFFF; }
.ch2d-chat .tool:disabled { opacity: 0.6; cursor: default; }
.ch2d-chat .chat-foot textarea {
    /* ⚠️ min-width:0 이 요점이다. flex:1 만으로는 textarea 가 «cols 만큼» 은
          내놓으라고 버텨, 좁은 화면에서 줄을 밀어 보내기 단추를 밖으로 내보낸다. */
    flex: 1 1 0; min-width: 0; width: 0;
    border: 1.5px solid var(--c-line); background: #FAFBFB; border-radius: 16px;
    padding: 11px 14px; font-family: inherit; font-size: 0.87rem; color: var(--c-ink);
    outline: none; resize: none; max-height: 108px; line-height: 1.5; font-weight: 500;
    box-sizing: border-box;
}
.ch2d-chat .chat-foot textarea:focus { border-color: var(--c-green2); background: #FFFFFF; }
.ch2d-chat .chat-foot .go {
    flex: 0 0 auto; width: 44px; height: 44px; border: 0; border-radius: 50%;
    background: var(--c-red); color: #FFFFFF; font-size: 0.95rem; cursor: pointer;
}
.ch2d-chat .chat-foot .go:disabled { background: #D5DEDB; cursor: default; }
/* 🤏 아주 좁은 화면 — 단추를 조금 줄여 글자칸이 숨 쉴 자리를 만든다.
      ⚠️ 줄이는 것은 «크기» 뿐이다. 무엇도 없애지 않는다 — 사진·이모티콘·보내기는
         셋 다 늘 쓰는 것이라, 좁다고 감추면 그 화면에서만 기능이 사라진 셈이 된다. */
@media (max-width: 350px) {
    .ch2d-chat .chat-foot { padding-left: 8px; padding-right: 8px; gap: 5px; }
    .ch2d-chat .tool { width: 34px; height: 38px; border-radius: 12px; font-size: 0.88rem; }
    .ch2d-chat .chat-foot .go { width: 38px; height: 38px; font-size: 0.88rem; }
    .ch2d-chat .chat-foot textarea { padding: 9px 11px; }
}

/* ══════════════════════════════════════════════════════════
   👥 옆 서랍 — 참여자 · 공지방 · 사진 모아보기 · 나가기

   ⚠️ 대화창(.ch2d-chat) 안에 넣었다. 밖에 두면 창을 키보드에 맞춰 옮길 때
      이 판만 제자리에 남아 따로 논다.
   ⚠️ 왼쪽에서 밀려 나온다. 여는 단추(머리말 왼쪽 얼굴)가 왼쪽에 있으니
      거기서 그대로 이어지는 결이라야 손이 따라가기 쉽다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .chat-face.tap { cursor: pointer; }
.ch2d-chat .chat-face.tap:hover { background: rgba(255,255,255,0.26); }
/* 👆 누를 때 폰이 씌우는 «파란 네모» 를 끈다 (2026-09-12, 대표 지적 「버튼 누르면 깜박거린다」).
      안드로이드 · 삼성 인터넷은 누른 단추 위에 푸른 반투명 네모를 번쩍 씌운다.
      초록 머리말 위에서는 그것이 청록 네모로 튀어, ☰ 를 누를 때마다 번쩍였다.
      스토리 · 모임 · 카메라 창은 이미 끄고 있었고, 대화창만 빠져 있었다.
   ⚠️ 눌렀다는 표시는 각 단추의 :active 가 대신 맡는다(☰ 는 옅은 흰 동그라미). */
.ch2d-chat, .ch2d-chat *, .ch2d-lens, .ch2d-lens * { -webkit-tap-highlight-color: transparent; }
.ch2d-chat .crew {
    position: absolute; inset: 0; z-index: 6;
    background: rgba(8, 18, 16, 0.5);
    display: none;
}
/* 어두운 막도 «탁» 하고 떨어지지 않게 — 서랍과 같은 박자로 스며든다.
   ⚠️ 막 전체(.crew)의 opacity 를 움직이지 않는다. 그러면 흰 서랍까지 함께 비친다 —
      지난번 깜박임의 까닭이 그것이었다. 막의 «빛깔» 만 움직인다. */
.ch2d-chat .crew.on { display: block; animation: crewDim 0.2s ease; }
@keyframes crewDim { from { background-color: rgba(8, 18, 16, 0); } to { background-color: rgba(8, 18, 16, 0.5); } }
.ch2d-chat .crew-sheet {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: min(340px, 86%); background: #FFFFFF;
    display: flex; flex-direction: column;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 10px 0 30px -12px rgba(8, 18, 16, 0.45);
    animation: crewIn 0.2s cubic-bezier(.2, .8, .2, 1);
}
/* ⚡ 투명도(opacity)로 떠오르게 하지 않는다 (2026-09-12, 대표 지적 「깜박거린다」).
      opacity 0 에서 시작하면 첫 순간엔 어두운 막만 번쩍 뜨고, 반쯤 비친 서랍 너머로
      대화 글자가 겹쳐 보였다(삼성 인터넷에서 특히). 흰 판 그대로 옆에서 밀려 들어온다. */
@keyframes crewIn { from { transform: translateX(-100%); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .ch2d-chat .crew-sheet, .ch2d-chat .crew.on { animation: none; } }
.ch2d-chat .crew-top {
    flex: 0 0 auto; display: flex; align-items: center; gap: 8px;
    padding: calc(env(safe-area-inset-top, 0px) + 16px) 14px 12px;
    border-bottom: 1px solid var(--c-line);
}
.ch2d-chat .crew-top b {
    flex: 1; min-width: 0; font-size: 0.95rem; font-weight: 800; color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .crew-top button {
    flex: 0 0 auto; border: 0; background: #F0F5F3; color: var(--c-dim2);
    width: 34px; height: 34px; border-radius: 50%; cursor: pointer; font-size: 0.9rem;
}
.ch2d-chat .crew-top button[hidden] { display: none; }
.ch2d-chat .crew-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 8px 12px; }
/* 📌 서랍 아래 붙박이 칸 — 명단이 아무리 길어도 여기는 늘 보인다
      (2026-09-08, 대표 지시). 사람이 늘수록 값어치가 커지는 자리다.
   ⚠️ crew-body 에 min-height:0 이 꼭 있어야 한다. 없으면 구르는 칸이 안 줄어들어
      이 칸이 화면 밖으로 밀려난다 — 붙박이로 둔 뜻이 사라진다. */
.ch2d-chat .crew-foot {
    flex: 0 0 auto; padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 8px);
    background: #FFFFFF; border-top: 1px solid var(--c-line, #E6EEEA);
    box-shadow: 0 -6px 14px -12px rgba(8, 18, 16, .5);
}
/* 붙박이 칸 안에서는 위 테두리를 한 번 더 긋지 않는다 — 줄이 두 겹으로 보인다 */
.ch2d-chat .crew-foot .crew-menu { margin-top: 0; padding-top: 0; border-top: 0; }
.ch2d-chat .crew-h {
    padding: 14px 10px 6px; font-size: 0.72rem; font-weight: 800;
    color: var(--c-dim2); letter-spacing: 0;
}

/* 갈래 단추들 */
/* ══════════════════════════════════════════════════════════════
   🧭 모임 가이드라인 — 이 자리가 어디까지 왔나

   여덟 단계를 세로로 세우고, 점을 선으로 이어 「과정」 으로 보이게 한다.
   ⚠️ 다 지난 단계는 옅게 두고, 지금 할 차례만 진하게 둔다.
      전부 진하면 어디를 봐야 할지 모른다 — 눈이 갈 곳은 하나여야 한다.
   ══════════════════════════════════════════════════════════════ */
.ch2d-chat .mg-wrap {
    margin: 4px 0 10px; padding: 12px 12px 8px;
    background: #F7FAF9; border: 1px solid var(--c-line, #E6EEEA); border-radius: 16px;
}
.ch2d-chat .mg-head {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.ch2d-chat .mg-t {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.83rem; font-weight: 900; color: var(--c-green, #17493E);
}
.ch2d-chat .mg-t i { font-size: 0.78rem; opacity: 0.7; }
.ch2d-chat .mg-n {
    font-size: 0.72rem; font-weight: 800; color: #8A9A95;
    background: #FFFFFF; border: 1px solid var(--c-line, #E6EEEA);
    border-radius: 999px; padding: 3px 9px; font-variant-numeric: tabular-nums;
}

.ch2d-chat .mg-list { list-style: none; margin: 0; padding: 0; }
.ch2d-chat .mg-step {
    position: relative; display: flex; align-items: flex-start; gap: 10px;
    padding: 7px 0 7px 0; min-height: 34px;
}
/* 점과 점을 잇는 선 — 마지막 단계에는 안 그린다 */
.ch2d-chat .mg-step::before {
    content: ''; position: absolute; left: 11px; top: 26px; bottom: -7px;
    width: 2px; background: #E2EAE7;
}
.ch2d-chat .mg-step:last-child::before { display: none; }
.ch2d-chat .mg-step.done::before { background: #BFD9CD; }

.ch2d-chat .mg-dot {
    position: relative; z-index: 1; flex: 0 0 auto;
    width: 24px; height: 24px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: #FFFFFF; border: 2px solid #DCE6E2;
    font-size: 0.68rem; font-weight: 900; color: #A9B8B3;
}
.ch2d-chat .mg-step.done .mg-dot {
    background: var(--c-green, #17493E); border-color: var(--c-green, #17493E); color: #FFFFFF;
}
.ch2d-chat .mg-step.now .mg-dot {
    background: var(--c-red, #C81F3B); border-color: var(--c-red, #C81F3B); color: #FFFFFF;
    box-shadow: 0 0 0 4px rgba(200, 31, 59, 0.12);
}

.ch2d-chat .mg-tx { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.ch2d-chat .mg-tx b {
    font-size: 0.82rem; font-weight: 800; color: #3A4D48; line-height: 1.35;
}
.ch2d-chat .mg-tx span {
    font-size: 0.71rem; font-weight: 500; color: #9AABA6; line-height: 1.4;
    word-break: keep-all;
}
.ch2d-chat .mg-step.done .mg-tx b { color: #8A9A95; }
.ch2d-chat .mg-step.now .mg-tx b { color: #111B18; font-weight: 900; }
.ch2d-chat .mg-step.soon { opacity: 0.5; }

/* 갈 곳이 있는 단계는 눌린다 */
.ch2d-chat .mg-step[data-mg] { cursor: pointer; border-radius: 10px; }
.ch2d-chat .mg-step[data-mg]:active { background: #EEF4F2; }
.ch2d-chat .mg-ar { flex: 0 0 auto; align-self: center; font-size: 0.7rem; color: #C3CFCB; }

/* 메뉴가 「함께 있는 사람」 아래로 내려왔다 — 그 사이에 금을 하나 둔다.
   붙여 두면 마지막 사람 다음에 단추가 그냥 이어져 한 덩어리로 읽힌다. */
.ch2d-chat .crew-menu {
    display: flex; flex-direction: column; gap: 2px;
    margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--c-line, #E6EEEA);
}
.ch2d-chat .crew-menu button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    padding: 12px 10px; border-radius: 12px;
    font-family: inherit; font-size: 0.88rem; font-weight: 700; color: var(--c-ink);
}
.ch2d-chat .crew-menu button:hover { background: #F2F7F5; }
.ch2d-chat .crew-menu button > i:first-child {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 10px;
    background: #EDF4F2; color: var(--c-green);
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.ch2d-chat .crew-menu button > span { flex: 1; min-width: 0; }
.ch2d-chat .crew-menu button .ar { flex: 0 0 auto; font-size: 0.72rem; color: #C3D2CE; }
.ch2d-chat .crew-menu button.kill { color: var(--c-red); }
.ch2d-chat .crew-menu button.kill > i:first-child { background: #FDECEE; color: var(--c-red); }

.ch2d-chat .crew-one {
    display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 14px;
}
.ch2d-chat .crew-one.out { opacity: 0.5; }
.ch2d-chat .crew-one .f {
    flex: 0 0 auto; width: 40px; height: 40px; border-radius: 50%; overflow: hidden;
    background: #EDF4F2; color: #9CB2AC;
    display: flex; align-items: center; justify-content: center; font-size: 0.85rem;
}
.ch2d-chat .crew-one .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch2d-chat .crew-one .t { min-width: 0; flex: 1; }
.ch2d-chat .crew-one .t b {
    display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
    font-size: 0.88rem; font-weight: 700; color: var(--c-ink);
}
.ch2d-chat .crew-one .t > span {
    display: block; margin-top: 2px; font-size: 0.74rem; font-weight: 600; color: var(--c-dim2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .crew-one em {
    font-style: normal; font-size: 0.66rem; font-weight: 800; padding: 2px 7px;
    border-radius: 999px; background: #EDF4F2; color: #5B726C;
}
.ch2d-chat .crew-one em.me { background: var(--c-red); color: #FFFFFF; }
.ch2d-chat .crew-one em.own { background: var(--c-green); color: #FFFFFF; }
.ch2d-chat .crew-one em.far { background: #FFF0E6; color: #B4692A; }
/* ➕ 아직 친구가 아닌 사람에게 바로 신청 걸기 */
.ch2d-chat .crew-one .addf {
    flex: 0 0 auto; border: 0; background: var(--c-red); color: #FFFFFF; cursor: pointer;
    border-radius: 999px; padding: 6px 11px; font-family: inherit;
    font-size: 0.72rem; font-weight: 800;
    display: inline-flex; align-items: center; gap: 5px;
}
.ch2d-chat .crew-one .addf:disabled { opacity: 0.5; cursor: default; }
.ch2d-chat .crew-one .kick {
    flex: 0 0 auto; border: 0; background: #F5EDEE; color: #A8535E; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%; padding: 0; font-size: 0.74rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.ch2d-chat .crew-one .kick:hover { background: var(--c-red); color: #FFFFFF; }
.ch2d-chat .crew-one .kick:disabled { opacity: 0.5; cursor: default; }
.ch2d-chat .crew-one .wait {
    flex: 0 0 auto; font-size: 0.7rem; font-weight: 800; color: var(--c-dim2);
    background: #F0F5F3; border-radius: 999px; padding: 6px 11px; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   🏛 운영진 국 단톡방 명단 — 국별로 묶은 줄 (2026-09-04, 대표 지시)

   ⚠️ 「아직 친구 아님」 을 «글로 적지 않는다». 스물다섯 줄에 그 말이 스무 번 붙으면
      명단이 그 말로 뒤덮인다. 카드를 흐리게 두고(.far) 오른쪽 단추 하나로 말한다 —
      상태는 «보이는 것» 으로, 할 일은 «누르는 것» 으로.
   ══════════════════════════════════════════════════════════ */
/* 국 이름 줄 */
.ch2d-chat .ops-sec {
    display: flex; align-items: center; gap: 7px;
    margin: 14px 2px 5px; font-size: 0.72rem; font-weight: 900; color: var(--c-ink);
}
.ch2d-chat .ops-sec:first-child { margin-top: 2px; }
.ch2d-chat .ops-sec .dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.ch2d-chat .ops-sec em {
    font-style: normal; font-size: 0.66rem; font-weight: 800; color: var(--c-dim2);
    background: #F0F5F3; border-radius: 999px; padding: 1px 7px;
}
/* 이름 · 인증마크 · 국기 · 직함이 «한 줄» 에 서게
   ⚠️ 이름 칸(b)은 기본이 display:flex(=블록)라 그 뒤의 딱지가 다음 줄로 떨어진다.
      운영진 줄에서만 inline-flex 로 바꿔 옆에 붙게 한다.
   ⚠️ 인증마크와 국기는 verified.js 가 이름 «안» 에 넣어 준다 — 여기서 또 만들지 않는다. */
.ch2d-chat .crew-one.ops-one .t b { display: inline-flex; vertical-align: middle; }
.ch2d-chat .crew-one.ops-one .t { display: block; }
/* 직함 딱지 — 이름 · 인증마크 · 국기 «뒤» 에 선다
   ⚠️ 안 끊기게(nowrap) 둔다. 그냥 두면 「중앙 기획부국장」 이 «중앙 기획부 / 장» 으로
      갈라져 직함이 반 토막 난다. 자리가 모자라면 딱지가 통째로 다음 줄로 내려간다. */
.ch2d-chat .crew-one em.ops-tag {
    background: #FDF3F5; color: var(--c-red);
    margin-left: 5px; vertical-align: middle; white-space: nowrap;
}
/* 아직 친구가 아닌 사람 — 카드를 흐리게. 단추는 흐려지지 않는다(눌러야 하니까) */
.ch2d-chat .crew-one.far { background: #FAFBFB; }
.ch2d-chat .crew-one.far .f,
.ch2d-chat .crew-one.far .t { opacity: 0.55; }

/* 🔍 옆 서랍 안에서 친구 찾기 */
.ch2d-chat .crew-find {
    display: flex; align-items: center; gap: 8px; margin: 4px 2px 10px;
    background: #F2F7F5; border: 1px solid var(--c-line); border-radius: 999px;
    padding: 0 14px;
}
.ch2d-chat .crew-find i { flex: 0 0 auto; color: #9CB2AC; font-size: 0.78rem; }
.ch2d-chat .crew-find input {
    flex: 1; min-width: 0; border: 0; background: transparent; outline: none; color: var(--c-ink);
    font-family: inherit; font-size: 0.85rem; font-weight: 500; padding: 10px 0;
}
.ch2d-chat .crew-find input::placeholder { color: #9CB2AC; }
.ch2d-chat .crew-go {
    display: block; width: calc(100% - 4px); margin: 12px 2px 4px;
    border: 0; border-radius: 14px; padding: 13px; cursor: pointer;
    background: var(--c-red); color: #FFFFFF;
    font-family: inherit; font-size: 0.88rem; font-weight: 800;
}
.ch2d-chat .crew-go:disabled { background: #E4EAE8; color: #A8B8B4; cursor: default; }

/* ══════════════════════════════════════════════════════════
   👥 부를 친구를 고르는 줄 — 메인 화면 친구 줄과 같은 결

   ⚠️ 부르기 단추를 목록 맨 아래에 두었더니, 친구가 많으면 한참 굴려 내려가야
      보였다. 고른 사람 줄과 같은 가로선에 두어 늘 눈에 있게 한다.
   ⚠️ 얼굴에 붙는 − 는 '뺀다' 는 뜻이다. 친구 줄의 ＋ 와 짝을 이룬다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .inv-line {
    display: flex; align-items: center; gap: 9px; margin: 0 2px 8px;
    padding-bottom: 8px; border-bottom: 1px solid var(--c-line);
}
.ch2d-chat .inv-rail {
    flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px;
    overflow-x: auto; scrollbar-width: none; padding: 2px 0 2px 2px; min-height: 62px;
}
.ch2d-chat .inv-rail::-webkit-scrollbar { display: none; }
.ch2d-chat .inv-hint { font-size: 0.76rem; font-weight: 600; color: var(--c-dim2); white-space: nowrap; }
.ch2d-chat .inv-chip { flex: 0 0 auto; width: 46px; text-align: center; }
.ch2d-chat .inv-chip .f {
    position: relative; width: 40px; height: 40px; margin: 0 auto; border-radius: 50%;
    background: #E8EEEC; border: 2px solid var(--c-green2); box-sizing: border-box;
    display: flex; align-items: center; justify-content: center;
    color: #9AACA7; font-size: 0.8rem;
}
.ch2d-chat .inv-chip .f img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.ch2d-chat .inv-chip .off {
    position: absolute; right: -3px; bottom: -3px; width: 18px; height: 18px;
    border-radius: 50%; border: 2px solid #FFFFFF; box-sizing: border-box;
    background: var(--c-red); color: #FFFFFF; cursor: pointer; padding: 0;
    font-size: 0.5rem; display: flex; align-items: center; justify-content: center;
}
.ch2d-chat .inv-chip .nm {
    display: block; margin-top: 4px; font-size: 0.63rem; font-weight: 700; color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .inv-go {
    flex: 0 0 auto; border: 0; border-radius: 12px; padding: 10px 13px; cursor: pointer;
    background: var(--c-red); color: #FFFFFF; white-space: nowrap;
    font-family: inherit; font-size: 0.78rem; font-weight: 800;
}
.ch2d-chat .inv-go:disabled { background: #E4EAE8; color: #A8B8B4; cursor: default; }

/* ══════════════════════════════════════════════════════════
   🗳 투표 · 🪜 사다리
   ⚠️ 막대는 글자 뒤에 깔린다. 글자 옆에 따로 두면 좁은 화면에서 이름이 잘린다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .vote {
    background: #F6FAF8; border: 1px solid var(--c-line); border-radius: 14px;
    padding: 12px 12px 10px; margin: 0 2px 9px;
}
.ch2d-chat .vote.done { opacity: 0.75; }
.ch2d-chat .vote .ti {
    display: flex; align-items: center; gap: 7px;
    font-size: 0.88rem; font-weight: 800; color: var(--c-ink); margin-bottom: 10px;
    word-break: keep-all;
}
.ch2d-chat .vote .ti i { color: var(--c-green); font-size: 0.82rem; flex: 0 0 auto; }
.ch2d-chat .vote .ti em {
    font-style: normal; margin-left: auto; flex: 0 0 auto;
    font-size: 0.64rem; font-weight: 800; color: var(--c-dim2);
    background: #E8EEEC; border-radius: 999px; padding: 2px 8px;
}
.ch2d-chat .vote .opt {
    position: relative; display: flex; align-items: center; gap: 8px; width: 100%;
    border: 1px solid var(--c-line); background: #FFFFFF; border-radius: 10px;
    padding: 10px 12px; margin-bottom: 6px; cursor: pointer; overflow: hidden;
    font-family: inherit; text-align: left;
}
.ch2d-chat .vote .opt .bar {
    position: absolute; left: 0; top: 0; bottom: 0; background: #E3F0EB;
    transition: width 0.25s ease;
}
.ch2d-chat .vote .opt .tx {
    position: relative; flex: 1; min-width: 0; font-size: 0.85rem; font-weight: 600; color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .vote .opt .n {
    position: relative; flex: 0 0 auto; font-size: 0.76rem; font-weight: 800; color: var(--c-dim2);
}
.ch2d-chat .vote .opt.on { border-color: var(--c-red); }
.ch2d-chat .vote .opt.on .bar { background: #FBE2E5; }
.ch2d-chat .vote .opt.on .n { color: var(--c-red); }
.ch2d-chat .vote .opt.win .tx { font-weight: 800; }
.ch2d-chat .vote .opt:disabled { cursor: default; }
.ch2d-chat .vote .by {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.7rem; font-weight: 700; color: var(--c-dim2); margin-top: 8px;
}
.ch2d-chat .vote .by .fin {
    margin-left: auto; border: 0; background: #EDF4F2; color: var(--c-green);
    border-radius: 999px; padding: 5px 11px; cursor: pointer;
    font-family: inherit; font-size: 0.68rem; font-weight: 800;
}
/* ══════════════════════════════════════════════════════════
   🗳 아랫줄이 두 줄로 접히던 것  (2026-09-04, 대표 지시)

   무엇이 문제였나 — 「송영훈 · 6명 참여」 · 「투표 현황」 · 「지금 끝내기」 · 🗑
   넷이 300px(폰에서 252px) 카드에 다 들어가지 못해, 단추 «글자» 가 두 줄로 접혔다.
   단추가 두 줄이 되면 카드 전체가 어긋나 보인다.

   어떻게 고쳤나 — 세 가지를 함께 걸었다. 하나만으로는 모자랐다.
     ① 단추 글자를 줄였다 (「투표 현황」→「현황」, 「지금 끝내기」→「끝내기」)
     ② 단추는 «절대 안 접힌다» (nowrap) — 자리가 없으면 접는 대신 이름을 줄인다
     ③ 이름은 «줄어든다» (…) — 길어도 단추를 아랫줄로 밀어내지 않는다
   ⚠️ 줄여야 할 것은 «이름» 이지 단추가 아니다. 이름은 못 읽어도 짐작이 되지만,
      「끝내」 처럼 잘린 단추는 무엇을 하는 것인지 알 수가 없다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .vote .by { flex-wrap: nowrap; min-width: 0; }
.ch2d-chat .vote .by .bynm {
    flex: 1 1 auto; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠️ margin-left:auto 를 «끈다». 단추가 둘이 되면 둘 다 auto 라 남는 자리를
      반씩 나눠 가져, 「현황」 과 「끝내기」 사이가 벌어진다.
      오른쪽으로 미는 일은 이제 이름(.bynm)의 flex-grow 가 맡는다. */
.ch2d-chat .vote .by .fin { flex: 0 0 auto; white-space: nowrap; margin-left: 0; }
.ch2d-chat .vote .by .del { flex: 0 0 auto; }
/* 🪜 사다리는 가운데로 모으는 줄이라 이름을 늘리지 않는다 */
.ch2d-chat .vote.lad .by .bynm { flex: 0 1 auto; }
/* 🪜 사다리 — 뽑힌 이름 하나가 주인공이다 */
.ch2d-chat .vote.lad { text-align: center; }
.ch2d-chat .vote.lad .ti { justify-content: center; }
.ch2d-chat .vote.lad .won {
    font-size: 1.3rem; font-weight: 900; color: var(--c-red);
    padding: 8px 0 4px; word-break: keep-all;
}
.ch2d-chat .vote.lad .by { justify-content: center; }

.ch2d-chat .vopt-among {
    display: flex; align-items: center; gap: 8px; margin: 0 4px 10px;
    font-size: 0.8rem; font-weight: 700; color: var(--c-dim);
}
.ch2d-chat .vopt-among input { width: 16px; height: 16px; accent-color: var(--c-red); }
.ch2d-chat .crew-find.vopt { margin-bottom: 6px; }
.ch2d-chat .vadd {
    display: block; width: calc(100% - 4px); margin: 2px 2px 0;
    border: 1px dashed var(--c-line); background: transparent; color: var(--c-dim2);
    border-radius: 12px; padding: 10px; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; font-weight: 800;
}
.ch2d-chat .vadd[hidden] { display: none; }

/* 🗳 잔손질 칸 — 익명 · 여럿 고르기 · 날짜로 고르기 · 마감 */
.ch2d-chat .vset { margin: 0 4px 10px; }
.ch2d-chat .vset label {
    display: flex; align-items: center; gap: 8px; padding: 5px 0;
    font-size: 0.8rem; font-weight: 700; color: var(--c-dim); cursor: pointer;
}
.ch2d-chat .vset input { width: 16px; height: 16px; accent-color: var(--c-red); }
.ch2d-chat .vend {
    display: flex; align-items: center; gap: 9px; margin: 0 4px 10px;
    font-size: 0.8rem; font-weight: 800; color: var(--c-dim);
}
.ch2d-chat .vend input {
    flex: 1; min-width: 0; border: 1px solid var(--c-line); background: #F2F7F5;
    border-radius: 12px; padding: 9px 12px; outline: none; color: var(--c-ink);
    font-family: inherit; font-size: 0.82rem; font-weight: 600;
}
.ch2d-chat .vcal {
    display: block; width: calc(100% - 8px); margin: 0 4px 6px;
    border: 1px solid var(--c-line); background: #F2F7F5; border-radius: 12px;
    padding: 11px 12px; outline: none; color: var(--c-ink);
    font-family: inherit; font-size: 0.85rem; font-weight: 600;
}
.ch2d-chat .vhint { margin: 0 4px 8px; font-size: 0.72rem; font-weight: 600; color: var(--c-dim2); }
.ch2d-chat .vpicks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 8px; }
.ch2d-chat .vchip {
    display: inline-flex; align-items: center; gap: 5px;
    background: #EDF4F2; color: var(--c-green); border-radius: 999px; padding: 6px 8px 6px 12px;
    font-size: 0.76rem; font-weight: 800;
}
.ch2d-chat .vchip button {
    border: 0; background: rgba(18,60,54,0.12); color: var(--c-green); cursor: pointer;
    width: 18px; height: 18px; border-radius: 50%; padding: 0; font-size: 0.56rem;
    display: inline-flex; align-items: center; justify-content: center;
}

/* 🪜 참여자 고르기 · 당첨 인원 */
.ch2d-chat .lad-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 4px 6px; }
.ch2d-chat .lad-one {
    display: inline-flex; align-items: center; gap: 7px;
    border: 1px solid var(--c-line); background: #FFFFFF; color: var(--c-dim2);
    border-radius: 999px; padding: 8px 12px; cursor: pointer;
    font-family: inherit; font-size: 0.79rem; font-weight: 700;
}
.ch2d-chat .lad-one i { font-size: 0.6rem; }
.ch2d-chat .lad-one.on { background: #FFF3F4; border-color: rgba(200,36,51,0.32); color: var(--c-red); }
.ch2d-chat .lad-n { display: flex; align-items: center; gap: 10px; margin: 0 4px 4px; }
.ch2d-chat .lad-n button {
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: #EDF4F2; color: var(--c-green); cursor: pointer; font-size: 0.76rem;
}
.ch2d-chat .lad-n b { font-size: 0.95rem; font-weight: 900; color: var(--c-ink); min-width: 44px; }
.ch2d-chat .lad-n .vhint { margin: 0; }

/* 🗳 대화 안에 뜨는 투표 카드 — 말풍선보다 넓게 */
.ch2d-chat .line-me.wide, .ch2d-chat .line-you.wide { max-width: 94%; }
.ch2d-chat .pollcard { width: min(300px, 78vw); }
.ch2d-chat .pollcard .vote { margin: 0; background: #FFFFFF; }
.ch2d-chat .vote .ti em.t { background: #FBE2E5; color: var(--c-red); }
.ch2d-chat .vote.lad .past {
    display: flex; flex-direction: column; gap: 3px; margin: 4px 0 2px;
    font-size: 0.72rem; font-weight: 600; color: var(--c-dim2);
}
.ch2d-chat .vote.lad .again {
    margin-top: 9px; border: 0; background: #EDF4F2; color: var(--c-green);
    border-radius: 999px; padding: 8px 14px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px;
    font-family: inherit; font-size: 0.76rem; font-weight: 800;
}
.ch2d-chat .vote.lad .again:disabled { opacity: 0.5; cursor: default; }
/* 🗑 내가 만든 것만 지울 수 있다 */
.ch2d-chat .vote .del {
    margin-left: auto; border: 0; background: transparent; color: #C3D2CE;
    cursor: pointer; font-size: 0.74rem; padding: 4px 6px; border-radius: 8px;
}
.ch2d-chat .vote .del:hover { background: #FBE2E5; color: var(--c-red); }
.ch2d-chat .vote .fin + .del { margin-left: 4px; }
.ch2d-chat .vote.lad .by { justify-content: center; gap: 6px; }
.ch2d-chat .vote.lad .del { margin-left: 0; }

/* ══════════════════════════════════════════════════════════
   🚪 나간 사람 · 🆔 겹치는 이름의 고유코드
   ⚠️ 나간 사람은 지우지 않고 접어 둔다 — 옛 쪽지에 그 사람 말이 남아 있다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .gone-go {
    display: flex; align-items: center; gap: 9px; width: calc(100% - 4px);
    margin: 10px 2px 4px; border: 1px dashed var(--c-line); background: transparent;
    border-radius: 12px; padding: 11px 12px; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; font-weight: 800; color: var(--c-dim2);
}
.ch2d-chat .gone-go:hover { background: #F6FAF8; }
.ch2d-chat .gone-go .ar { margin-left: auto; font-size: 0.7rem; transition: transform 0.15s ease; }
.ch2d-chat .gone-go.open .ar { transform: rotate(180deg); }
.ch2d-chat .gone-box[hidden] { display: none; }

.ch2d-chat .crew-none {
    padding: 26px 12px; text-align: center; font-size: 0.85rem;
    font-weight: 600; color: var(--c-dim2);
}

/* 📌 공지방 안의 한 줄 — 지금 걸린 것은 테두리로 티를 낸다 */
.ch2d-chat .pin-one {
    background: #F6FAF8; border: 1px solid var(--c-line); border-radius: 14px;
    padding: 12px 13px; margin: 0 2px 8px;
}
.ch2d-chat .pin-one.live { background: #FFF6F7; border-color: rgba(200,36,51,0.28); }
.ch2d-chat .pin-one .tx {
    font-size: 0.86rem; font-weight: 600; color: var(--c-ink);
    line-height: 1.55; word-break: break-word; white-space: pre-wrap;
}
.ch2d-chat .pin-one .by { margin-top: 6px; font-size: 0.7rem; font-weight: 700; color: var(--c-dim2); }
.ch2d-chat .pin-one .down {
    margin-top: 9px; border: 0; background: #FDECEE; color: var(--c-red);
    border-radius: 999px; padding: 6px 12px; cursor: pointer;
    font-family: inherit; font-size: 0.74rem; font-weight: 800;
}
.ch2d-chat .pin-one .down:disabled { opacity: 0.5; cursor: default; }

/* 🖼 사진 모아보기 — 정사각으로 나란히 */
.ch2d-chat .pic-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 4px 2px;
}
.ch2d-chat .pic-one {
    position: relative; border: 0; padding: 0; cursor: pointer; overflow: hidden;
    border-radius: 10px; aspect-ratio: 1 / 1; background: #EDF4F2;
}
.ch2d-chat .pic-one img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch2d-chat .pic-one span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 5px 4px;
    background: linear-gradient(0deg, rgba(8,18,16,0.7), transparent);
    color: #FFFFFF; font-size: 0.6rem; font-weight: 700;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════
   📌 위에 상시로 떠 있는 공지 한 줄
   ⚠️ 머리말 바로 아래에 얹힌다. 대화가 굴러도 늘 그 자리에 있어야
      '공지' 라는 말이 뜻을 갖는다.
   ══════════════════════════════════════════════════════════ */
/* ⚠️ 빛깔은 청취담 레드. 노란 띠는 '주의' 로 읽혀 대화창의 결과 따로 놀았다.
      글씨와 그림은 흰색이라야 레드 위에서 또렷하다. */
.ch2d-chat .pin {
    position: absolute; left: 0; right: 0; z-index: 4;
    top: calc(env(safe-area-inset-top, 0px) + 64px);
    display: flex; align-items: center; gap: 9px; cursor: pointer;
    padding: 9px 14px; background: var(--c-red); color: #FFFFFF;
    /* ⚠️ 내가 보낸 말풍선도 청취담 레드다. 그림자가 없으면 공지 띠와 말풍선이
          같은 판처럼 붙어 보인다. 짙은 그림자로 띠를 한 겹 띄워 갈라 놓는다. */
    box-shadow: 0 6px 18px -4px rgba(8, 18, 16, 0.38), 0 2px 0 rgba(255, 255, 255, 0.14) inset;
    border-bottom: 1px solid rgba(8, 18, 16, 0.18);
}
.ch2d-chat .pin[hidden] { display: none; }
.ch2d-chat .pin > i:first-child { flex: 0 0 auto; color: #FFFFFF; font-size: 0.8rem; opacity: 0.9; }
/* 📷 사진 공지 — 작게 붙여 두고, 누르면 크게 */
.ch2d-chat .pin .shot {
    flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; object-fit: cover;
    background: rgba(255,255,255,0.2); cursor: zoom-in; display: block;
}
.ch2d-chat .pin .tx {
    flex: 1; min-width: 0; font-size: 0.8rem; font-weight: 700; color: #FFFFFF;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .pin .n {
    flex: 0 0 auto; font-style: normal; font-size: 0.68rem; font-weight: 800;
    background: rgba(255,255,255,0.22); color: #FFFFFF;
    border-radius: 999px; padding: 2px 8px;
}
.ch2d-chat .pin .ar { flex: 0 0 auto; font-size: 0.7rem; color: rgba(255,255,255,0.75); }

/* 📷 공지방 안의 사진 · 고치기 단추 */
.ch2d-chat .pin-one { cursor: pointer; }
.ch2d-chat .pin-one .shot {
    display: block; width: 100%; max-height: 220px; object-fit: cover;
    border-radius: 10px; margin-bottom: 9px; background: #EDF4F2; cursor: zoom-in;
}
.ch2d-chat .pin-one .by { display: flex; align-items: center; gap: 8px; }
.ch2d-chat .pin-one .by em {
    font-style: normal; margin-left: auto; display: inline-flex; align-items: center; gap: 4px;
    background: #EDF4F2; color: var(--c-green); border-radius: 999px; padding: 3px 9px;
    font-size: 0.68rem; font-weight: 800; cursor: pointer;
}
.ch2d-chat .pin-one .goto {
    display: inline-flex; align-items: center; gap: 6px; margin: 2px 0 8px;
    border: 0; background: var(--c-green); color: #FFFFFF; border-radius: 999px;
    padding: 7px 13px; cursor: pointer;
    font-family: inherit; font-size: 0.74rem; font-weight: 800;
}
.ch2d-chat .pin-one .acts { display: flex; gap: 6px; margin-top: 9px; }
.ch2d-chat .pin-one .edit {
    border: 0; background: #EDF4F2; color: var(--c-green); border-radius: 999px;
    padding: 6px 12px; cursor: pointer; font-family: inherit; font-size: 0.74rem; font-weight: 800;
}

/* 💬 공지에 달린 한마디 */
.ch2d-chat .ntalk {
    display: flex; align-items: flex-start; gap: 10px; padding: 9px 10px;
}
.ch2d-chat .ntalk .f {
    flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
    background: #EDF4F2; color: #9CB2AC;
    display: flex; align-items: center; justify-content: center; font-size: 0.7rem;
}
.ch2d-chat .ntalk .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch2d-chat .ntalk .t { flex: 1; min-width: 0; }
.ch2d-chat .ntalk .t b { font-size: 0.76rem; font-weight: 800; color: var(--c-dim); }
.ch2d-chat .ntalk .t b em {
    font-style: normal; font-weight: 600; color: var(--c-dim2); margin-left: 6px; font-size: 0.7rem;
}
.ch2d-chat .ntalk .t > span {
    display: block; margin-top: 3px; font-size: 0.86rem; font-weight: 500;
    color: var(--c-ink); line-height: 1.6; word-break: break-word;
}
.ch2d-chat .ntalk .rm {
    flex: 0 0 auto; border: 0; background: transparent; color: #C3D2CE;
    cursor: pointer; font-size: 0.78rem; padding: 2px 4px;
}
.ch2d-chat .crew-find.say { margin-top: 12px; padding-right: 4px; }
.ch2d-chat .crew-find.say button {
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 50%;
    background: var(--c-red); color: #FFFFFF; cursor: pointer; font-size: 0.78rem;
}

/* ══════════════════════════════════════════════════════════
   ⋯ 쪽지를 꾹 누르면 나오는 판
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .act {
    position: absolute; inset: 0; z-index: 7;
    background: rgba(8, 18, 16, 0.5);
    display: none; align-items: flex-end;
}
.ch2d-chat .act.on { display: flex; }
.ch2d-chat .act-sheet {
    width: 100%; max-height: 78%; overflow-y: auto; background: #FFFFFF;
    border-radius: 20px 20px 0 0; padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 10px);
    box-shadow: 0 -10px 30px -12px rgba(8, 18, 16, 0.4);
    animation: actUp 0.18s ease;
}
@keyframes actUp { from { transform: translateY(18px); opacity: 0; } to { transform: none; opacity: 1; } }
.ch2d-chat .act-peek {
    padding: 14px 12px 10px; font-size: 0.8rem; font-weight: 700; color: var(--c-dim2);
    border-bottom: 1px solid var(--c-line); margin-bottom: 6px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .act-sheet > button {
    display: flex; align-items: center; gap: 11px; width: 100%;
    border: 0; background: transparent; cursor: pointer; text-align: left;
    padding: 14px 12px; border-radius: 12px;
    font-family: inherit; font-size: 0.9rem; font-weight: 700; color: var(--c-ink);
}
.ch2d-chat .act-sheet > button:hover { background: #F2F7F5; }
.ch2d-chat .act-sheet > button i { width: 20px; text-align: center; color: var(--c-green); }
.ch2d-chat .act-sheet > button.kill { color: var(--c-red); }
.ch2d-chat .act-sheet > button.kill i { color: var(--c-red); }
.ch2d-chat .act-sheet > button.cancel {
    justify-content: center; background: #F2F7F5; color: var(--c-dim2); margin-top: 6px;
}
.ch2d-chat .act-sheet > button.send {
    justify-content: center; background: var(--c-red); color: #FFFFFF; margin-top: 8px;
}
.ch2d-chat .act-sheet > button.send:disabled { background: #E4EAE8; color: #A8B8B4; cursor: default; }

/* 📤 어디로 보낼까 — 여러 곳을 한꺼번에 고른다 */
.ch2d-chat .share-list { max-height: 46vh; overflow-y: auto; padding: 2px; }
.ch2d-chat .share-one {
    display: flex; align-items: center; gap: 11px; width: 100%;
    border: 1px solid transparent; background: transparent; cursor: pointer; text-align: left;
    padding: 9px 10px; border-radius: 14px; font-family: inherit;
}
.ch2d-chat .share-one:hover { background: #F2F7F5; }
.ch2d-chat .share-one.on { background: #FFF3F4; border-color: rgba(200,36,51,0.3); }
.ch2d-chat .share-one .f {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
    background: #EDF4F2; color: #9CB2AC;
    display: flex; align-items: center; justify-content: center; font-size: 0.82rem;
}
.ch2d-chat .share-one .f img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch2d-chat .share-one .t { flex: 1; min-width: 0; }
.ch2d-chat .share-one .t b {
    display: block; font-size: 0.87rem; font-weight: 700; color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ch2d-chat .share-one .t span { font-size: 0.72rem; font-weight: 600; color: var(--c-dim2); }
.ch2d-chat .share-one > i {
    flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%;
    border: 1.5px solid #D5DEDB; color: transparent; font-size: 0.62rem;
    display: flex; align-items: center; justify-content: center;
}
.ch2d-chat .share-one.on > i { background: var(--c-red); border-color: var(--c-red); color: #FFFFFF; }

/* 사진 크게 보기 */
/* ⚠️ 사진이 단추와 겹쳤다. 판 전체에 20px 만 두었더니 위의 닫기·아래의 저장이
      사진 위에 얹혀, 사진의 위아래 끝이 단추에 가렸다.
      단추가 서는 만큼(40px 높이 + 위아래 여백)을 미리 비워 둔다 — 사진은 그 안에서만 큰다.
   ⚠️ 폰의 노치와 홈 막대도 함께 헤아린다(safe-area). 그러지 않으면 단추가 그 위에 걸린다. */
.ch2d-lens {
    position: fixed; inset: 0; background: rgba(8, 18, 16, 0.94); z-index: 2147483603;
    display: none; align-items: center; justify-content: center;
    padding: calc(env(safe-area-inset-top, 0px) + 66px) 20px
             calc(env(safe-area-inset-bottom, 0px) + 66px);
}
.ch2d-lens.on { display: flex; }
.ch2d-lens img { max-width: 100%; max-height: 100%; border-radius: 12px; }
/* 💾 저장 단추 — 닫기 맞은편. 글자를 함께 두어 무슨 단추인지 바로 읽히게 한다.
   ⚠️ 그림만 있는 동그란 단추로 두었더니 「내려받기」 인지 「올리기」 인지 헷갈렸다. */
/* 💾 저장은 오른쪽 아래 — 엄지가 가장 편히 닿는 자리다.
   ⚠️ 닫기(오른쪽 위)와 세로로는 멀찍이 떨어져 있어 잘못 눌릴 일이 없다. */
.ch2d-lens .dl {
    position: absolute; bottom: calc(env(safe-area-inset-bottom, 0px) + 14px); right: 16px;
    border: 0; background: rgba(255,255,255,0.14); color: #FFFFFF;
    height: 40px; padding: 0 15px; border-radius: 999px; cursor: pointer;
    display: inline-flex; align-items: center; gap: 7px;
    font-family: inherit; font-size: 0.83rem; font-weight: 800;
}
.ch2d-lens .dl:active { background: rgba(255,255,255,0.26); }

.ch2d-lens .x {
    position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 16px;
    border: 0; background: rgba(255,255,255,0.14); color: #FFFFFF;
    width: 40px; height: 40px; border-radius: 50%; font-size: 1rem; cursor: pointer;
}

/* ⚠️ 아래에 두었더니 공유창·꾹 누르기 판이 올라와 있을 때 그 뒤로 깔려 안 보였다.
      알림은 무엇이 떠 있든 보여야 뜻이 있다. 맨 위로 올리고 z 값도 가장 높게 둔다. */
.ch2d-chat-toast {
    position: fixed; left: 50%; top: calc(env(safe-area-inset-top, 0px) + 16px);
    transform: translateX(-50%) translateY(-14px);
    background: #142421; color: #FFFFFF; padding: 11px 18px; border-radius: 999px;
    font-size: 0.82rem; font-weight: 700; opacity: 0; pointer-events: none;
    transition: 0.22s; z-index: 2147483647;
    max-width: calc(100% - 32px); text-align: center; word-break: keep-all;
    box-shadow: 0 10px 26px -10px rgba(8, 18, 16, 0.6);
    font-family: 'Pretendard', -apple-system, sans-serif;
}
.ch2d-chat-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ══════════════════════════════════════════════════════════
   🔗 스토리 미리보기 — 무엇을 보고 한 말인지 말풍선 위에 붙는다

   ⚠️ 그림만 두면 무엇인지 알 수 없다. '스토리 보러 가기' 를 함께 적는다.
   ⚠️ 스토리는 하루 뒤 사라진다. 그때는 흐리게 두고 눌리지 않게 한다 —
      눌렀는데 빈 화면이 뜨면 고장으로 보인다.
   ══════════════════════════════════════════════════════════ */
/* 미리보기 + 말풍선을 위아래로 담는 칸.
   ⚠️ width: max-content 를 줬더니 담긴 글이 길 때 칸이 줄보다 넓어져,
      말풍선이 화면 오른쪽 밖으로 밀려 나가고 시각만 덩그러니 남았다.
      칸은 그냥 담긴 만큼만 차지하면 된다 — flex 칸의 기본이 이미 그렇다. 못 박지 않는다. */
.ch2d-chat .bubwrap {
    display: flex; flex-direction: column; align-items: flex-start;
    min-width: 0; max-width: 100%;
}
.ch2d-chat .line-me .bubwrap { align-items: flex-end; }

.storypeek {
    display: inline-flex; align-items: center; gap: 9px; margin-bottom: 5px;
    border: 1px solid var(--line, #E3EDEA); background: #FFFFFF; border-radius: 14px;
    padding: 6px 12px 6px 6px; cursor: pointer; font-family: inherit;
    box-shadow: 0 2px 8px -4px rgba(16, 34, 30, 0.28);
}
.storypeek img {
    width: 38px; height: 50px; border-radius: 9px; object-fit: cover;
    background: #EDF4F2; display: block; flex: 0 0 auto;
}
.storypeek span {
    display: flex; flex-direction: column; gap: 1px; text-align: left; white-space: nowrap;
    font-size: 0.7rem; font-weight: 600; color: #8CA39D;
}
.storypeek span b { font-size: 0.78rem; font-weight: 800; color: #123C36; }
.storypeek:hover { background: #F7FAF9; }
/* 사라진 스토리 */
.storypeek.gone { opacity: 0.55; cursor: default; box-shadow: none; }
.storypeek.gone img { display: none; }
.storypeek.gone { padding: 8px 13px; }

/* 🕰 기한이 지나 내려간 사진 — 쪽지는 남고 사진만 사라진다 */
.ch2d-chat .bub.gone {
    background: rgba(255,255,255,0.14) !important; color: inherit;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.8rem; font-weight: 600; opacity: 0.86;
}
.ch2d-chat .line-you .bub.gone { background: rgba(18,60,54,0.1) !important; color: var(--c-dim2); }
.ch2d-chat .bub.gone i { font-size: 0.9rem; opacity: 0.7; }

/* ══════════════════════════════════════════════════════════
   🗑 거둔 쪽지

   ⚠️ 거둔 쪽지는 자리를 남긴다. 소리 없이 사라지면 남은 대화의 앞뒤가 안 맞아
      상대는 자기가 잘못 읽은 줄 안다. 빛깔만 빼고 한 줄로 바꿔 둔다.
   ⚠️ 지우는 길은 꾹 누르면 나오는 판(.act)에 있다 —
      말풍선마다 ✕ 를 붙여 두면 대화가 어수선해진다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .bub.wiped {
    background: transparent !important; border: 1px dashed rgba(18,60,54,0.28) !important;
    color: var(--c-dim2) !important;
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 0.78rem; font-weight: 600;
}
.ch2d-chat .bub.wiped i { font-size: 0.78rem; opacity: 0.6; }

/* 꾹 누를 수 있는 줄 — 글자가 선택되면 판 대신 글자 복사가 뜬다 */
.ch2d-chat [data-mid] { -webkit-user-select: none; user-select: none;
                        -webkit-touch-callout: none; }

/* 🛡 바깥 화면의 서식이 새어 들어오지 못하게 못 박는다.
   ⚠️ 채팅메뉴·친구메뉴 화면은 저마다 .wrap(본문 칸) 같은 흔한 이름을 쓴다.
      대화창 속 이름이 그것과 겹치면 쪽지 한 줄마다 그 화면의 여백이 얹혀 버린다.
      이름은 이미 우리 것으로 바꿨지만, 여백만은 여기서 한 번 더 0 으로 눌러 둔다. */
.ch2d-chat .bubwrap, .ch2d-chat .bubside {
    margin: 0; box-sizing: border-box;
}
.ch2d-chat .bubwrap { padding: 0; }

/* 👥 단톡방에서 누가 한 말인지 — 말풍선 위에 작게.
   잇달아 말했으면 한 번만 뜬다(화면 쪽에서 가른다). */
.ch2d-chat .bubwho {
    display: inline-flex; align-items: center; gap: 5px; margin: 0 0 4px 2px;
    font-size: 0.7rem; font-weight: 800; color: var(--c-dim2);
}
.ch2d-chat .bubwho img {
    width: 18px; height: 18px; border-radius: 50%; object-fit: cover; display: block;
}
.ch2d-chat .bubwho i { font-size: 0.62rem; opacity: 0.7; }
/* 🎖 운영진 방 — 이름 뒤의 직함 딱지  (2026-09-04, 대표 지시)
   ⚠️ 이름보다 «작고 옅게». 같은 크기로 두면 직함이 이름을 이겨,
      누가 한 말인지가 아니라 무슨 자리인지가 먼저 읽힌다. */
.ch2d-chat .bubwho em.rk {
    font-style: normal; font-size: 0.62rem; font-weight: 800;
    padding: 1px 6px; border-radius: 999px; white-space: nowrap;
    background: rgba(200, 36, 51, 0.10); color: var(--c-red, #C82433);
}

/* ⚠️ 적는 칸은 한 줄로 시작해 글을 따라 자란다(화면이 높이를 잰다).
      그런데 브라우저가 늘 굴림막대 자리를 잡아 두어, 한 줄만 적어도
      오른쪽에 정체 모를 작은 막대가 떠 있었다. 다 자랐을 때만 굴리게 둔다. */
.ch2d-chat .chat-foot textarea { overflow-y: auto; scrollbar-width: none; }
.ch2d-chat .chat-foot textarea::-webkit-scrollbar { width: 0; height: 0; }


/* ══════════════════════════════════════════════════════════
   📅 알려 준 모임 카드 — 눌러서 바로 그 자리로

   ⚠️ 「친구모임」 넉 자만 보내면 무슨 자리인지 알 수 없어 아무도 안 눌러 본다.
      며칠 남았는지 · 무슨 자리인지 · 언제 만나는지를 카드에 담는다.
   ⚠️ 말풍선 위에 얹히므로 폭을 못 박지 않는다 — 줄 너비(84%)를 넘지 않게 둔다.
   ══════════════════════════════════════════════════════════ */
.meetpeek {
    display: flex; align-items: center; gap: 11px; margin-bottom: 5px; max-width: 100%;
    border: 1px solid var(--line, #E3EDEA); background: #FFFFFF; border-radius: 15px;
    padding: 9px 14px 9px 9px; cursor: pointer; font-family: inherit; text-align: left;
    box-shadow: 0 2px 10px -5px rgba(16, 34, 30, 0.3);
}
.meetpeek:hover { background: #F7FAF9; }
.meetpeek .ic {
    width: 46px; height: 46px; border-radius: 13px; flex: 0 0 auto;
    background: var(--c-green, #123C36); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem; font-weight: 900; letter-spacing: -0.02em;
}
.meetpeek .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meetpeek .tx b {
    font-size: 0.84rem; font-weight: 800; color: var(--c-ink, #142421);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.meetpeek .tx em {
    font-style: normal; font-size: 0.73rem; font-weight: 700; color: var(--c-green, #123C36);
    white-space: nowrap;
}
.meetpeek .tx .sub {
    font-size: 0.68rem; font-weight: 600; color: var(--c-dim2, #86958F);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ══════════════════════════════════════════════════════════
   📢 공지 카드 — 친구가 라운지 공지를 건넸을 때

   ⚠️ 예전에는 주소 글자가 그대로 갔다. 「https://…?id=214」 는 두 줄을 잡아먹고
      무슨 공지인지도 알려 주지 않아, 받은 사람이 눌러 보기 전에는 알 수 없었다.
   ⚠️ 제목은 무조건 한 줄이다. 두 줄이 되면 카드 높이가 공지마다 달라져,
      여러 개가 오갈 때 대화가 울퉁불퉁해진다 — 넘치면 … 로 끊는다.
   ══════════════════════════════════════════════════════════ */
.ntpeek {
    display: flex; align-items: center; gap: 11px; margin-bottom: 5px;
    width: 100%; max-width: 100%;
    border: 1px solid var(--line, #E3EDEA); background: #FFFFFF; border-radius: 15px;
    padding: 10px 14px 10px 10px; cursor: pointer; font-family: inherit; text-align: left;
    box-shadow: 0 2px 10px -5px rgba(16, 34, 30, 0.3);
}
.ntpeek:hover { background: #F7FAF9; }
.ntpeek .ic {
    width: 42px; height: 42px; border-radius: 13px; flex: 0 0 auto;
    background: var(--c-red, #C82433); color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
}
.ntpeek .ic svg { width: 20px; height: 20px; }
/* ⚠️ min-width: 0 이 없으면 flex 칸이 글자 길이만큼 늘어나 … 가 듣지 않는다 */
.ntpeek .tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.ntpeek .tx b {
    font-size: 0.85rem; font-weight: 800; color: var(--c-ink, #142421);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ntpeek .tx em {
    font-style: normal; font-size: 0.71rem; font-weight: 700; color: var(--c-red, #C82433);
    white-space: nowrap;
}
.ntpeek .go { flex: 0 0 auto; color: #B7C6C2; font-size: 0.8rem; }

/* 이미 마감된 자리 — 눌러도 갈 곳이 없다 */
.meetpeek.gone { opacity: 0.55; cursor: default; box-shadow: none; }
.meetpeek.gone .ic { background: #B7C6C2; }

/* ⚠️ 적는 칸의 높이는 서식이 아니라 화면이 잰다(growInput).
      여기서 높이를 못 박으면 잰 값과 어긋나 한 글자마다 칸이 튀어 오른다.
      최소 높이만 정해 두고 나머지는 잰 값에 맡긴다. */
.ch2d-chat .chat-foot textarea { min-height: 44px; }
/* 가장 나중 말과 적는 줄 사이의 숨 — 딱 붙으면 답답하다 */
.ch2d-chat .chat-body { padding-bottom: 10px; }

/* ══════════════════════════════════════════════════════════
   🗳🪜 폰에서 투표 · 사다리 카드가 너무 컸다
   ──────────────────────────────────────────────────────────
   증상 — 카드가 옆의 시각과 안 읽은 수(빨간 숫자)를 밀어내 글자가 잘렸다.

   왜 — 줄(.line-me.wide)은 폭이 94% 로 묶여 있는데
        그 안에 「카드 칸(.bubwrap)」 과 「시각 칸(.bubside)」 이 나란히 선다.
        시각 칸은 flex: 0 0 auto 라 줄어들지 않는다.
        카드 칸은 줄어들 수 있게 되어 있지만, 정작 안의 카드가
        width: min(300px, 78vw) 로 못 박혀 있어 따라 줄지 않았다.
        그래서 둘의 합이 줄 폭을 넘고, 진 쪽인 시각이 카드 뒤로 밀렸다.

   어떻게 — ① 카드가 칸을 넘지 않도록 max-width 를 걸고
            ② 폰에서는 줄 폭과 카드, 그리고 카드 속 글자를 한 뼘씩 줄인다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .pollcard { max-width: 100%; }

@media (max-width: 480px) {
    /* 시각 칸이 설 자리를 확실히 남긴다 (94% → 88%) */
    .ch2d-chat .line-me.wide,
    .ch2d-chat .line-you.wide { max-width: 88%; }
    .ch2d-chat .pollcard { width: min(252px, 68vw); }

    .ch2d-chat .vote { padding: 10px 10px 8px; }
    .ch2d-chat .vote .ti { font-size: 0.79rem; margin-bottom: 8px; gap: 6px; }
    .ch2d-chat .vote .ti em { font-size: 0.6rem; padding: 2px 7px; }
    .ch2d-chat .vote .opt { padding: 8px 10px; margin-bottom: 5px; gap: 6px; }
    .ch2d-chat .vote .opt .tx { font-size: 0.78rem; }
    .ch2d-chat .vote .opt .n { font-size: 0.7rem; }
    .ch2d-chat .vote .by { font-size: 0.65rem; margin-top: 6px; gap: 6px; }
    .ch2d-chat .vote .by .fin { font-size: 0.63rem; padding: 4px 9px; }

    /* 🪜 사다리 — 뽑힌 이름이 주인공이지만, 폰에서는 1.3rem 이 과했다 */
    .ch2d-chat .vote.lad .won { font-size: 1.02rem; padding: 5px 0 3px; }
    .ch2d-chat .vote.lad .past { font-size: 0.68rem; }
}

/* ☰ 머리말 오른쪽 메뉴 단추
   ⚠️ 이름 칸(.t)이 flex:1 로 남는 자리를 다 먹으므로, 단추는 그 뒤에 서면 된다.
      따로 margin-left:auto 를 줄 필요가 없다. */
.ch2d-chat .chat-head .ham {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 1.05rem; padding: 0;
}
.ch2d-chat .chat-head .ham:active { background: rgba(255, 255, 255, 0.14); }

/* ══════════════════════════════════════════════════════════
   🎨 방 꾸미기 — 방장이 방 이름과 사진을 정하는 자리
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .rm-face {
    display: flex; align-items: center; gap: 14px; padding: 4px 4px 14px;
}
.ch2d-chat .rm-pic {
    flex: 0 0 auto; width: 66px; height: 66px; border-radius: 50%; overflow: hidden;
    background: #EDF4F2; color: #9FB6AF;
    display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.ch2d-chat .rm-pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ch2d-chat .rm-btns { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; align-items: flex-start; }
.ch2d-chat .rm-note {
    margin: 0; font-size: 0.74rem; line-height: 1.7; color: var(--c-dim2);
    font-weight: 600; word-break: keep-all;
}
.ch2d-chat .rm-go {
    display: inline-flex; align-items: center; gap: 7px;
    border: 0; background: var(--c-green); color: #FFFFFF; border-radius: 12px;
    padding: 10px 15px; cursor: pointer;
    font-family: inherit; font-size: 0.8rem; font-weight: 800; white-space: nowrap;
}
.ch2d-chat .rm-off {
    border: 1px solid var(--c-line); background: #FFFFFF; color: var(--c-red);
    border-radius: 12px; padding: 8px 13px; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; font-weight: 800;
}
.ch2d-chat .rm-name { display: flex; gap: 8px; padding: 4px 4px 12px; }
.ch2d-chat .rm-name input {
    flex: 1; min-width: 0; border: 1px solid var(--c-line); background: #F2F7F5;
    border-radius: 12px; padding: 11px 13px; outline: none; color: var(--c-ink);
    font-family: inherit; font-size: 0.86rem; font-weight: 600;
}

/* ⚠️ hidden 을 달아도 안 숨는 자리
      .crew-menu button 에 display:flex 를 적어 두었는데, 그 한 줄이
      브라우저 기본값인 [hidden]{display:none} 을 이긴다.
      그래서 '방 이름·사진 바꾸기' 가 방장이 아닌 사람에게도 그대로 보였다. */
.ch2d-chat .crew-menu button[hidden] { display: none !important; }

/* 👥 친구 초대하기 — 몇 명까지 부를 수 있나
   ⚠️ 고르기 전에 알아야 한다. 고르고 나서 「안 돼요」 를 듣는 것만큼 허무한 것이 없다. */
.ch2d-chat .inv-cap {
    display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px;
    margin: 4px 0 10px; padding: 11px 13px;
    background: #F4F8F6; border: 1px solid var(--c-line, #E6EEEA); border-radius: 13px;
    font-size: 0.78rem; font-weight: 600; color: #4A5B57;
}
.ch2d-chat .inv-cap i { color: var(--c-green, #17493E); font-size: 0.78rem; }
.ch2d-chat .inv-cap b { font-weight: 900; color: var(--c-green, #17493E); }
.ch2d-chat .inv-cap span {
    width: 100%; font-size: 0.71rem; font-weight: 500; color: #9AABA6;
}

/* ══════════════════════════════════════════════════════════
   📱 아이폰에서 적는 칸을 누를 때 화면이 확대되던 것

   사파리에는 「글자가 16px 보다 작은 칸을 누르면 읽기 좋게 확대해 준다」 는
   규칙이 있다. 친절로 넣은 기능인데, 채팅에서는 누를 때마다 화면이 확 커지고
   손으로 되돌려야 해서 방해만 된다. 실제로 적는 칸 넷이 모두 14px 안팎이었다.

   ⚠️ 흔히 쓰는 <meta viewport maximum-scale=1 · user-scalable=no> 로는 못 막는다.
      사파리는 iOS 10 부터 이 값을 일부러 무시한다 — 눈이 나쁜 사람이 화면을
      키울 길을 막지 못하게 하려는 것이다. 우리도 그 길을 막을 생각은 없다.
      두 손가락으로 넓히는 것은 그대로 되어야 하고, 되고 있다.
      막을 것은 「누르기만 했는데 저절로 커지는 것」 뿐이다.

   ⚠️ 그래서 칸의 글자를 딱 16px 로 올린다. 확대할 까닭이 없어지면 확대하지 않는다.
      손가락으로 쓰는 화면(pointer: coarse)에서만 올린다 —
      마우스 쓰는 화면은 이 문제가 없으니 원래 크기 그대로 둔다.
   ⚠️ px 로 적는다. rem 은 글꼴 기본값이 바뀌면 16px 아래로 내려갈 수 있어,
      그날 이 문제가 소리 없이 되살아난다.
   ══════════════════════════════════════════════════════════ */
@media (pointer: coarse) {
    .ch2d-chat .chat-foot textarea,
    .ch2d-chat .crew-find input,
    .ch2d-chat .vend input,
    .ch2d-chat .rm-name input { font-size: 16px; }
}

/* ══════════════════════════════════════════════════════════
   ⌨️ 키보드가 올라와 있는 동안 — 적는 줄 아래 빈틈 없애기

   env(safe-area-inset-bottom) 은 「기기 아래 턱(홈 막대) 만큼 비워 두라」 는 값이다.
   그런데 이 값은 화면 전체를 기준으로 정해져 있어서, 키보드가 그 턱을 이미
   덮고 있어도 34px 을 그대로 비우라고 한다.
   대화창은 키보드 위에 맞춰 줄여 두므로, 그 34px 이 갈 곳 없는 흰 여백이 되어
   적는 줄과 키보드 사이에 남았다.
   → 키보드가 올라와 있을 때(kb-up)는 그 여백을 지운다. 붙일 턱이 없기 때문이다.
   ⚠️ kb-up 은 ch2d-chat.js 의 fitView() 가 붙이고 뗀다.
   ══════════════════════════════════════════════════════════ */
/* ⚠️ 아래 턱 여백을 쓰는 칸만 지운다. 안 쓰는 칸(.emo 등)을 건드리면
      키보드가 올라올 때마다 없던 여백이 새로 생긴다. */
.ch2d-chat.kb-up .chat-foot { padding-bottom: 10px; }
.ch2d-chat.kb-up .crew-sheet { padding-bottom: 0; }
.ch2d-chat.kb-up .act-sheet { padding-bottom: 10px; }

/* 🖐 대화 칸에서 손가락을 끝까지 밀어도 그 힘이 뒤 페이지로 넘어가지 않게.
      ⚠️ 넘어가면 아이폰이 화면 전체를 고무줄처럼 늘였다 놓는데, 그동안
         보이는 자리가 흔들려 대화창이 함께 울렁인다. */
.ch2d-chat .chat-body { overscroll-behavior: contain; }

/* ══════════════════════════════════════════════════════════
   👑 모임장 자리 — 넘기기 · 끝내기 창

   ⚠️ 모임 창(2147483606)보다 위에 세운다. 아래에 깔리면
      눌러도 아무 일이 없는 것처럼 보인다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .crew-two { display: flex; gap: 8px; }
.ch2d-chat .crew-two > button { flex: 1 1 0; min-width: 0; justify-content: center; }
.ch2d-chat .crew-two > button span { white-space: nowrap; }

.meet-ask {
    position: fixed; inset: 0; z-index: 2147483644;
    background: rgba(8, 18, 16, 0.55);
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.meet-ask .ask-box {
    width: min(400px, 100%); max-height: 84vh; overflow-y: auto;
    background: #FFFFFF; border-radius: 20px; padding: 20px 18px 16px;
    box-shadow: 0 24px 60px -18px rgba(8, 18, 16, 0.5);
}
.meet-ask h4 { margin: 0 0 8px; font-size: 1.02rem; font-weight: 900; color: var(--c-green); }
.meet-ask p {
    margin: 0 0 12px; font-size: 0.82rem; line-height: 1.75;
    color: var(--c-dim2); font-weight: 600; word-break: keep-all;
}
.meet-ask p b { color: var(--c-ink); font-weight: 800; }

/* 고를 사람 목록 */
.meet-ask .ask-list { max-height: 42vh; overflow-y: auto; margin-bottom: 12px; }
.meet-ask .ask-one {
    width: 100%; display: flex; align-items: center; gap: 10px;
    border: 1px solid var(--c-line); background: #FFFFFF; border-radius: 14px;
    padding: 10px 12px; margin-bottom: 7px; cursor: pointer; font-family: inherit;
}
.meet-ask .ask-one:active { background: #F2F7F5; }
.meet-ask .ask-one .f {
    width: 34px; height: 34px; border-radius: 50%; overflow: hidden; flex: 0 0 auto;
    background: #E8F0ED; display: flex; align-items: center; justify-content: center;
}
.meet-ask .ask-one .f img { width: 100%; height: 100%; object-fit: cover; }
.meet-ask .ask-one .n {
    font-size: 0.87rem; font-weight: 800; color: var(--c-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* 끝내기 전에 짚어 볼 것 */
.meet-ask .ask-warn {
    background: #FDF4E3; border: 1px solid #F0DCB4; border-radius: 13px;
    padding: 11px 13px; font-size: 0.78rem; line-height: 1.85;
    color: #7A5406; font-weight: 700; margin-bottom: 12px; word-break: keep-all;
}
.meet-ask .ask-typ { margin-bottom: 7px; font-size: 0.8rem; }
.meet-ask .ask-in {
    width: 100%; border: 1.5px solid var(--c-line); border-radius: 13px;
    padding: 12px 14px; font-family: inherit; font-size: 16px; /* 16px — 아이폰 확대 막기 */
    font-weight: 700; color: var(--c-ink); outline: none; margin-bottom: 12px;
    text-align: center; letter-spacing: 0.02em;
}
.meet-ask .ask-in:focus { border-color: var(--c-green2); }

.meet-ask .ask-two { display: flex; gap: 8px; }
.meet-ask .ask-two > button { flex: 1 1 0; }
.meet-ask .ask-no, .meet-ask .ask-yes, .meet-ask .ask-kill {
    border: 0; border-radius: 14px; padding: 14px 12px; cursor: pointer;
    font-family: inherit; font-size: 0.88rem; font-weight: 800;
}
.meet-ask .ask-no { background: #EDF1F0; color: var(--c-dim2); width: 100%; }
.meet-ask .ask-yes { background: var(--c-green); color: #FFFFFF; }
.meet-ask .ask-kill { background: var(--c-red); color: #FFFFFF; }
.meet-ask .ask-kill:disabled { background: #D6DEDC; color: #93A5A0; cursor: not-allowed; }

/* 👑 양도 고르기 — 이미 정원을 채운 사람은 고를 수 없다는 것이 보이게 */
.meet-ask .ask-one .nn { display: flex; flex-direction: column; gap: 2px; min-width: 0; text-align: left; }
.meet-ask .ask-one .nn .s {
    font-size: 0.72rem; font-weight: 600; color: var(--c-dim2);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* ⚠️ 흐리게만 두지 않는다. 흐린 것은 「기다리면 될 것」 처럼도 보인다.
      까닭이 글로 적혀 있어야 무엇을 해야 하는지 안다(위 .s 참고). */
.meet-ask .ask-one.full {
    background: #F5F7F6; border-color: #E8EEEC; cursor: not-allowed; opacity: 0.72;
}
.meet-ask .ask-one.full .n { color: var(--c-dim2); }
.meet-ask .ask-one.full .s { color: var(--c-red); font-weight: 700; }

/* ══════════════════════════════════════════════════════════
   📷 보내는 중인 사진 — 진행바 · 용량 · 취소 · 다시 보내기

   ⚠️ 올라가기 전에도 사진이 보여야 한다. 「보냈나?」 를 기다리게 하지 않는 것이
      이 칸의 전부다. 그림은 내 기기 안의 파일을 그대로 그린 것이다.
   ⚠️ 진행바는 그림 위에 얹는다. 옆에 두면 그림이 작아지고,
      아래에 두면 「무엇이 올라가는 중인지」 와 「얼마나 갔는지」 가 떨어져 보인다.
   ══════════════════════════════════════════════════════════ */
.ch2d-chat .up-row { display: flex; flex-direction: column; align-items: flex-end; }
.ch2d-chat .up-wrap { position: relative; overflow: hidden; }
.ch2d-chat .up-wrap img { display: block; max-width: 200px; border-radius: 14px; }

/* 덮개 — 올라가는 동안 살짝 어둡게 해 「아직」 임을 알린다 */
.ch2d-chat .up-veil {
    position: absolute; inset: 0; border-radius: 14px;
    background: rgba(10, 24, 21, 0.42);
    display: flex; align-items: center; justify-content: center;
}
.ch2d-chat .up-veil.fail { background: rgba(200, 36, 51, 0.55); color: #FFFFFF; font-size: 1.3rem; }

/* 동그란 진행바 — 둘레를 잘라 쓴다 */
.ch2d-chat .up-ring { width: 44px; height: 44px; transform: rotate(-90deg); }
.ch2d-chat .up-ring .up-bg { fill: none; stroke: rgba(255,255,255,0.28); stroke-width: 3.5; }
.ch2d-chat .up-ring .up-fg {
    fill: none; stroke: #FFFFFF; stroke-width: 3.5; stroke-linecap: round;
    transition: stroke-dashoffset 0.18s linear;
}
.ch2d-chat .up-pct {
    position: absolute; color: #FFFFFF; font-size: 0.68rem; font-weight: 900;
    letter-spacing: -0.02em;
}

/* 아랫줄 — 용량과 단추 */
.ch2d-chat .up-foot {
    display: flex; align-items: center; gap: 8px; margin-top: 5px;
    font-size: 0.7rem; font-weight: 700; color: var(--c-dim, #86958F);
}
.ch2d-chat .up-foot.fail { color: var(--c-red, #C82433); }
.ch2d-chat .up-foot button {
    border: 1px solid var(--c-line, rgba(18,60,54,0.10)); background: #FFFFFF;
    border-radius: 999px; padding: 3px 10px; cursor: pointer;
    font-family: inherit; font-size: 0.68rem; font-weight: 800;
    color: var(--c-dim, #86958F);
}
.ch2d-chat .up-foot.fail button { color: var(--c-red, #C82433); border-color: #F5C9CF; }

/* ══════════════════════════════════════════════════════════════
   🗳 투표 현황 — 누가 어디에 골랐는지 (2026-09-04, 대표 지시)

   ⚠️ 익명 투표에는 열리지 않는다. 서버가 이름을 안 보내고 단추도 안 선다.
   ⚠️ 대화창(z-index 2147483601) «위» 에 떠야 한다. 아래에 깔리면 눌러도 안 보인다.
   ══════════════════════════════════════════════════════════════ */
.pw-wrap {
    position: fixed; inset: 0; z-index: 2147483650;
    background: rgba(10, 24, 20, 0.5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
    display: flex; align-items: center; justify-content: center; padding: 18px;
    font-family: 'Pretendard', -apple-system, sans-serif; letter-spacing: -0.02em;
}
.pw-box {
    width: 100%; max-width: 400px; max-height: 82vh; display: flex; flex-direction: column;
    background: #FFFFFF; border-radius: 20px; overflow: hidden;
    box-shadow: 0 24px 60px -20px rgba(0, 0, 0, 0.45);
}
.pw-top {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
    padding: 15px 16px; border-bottom: 1px solid var(--c-line, rgba(18,60,54,.1));
}
.pw-top b { font-size: 0.95rem; font-weight: 900; color: var(--c-ink, #142421); }
.pw-top button {
    border: 0; background: #F0F5F3; color: #6C7F7A; cursor: pointer;
    width: 30px; height: 30px; border-radius: 50%; font-size: 0.82rem;
}
.pw-q {
    flex: 0 0 auto; padding: 13px 16px 4px;
    font-size: 0.86rem; font-weight: 800; color: var(--c-green, #123C36);
    word-break: keep-all; line-height: 1.5;
}
.pw-body { flex: 1 1 auto; overflow-y: auto; padding: 8px 16px 18px; }
.pw-one { padding: 11px 0; border-top: 1px dashed rgba(18,60,54,.12); }
.pw-one:first-child { border-top: 0; }
.pw-h { display: flex; align-items: center; gap: 8px; margin-bottom: 7px; }
.pw-h b { font-size: 0.86rem; font-weight: 900; color: var(--c-ink, #142421); word-break: keep-all; }
.pw-h em {
    font-style: normal; font-size: 0.7rem; font-weight: 900; color: var(--c-red, #C82433);
    background: #FDF3F5; border-radius: 999px; padding: 2px 8px;
}
.pw-nm { display: flex; flex-wrap: wrap; gap: 5px; }
.pw-nm span {
    font-size: 0.76rem; font-weight: 700; color: #3F4E4B;
    background: #F0F5F3; border-radius: 999px; padding: 4px 10px;
}
.pw-none { font-size: 0.76rem; font-weight: 600; color: #93A9A1; }
/* 「투표 현황」 단추 — 「지금 끝내기」 와 같은 결이되 조용하게 */
.ch2d-chat .fin.who { background: #F0F5F3; color: var(--c-green, #123C36); }

/* ══════════════════════════════════════════════════════════════
   🕶 국 방에서 대표는 «읽기만» — 적는 줄을 통째로 잠근다 (2026-09-04)

   ⚠️ 서버도 막는다(routes/message.routes.js 의 국방에서입다문사람인가).
      여기는 «보여 주는» 쪽일 뿐이다. 화면만 잠그면 주소를 아는 사람은 그냥 보낸다.
   ══════════════════════════════════════════════════════════════ */
.ch2d-chat.ops-mute .chat-foot { display: none !important; }
/* ══════════════════════════════════════════════════════════════
   👁 「읽기만 하실 수 있어요」 한 줄 — «입을 다문 방에서만» 뜬다

   ⚠️ 예전에 이 줄을 [hidden] 하나로 감췄다가 «모든 방에» 떴다.
      display 를 적어 둔 규칙이 [hidden] 을 이기기 때문이다 —
      [hidden] 은 display:none 을 «약하게» 걸어 둔 것일 뿐이라,
      선택자에 display 가 한 번이라도 적히면 그쪽이 이긴다.
      그래서 보고방처럼 «말할 수 있는» 방에도 이 줄이 붙어 있었다.
   ⚠️ 이제 «ops-mute 한 곳» 이 적는 줄을 감추는 것과 이 줄을 세우는 것을
      함께 맡는다. 둘을 따로 켜고 끄면 언젠가 한쪽만 켜져,
      «적을 수 있는데 못 적는다고 적혀 있는» 화면이 된다.
   ══════════════════════════════════════════════════════════════ */
.ch2d-chat .ops-onlyread { display: none; }
.ch2d-chat.ops-mute .ops-onlyread {
    flex: 0 0 auto; background: #FFFFFF; border-top: 1px solid var(--c-line, rgba(18,60,54,.1));
    padding: 14px 16px calc(env(safe-area-inset-bottom, 0px) + 14px);
    display: flex; align-items: center; justify-content: center; gap: 8px;
    font-size: 0.8rem; font-weight: 800; color: #8A9A95;
}
.ch2d-chat.ops-mute .ops-onlyread i { font-size: 0.78rem; }
.ch2d-chat.kb-up.ops-mute .ops-onlyread { padding-bottom: 14px; }

/* ══════════════════════════════════════════════════════════
   📣 커뮤니티 전체 톡방  (2026-09-08, 대표 지시)

   공지를 받는 자리다. 적는 칸이 있던 곳에 「운영진 1:1 문의」 가 서고,
   머리말에 알림을 여닫는 종이 붙는다.
   ⚠️ 잠그는 판단은 서버가 한다 — 여기서는 «보이는 것» 만 다룬다.
   ══════════════════════════════════════════════════════════ */
/* 🙋 문의 단추 — 적는 칸 자리를 그대로 물려받는다 */
.ch2d-chat .ops-onlyread .askops { display: none; }
.ch2d-chat.ops-mute.notice-room .ops-onlyread { padding: 10px 14px calc(env(safe-area-inset-bottom, 0px) + 12px); }
.ch2d-chat.ops-mute.notice-room .ops-onlyread > i { display: none; }
.ch2d-chat.ops-mute.notice-room .ops-onlyread .askops {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    width: 100%; max-width: 420px; padding: 13px 18px; border: 0; border-radius: 14px;
    background: var(--c-green, #17493E); color: #FFFFFF;
    font-family: inherit; font-size: 0.86rem; font-weight: 900; cursor: pointer;
    transition: transform .12s ease, filter .12s ease;
}
.ch2d-chat.ops-mute.notice-room .ops-onlyread .askops:hover { filter: brightness(1.08); }
.ch2d-chat.ops-mute.notice-room .ops-onlyread .askops:active { transform: scale(.97); }

/* 🔔 알림 종 — 꺼짐은 회색, 켜짐은 청취담 초록 (대표가 고르신 대로) */
.ch2d-chat .chat-head .bell {
    flex: 0 0 auto; width: 34px; height: 34px; border: 0; border-radius: 11px;
    background: transparent; color: #9AA8A4; cursor: pointer;
    display: grid; place-items: center; font-size: 0.92rem;
    transition: color .14s ease, background .14s ease;
}
.ch2d-chat .chat-head .bell:hover { background: rgba(18, 60, 54, .07); }
.ch2d-chat .chat-head .bell:active { transform: scale(.94); }
.ch2d-chat .chat-head .bell.on { color: var(--c-green, #17493E); }
.ch2d-chat .chat-head .bell[disabled] { opacity: .5; cursor: default; }

/* ══════════════════════════════════════════════════════════════════════════════
   🚪 단톡방 여섯 갈래 — 갈래마다 «따로» 옷을 입는 자리  (2026-09-08, 대표 지시)

   방은 여섯 가지다. 앞으로 기능도 디자인도 갈래마다 달라질 것이라,
   서로 물리지 않도록 자리를 미리 갈라 둔다.

     .room-kind-일반      사람들이 스스로 연 방
     .room-kind-모임      친구모임에 딸린 방
     .room-kind-멤버      커뮤니티 전체 멤버 공지방
     .room-kind-운영진    운영진 회의
     .room-kind-국        아홉 개 국
     .room-kind-대표보고  국 → 대표 업무보고

   쓰는 법 — 고칠 갈래의 칸 «안에만» 적는다.
     .ch2d-chat.room-kind-멤버 .chat-head { background: …; }
   이렇게 적으면 멤버 방만 바뀌고 나머지 다섯은 꿈쩍하지 않는다.

   ⚠️ 갈래 밖(공통 자리)에 적으면 여섯이 함께 움직인다. 한 갈래만 바꾸려던 것이
      다른 갈래를 건드리는 일이 바로 그렇게 생긴다 — 반드시 제 칸 안에 적는다.
   ⚠️ 이름표는 서버가 붙인다(services/room-kinds.js). 화면이 짐작하지 않는다.
   ══════════════════════════════════════════════════════════════════════════════ */

/* ── 일반 단톡방 ── (아직 따로 입힌 옷 없음 — 기본 차림) */

/* ── 모임 단톡방 ── (아직 따로 입힌 옷 없음) */

/* ── 멤버 공지방 ── */
/* 지금 이 갈래의 차림은 위쪽 .notice-room 규칙이 맡고 있다.
   ⚠️ 새로 손볼 때는 여기(.room-kind-멤버)로 옮겨 적는다 — 그래야 갈래별로 모인다. */

/* ── 운영진 회의 ── (아직 따로 입힌 옷 없음) */

/* ── 국 방 ── (붉은 머리말 등은 위쪽 국 방 규칙이 맡고 있다) */

/* ── 대표 업무보고 ── (아직 따로 입힌 옷 없음) */