/* 리뷰 · 게시판 · 채팅 (public/community.js) on /s/<id> and /community, and the 전체 채팅 sheet next to .chat-fab
   (styles.css) on the home page and /s/<id>. Tokens from styles.css. */
.community { margin: 28px 0 36px; }
.cm-page { padding-block: 8px 48px; }
.cm-page h1 { margin: 12px 0 6px; font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.4rem); letter-spacing: -0.03em; }
.cm-lead { color: var(--ink-2); margin: 0 0 12px; font-size: 0.95rem; }
.cm-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 10px; }
.cm-tab { font: inherit; font-weight: 600; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); cursor: pointer; min-height: 40px; }
.cm-tab[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.cm-tab:focus-visible, .cm-act:focus-visible, .cm-link:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
.cm-panel { background: var(--surface); border-radius: 14px; box-shadow: var(--shadow); padding: 16px; min-width: 0; }
.cm-me { margin: 0 0 10px; color: var(--ink-2); font-size: 0.9rem; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.cm-me strong { color: var(--ink); }
.cm-me-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.cm-me-form input { width: 12em; max-width: 100%; }
.cm-link { font: inherit; color: var(--lantern); background: none; border: 0; padding: 4px 2px; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; }
.cm-empty, .cm-hint { color: var(--ink-2); margin: 4px 0; font-size: 0.92rem; }
.cm-summary { margin: 0 0 12px; font-weight: 700; font-size: 1.05rem; }
.cm-stars { color: var(--lantern); letter-spacing: 1px; }
.cm-form { display: grid; gap: 8px; margin: 0 0 16px; }
.cm-form--inline { grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin: 10px 0 0; }
.cm-form--inline .cm-status { grid-column: 1 / -1; }
.cm-form textarea, .cm-form input[type="text"], .cm-me-form input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; box-sizing: border-box; width: 100%; min-width: 0; }
.cm-form textarea { resize: vertical; min-height: 4.5em; }
.cm-form textarea:focus-visible, .cm-form input:focus-visible, .cm-me-form input:focus-visible { outline: none; border-color: var(--lantern); }
.cm-form-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cm-starpick { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 2px; align-items: center; }
.cm-starpick legend { float: left; margin-right: 8px; font-weight: 600; }
/* Each star is a label over its radio: the radio stays focusable and clickable (opacity 0, covers the star). */
.cm-starpick .cm-star { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 10px; cursor: pointer; font-size: 1.9rem; line-height: 1; color: color-mix(in srgb, var(--ink-2) 50%, transparent); transition: color 0.15s, transform 0.15s; }
.cm-starpick .cm-star input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.cm-starpick .cm-star:has(input:checked), .cm-starpick .cm-star:has(~ .cm-star input:checked) { color: var(--lantern); }
.cm-starpick .cm-star:has(input:focus-visible) { outline: 3px solid var(--lantern); outline-offset: 1px; }
.cm-starpick .cm-star:active { transform: scale(0.92); }
.cm-status { margin: 0; color: var(--lantern); font-size: 0.88rem; min-height: 1.2em; }
.cm-status:empty { min-height: 0; }
.cm-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; }
.cm-list--sub { margin-top: 6px; padding-left: 12px; border-left: 2px solid var(--rule); }
.cm-item { padding: 12px 0; border-top: 1px solid var(--rule); min-width: 0; }
.cm-item:first-child { border-top: 0; }
.cm-item--pin { background: color-mix(in srgb, var(--lantern) 7%, transparent); border-radius: 10px; padding-inline: 10px; }
.cm-meta { margin: 0 0 4px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 0.85rem; color: var(--ink-2); }
.cm-nick { color: var(--ink); font-weight: 700; overflow-wrap: anywhere; }
.cm-badge { font-size: 0.72rem; font-weight: 700; border-radius: 999px; padding: 2px 8px; color: var(--ink-2); background: color-mix(in srgb, var(--ink-2) 12%, transparent); }
.cm-badge--op { color: var(--lantern-ink); background: var(--lantern); }
.cm-body { margin: 0; white-space: pre-line; overflow-wrap: anywhere; }
.cm-reply { margin: 8px 0 0; padding: 8px 12px; border-radius: 10px; background: var(--paper); }
.cm-acts { display: flex; gap: 6px; margin-top: 6px; }
.cm-act { font: inherit; font-size: 0.82rem; color: var(--ink-2); background: none; border: 1px solid var(--rule); border-radius: 999px; padding: 4px 10px; min-height: 32px; cursor: pointer; }
.cm-act:hover { border-color: var(--lantern); color: var(--lantern); }
.cm-act:disabled { opacity: 0.6; cursor: default; }
.cm-more { margin-top: 12px; width: 100%; }
.cm-chat-log { list-style: none; margin: 0; padding: 0; height: 320px; overflow-y: auto; overscroll-behavior: contain; display: grid; align-content: start; gap: 6px; }
.cm-msg { overflow-wrap: anywhere; line-height: 1.5; }
.cm-msg time { font-size: 0.75rem; color: var(--ink-2); }
.cm-msg .cm-act { min-height: 0; padding: 0 8px; font-size: 0.72rem; }
.cm-chat-note { margin-bottom: 8px; }
/* 차단: the line at the end of a list when blocked authors' items are left out. */
.cm-note-box:empty { display: none; }
.cm-hidden-note { margin: 10px 0 0; font-size: 0.85rem; }
@media (max-width: 459px) { .cm-panel { padding: 12px; } .cm-chat-log { height: 260px; } .cm-form--inline { grid-template-columns: 1fr; } }
/* 전체 채팅 sheet: a bottom sheet on phones (over the button, which it covers), a small panel above the button on
   wide screens. The log takes the room left; the page behind keeps scrolling. */
.chat-sheet { position: fixed; z-index: 31; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; max-height: 50vh; max-height: min(max(50dvh, 280px), var(--vvh, 100dvh)); box-sizing: border-box; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); background: var(--surface); color: var(--ink); border: 1px solid var(--rule); border-radius: 18px 18px 0 0; box-shadow: 0 -10px 30px -12px rgba(0, 0, 0, 0.45); }
.chat-sheet[hidden] { display: none; }
/* Keyboard up (owner tg 9867; community.js sets --vv-top, --vvh from window.visualViewport): on phones the sheet
   fills the visible area, from under the URL bar down to the keyboard's edge, so no card or button of the list shows
   above or below it and the input sits right on the keyboard. iOS 26 Safari still draws the page outside the visual
   viewport, under the status bar and under its floating URL pill and form bar (^ v ✓) above the keyboard (simulator
   26.2), where no fixed box reaches; so while the keyboard is up (html.chat-kb, community.js) the page behind is
   hidden and only the page colour shows there. Layout and scroll position stay as they were. */
.chat-sheet--kb { top: var(--vv-top, 0px); bottom: auto; height: var(--vvh, 100dvh); max-height: none; padding-bottom: 12px; border-radius: 0; box-shadow: none; }
@media (max-width: 639px) { html.chat-kb body { visibility: hidden; } html.chat-kb .chat-sheet { visibility: visible; } }
/* The sheet covers the button on phones; while it is open the button (and its badge) is hidden, so it never sits
   over the input (닫기 and Escape close the sheet). */
@media (max-width: 639px) { .chat-fab[aria-expanded="true"] { visibility: hidden; } }
.chat-sheet-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; margin-bottom: 6px; }
.chat-sheet-title { margin: 0; font-size: 1.05rem; letter-spacing: -0.02em; }
.chat-sheet-title:focus { outline: none; }
.chat-sheet-title:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; border-radius: 4px; }
.chat-sheet-close { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font: inherit; font-size: 1.5rem; line-height: 1; color: var(--ink-2); background: none; border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; }
.chat-sheet-close:hover { color: var(--lantern); border-color: var(--lantern); }
.chat-sheet-close:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
.chat-sheet .cm-me { margin-bottom: 6px; }
.cm-chat-body { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.chat-sheet .cm-chat-log { flex: 1 1 auto; height: 26vh; min-height: 96px; }
/* The row scrolled half out at the top fades out instead of being cut by a hard edge (owner tg 9867). */
.chat-sheet .cm-chat-log { padding-top: 14px; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px); mask-image: linear-gradient(to bottom, transparent, #000 14px); }
.chat-sheet--kb .cm-chat-log { flex: 1 1 0; height: auto; }
/* A short visible area without the keyboard being told apart (owner tg 11319: an iPhone in-app browser shrinks the
   page itself to the keyboard's top, so the visual viewport did not shrink and half of 346px left the input below the
   page's edge): the sheet takes at least 280px (still no more than the visible area) and the log gives way first. */
@media (max-width: 639px) and (max-height: 420px) { .chat-sheet .cm-chat-log { min-height: 48px; } }
.chat-sheet .cm-hint { font-size: 0.82rem; }
@media (min-width: 640px) {
  .chat-sheet { left: auto; right: max(calc(16px + env(safe-area-inset-right)), calc(50vw - var(--maxw) / 2 + 16px)); bottom: calc(84px + env(safe-area-inset-bottom)); width: 360px; max-height: min(calc(100vh - 120px), calc(var(--vvh, 100vh) - 96px)); padding-bottom: 12px; border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5); }
  .chat-sheet .cm-chat-log { height: 300px; }
  /* Keyboard up on a tablet: the panel's bottom rests 16px above the keyboard (the visible area's bottom edge). */
  .chat-sheet--kb { top: calc(var(--vv-top, 0px) + var(--vvh, 100vh) - 16px); height: auto; max-height: calc(var(--vvh, 100vh) - 32px); transform: translateY(-100%); border-radius: 16px; box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5); }
  .chat-sheet--kb .cm-chat-log { flex: 1 1 auto; height: 300px; }
}
/* Chat input with the round send button inside its right end (owner tg 8745). */
.cm-chat-form { margin: 10px 0 0; }
.cm-chat-input { position: relative; }
/* The button sits 6px inside the input's border on every side and its focus ring is drawn inside the button, so
   nothing touches or crosses the input's edge (owner tg 8953); the text stops before the button. */
.cm-chat-input input[type="text"] { width: 100%; height: 44px; box-sizing: border-box; padding-right: 48px; }
.cm-send { position: absolute; top: 6px; right: 6px; width: 32px; height: 32px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--lantern); color: var(--lantern-ink); cursor: pointer; }
.cm-send:hover, .cm-send:focus-visible { filter: brightness(0.95); }
.cm-send:focus-visible { outline: 2px solid var(--lantern-ink); outline-offset: -4px; }
.chat-online { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink); }
.chat-online-n { position: relative; display: inline-grid; overflow: hidden; height: 1.3em; line-height: 1.3em; min-width: 1ch; font-variant-numeric: tabular-nums; }
.chat-roll { grid-area: 1 / 1; }
.chat-roll-up { animation: chat-in-up .45s cubic-bezier(.16, 1, .3, 1) both; }
.chat-roll-down { animation: chat-in-down .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes chat-in-up { from { transform: translateY(100%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes chat-in-down { from { transform: translateY(-100%); opacity: 0; } to { transform: none; opacity: 1; } }
.chat-sheet-head .cm-me { margin: 0; flex: 1 1 auto; min-width: 0; }
.chat-sheet-head .chat-sheet-close { margin-left: auto; }
.cm-me-name { font-weight: 700; }
/* 메타모아 계정 (owner tg 10442·10443): 로그인 after the name, a writer's level next to the name (and the name in its
   color: Lv1 grey, Lv2 green, Lv3 sky, Lv4 blue, Lv5 purple, Lv6 orange, Lv7 gold; same as account.css). */
.cm-who { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 0.9rem; }
.cm-login { font-weight: 700; }
.cm-lv { font-size: 0.72rem; font-weight: 800; border-radius: 999px; padding: 2px 7px; color: #fff; }
.cm-lv.lv1 { background: #8a8494; } .cm-lv1 { color: #8a8494; }
.cm-lv.lv2 { background: #2f9a5b; } .cm-lv2 { color: #2f9a5b; }
.cm-lv.lv3 { background: #2aa3d8; } .cm-lv3 { color: #1f8fc2; }
.cm-lv.lv4 { background: #2f62d6; } .cm-lv4 { color: #2f62d6; }
.cm-lv.lv5 { background: #8a4fd0; } .cm-lv5 { color: #8a4fd0; }
.cm-lv.lv6 { background: #e57a1f; } .cm-lv6 { color: #d96d12; }
.cm-lv.lv7 { background: #c99a12; } .cm-lv7 { color: #b8890a; }
/* 운영자 badge (DRAFT A/B): A the space's picture in a small ring, B our door mark with 「○○ 운영자」. */
.cm-op { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; width: 26px; height: 26px; border-radius: 50%; overflow: hidden; box-shadow: 0 0 0 2px var(--lantern); background: var(--paper); font-size: 0.7rem; font-weight: 800; color: var(--lantern); }
.cm-op img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-op:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
/* Chat: only metamoa addresses are links (owner tg 11413) */
.cm-msg-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
/* A listed space linked in chat shows as a card (thumbnail, name, chip, 들어가기) under the line; opens /s/<id>. */
.cm-cards { display: grid; gap: 6px; margin-top: 6px; }
.cm-card { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto; align-items: center; gap: 10px; max-width: 420px; padding: 6px 8px 6px 6px; border: 1px solid var(--rule); border-radius: 12px; background: var(--paper); color: var(--ink); text-decoration: none; overflow-wrap: normal; transition: border-color .2s var(--ease), transform .2s var(--ease); }
.cm-card:hover { border-color: var(--lantern); }
.cm-card:active { transform: scale(0.98); }
.cm-card:focus-visible { outline: 3px solid var(--lantern); outline-offset: 2px; }
.cm-card-thumb { position: relative; width: 72px; height: 48px; border-radius: 8px; overflow: hidden; background: color-mix(in srgb, var(--lantern) 18%, var(--surface)); display: grid; place-items: center; }
.cm-card-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cm-card-glyph { font-weight: 800; font-size: 1rem; color: var(--lantern); }
.cm-card-body { display: grid; gap: 3px; min-width: 0; justify-items: start; }
.cm-card-name { max-width: 100%; font-weight: 700; font-size: 0.92rem; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-card-chip { font-size: 0.72rem; font-weight: 600; line-height: 1.4; padding: 1px 8px; border: 1px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink-2); }
.cm-card-go { font-size: 0.8rem; font-weight: 700; padding: 6px 10px; border-radius: 999px; background: var(--lantern); color: var(--lantern-ink); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) { .cm-card { transition: none; } .cm-card:active { transform: none; } }
/* 운영자 채팅 in the same sheet (public/op-chat.js, only for a signed-in 공간운영자): 「전체 | 운영자 전용 | 1:1」 as a
   segmented row under the head; 운영자 전용 and each 1:1 / 단체 대화 use the chat log's size; the 1:1 list scrolls in it. */
.op-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2px; margin: 0 0 8px; padding: 3px; border-radius: 12px; background: var(--paper); border: 1px solid var(--rule); }
.op-tab { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 4px 8px; font: inherit; font-size: 0.88rem; font-weight: 600; color: var(--ink-2); background: none; border: 0; border-radius: 9px; cursor: pointer; white-space: nowrap; }
.op-tab:hover { color: var(--ink); }
.op-tab[aria-selected="true"] { color: var(--ink); background: var(--surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.op-tab:focus-visible { outline: 2px solid var(--lantern); outline-offset: 1px; }
.op-n { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: #e2663a; color: #fff; font-size: 0.7rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.op-n[hidden] { display: none; }
.op-pane { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
.op-pane[hidden], .cm-chat-body[hidden] { display: none; }
.op-conv, .op-dm, .op-new-box { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; gap: 6px; }
.op-conv-head { display: flex; align-items: center; gap: 6px; min-width: 0; padding-bottom: 6px; border-bottom: 1px solid var(--rule); }
.op-back { flex: none; width: 32px; height: 32px; display: grid; place-items: center; padding: 0; color: var(--ink); background: none; border: 1px solid var(--rule); border-radius: 50%; cursor: pointer; }
.op-back:hover { border-color: var(--lantern); color: var(--lantern); }
.op-conv-name { display: grid; min-width: 0; flex: 1 1 auto; }
.op-conv-title { font-size: 0.95rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-conv-sub { font-size: 0.75rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-conv-tools { display: flex; gap: 4px; flex: none; }
.op-conv-tools .cm-act { min-height: 28px; padding: 2px 8px; }
.chat-sheet .op-log { gap: 8px; }
.op-msg { max-width: 86%; padding: 6px 10px 7px; border-radius: 12px 12px 12px 4px; background: var(--paper); border: 1px solid var(--rule); overflow-wrap: anywhere; }
.op-msg.is-me { justify-self: end; border-radius: 12px 12px 4px 12px; background: color-mix(in srgb, var(--lantern) 14%, var(--surface)); border-color: transparent; }
.op-msg-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; font-size: 0.75rem; color: var(--ink-2); }
.op-msg-head strong { color: var(--ink); font-size: 0.8rem; }
.op-acts { display: inline-flex; gap: 4px; margin-left: auto; }
.op-acts .cm-act { min-height: 0; padding: 0 7px; font-size: 0.7rem; }
.op-text { margin: 2px 0 0; white-space: pre-wrap; line-height: 1.5; }
.op-text a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.op-mention { font-weight: 700; color: var(--lantern); }
.op-form { margin: 4px 0 0; display: grid; gap: 6px; }
.op-as, .op-field select { font: inherit; font-size: 0.85rem; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 6px 8px; max-width: 100%; }
.op-as[hidden] { display: none; }
.op-note:empty { display: none; }
.op-list-top { display: flex; gap: 6px; }
.op-list-top .btn { flex: 1 1 0; min-height: 38px; padding: 6px 10px; font-size: 0.88rem; }
.op-list { list-style: none; margin: 0; padding: 0; flex: 1 1 auto; height: 26vh; min-height: 96px; overflow-y: auto; overscroll-behavior: contain; }
.op-list > li + li { border-top: 1px solid var(--rule); }
.op-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 8px; width: 100%; padding: 10px 4px; font: inherit; text-align: left; color: var(--ink); background: none; border: 0; cursor: pointer; }
.op-item:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); }
.op-item:focus-visible { outline: 2px solid var(--lantern); outline-offset: -2px; border-radius: 8px; }
.op-item-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.op-item-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.92rem; }
.op-item-last { grid-column: 1; font-size: 0.8rem; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.op-item time { grid-column: 2; grid-row: 1; font-size: 0.72rem; color: var(--ink-2); align-self: center; }
.op-tag { flex: none; font-size: 0.68rem; font-weight: 700; padding: 1px 6px; border-radius: 999px; color: var(--lantern-ink); background: var(--lantern); }
.op-search { position: relative; display: grid; gap: 6px; }
.op-search input, .op-new-box > input { font: inherit; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; width: 100%; box-sizing: border-box; min-width: 0; }
.op-suggest { position: absolute; z-index: 2; top: calc(100% + 4px); left: 0; right: 0; margin: 0; padding: 4px; list-style: none; max-height: 220px; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 12px 28px -12px rgba(0, 0, 0, 0.35); }
.op-suggest[hidden] { display: none; }
.op-suggest li { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.op-suggest li.is-on, .op-suggest li:hover { background: color-mix(in srgb, var(--lantern) 14%, transparent); }
.op-hint { font-size: 0.72rem; color: var(--ink-2); white-space: nowrap; }
.op-chat-input-wrap { position: relative; }
.cm-chat-input .op-suggest { top: auto; bottom: calc(100% + 4px); }
.op-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.op-chips li { display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px 2px 10px; border-radius: 999px; background: var(--paper); border: 1px solid var(--rule); font-size: 0.85rem; }
.op-chip-x { width: 24px; height: 24px; padding: 0; border: 0; border-radius: 50%; background: none; color: var(--ink-2); cursor: pointer; font: inherit; }
.op-chip-x:hover { color: var(--lantern); }
.op-field { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--ink-2); }
.op-invite { padding: 6px 0; border-bottom: 1px solid var(--rule); }
@media (min-width: 640px) { .chat-sheet--op { width: 380px; } .op-list { height: 300px; } }
/* @언급 autocomplete in the chat inputs (public/mention.js): above the input, the sheet's bottom is near */
.mention-host { position: relative; }
.chat-sheet .mention-list { position: absolute; z-index: 3; left: 0; right: 0; bottom: calc(100% + 4px); margin: 0; padding: 4px; list-style: none; max-height: 200px; overflow-y: auto; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; box-shadow: 0 -12px 28px -12px rgba(0, 0, 0, 0.35); }
.chat-sheet .mention-list[hidden] { display: none; }
.chat-sheet .mention-list li { display: flex; align-items: baseline; gap: 2px; padding: 8px 10px; border-radius: 8px; cursor: pointer; color: var(--ink); }
.chat-sheet .mention-list li.is-on, .chat-sheet .mention-list li:hover { background: color-mix(in srgb, var(--lantern) 14%, transparent); }
.chat-sheet .mention-at { color: var(--lantern); font-weight: 700; }
/* 새 대화 / 단체 대화 만들기: the matches sit in the flow under the box (the sheet would cut an overlay), the box scrolls */
.op-new-box { overflow-y: auto; }
.op-new-box .op-suggest { position: static; max-height: none; box-shadow: none; }
.op-field { white-space: nowrap; }
.op-field select { flex: 1 1 auto; min-width: 0; }