/* 리뷰 · 게시판 · 채팅 (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: 4px 12px; align-items: center; }
.cm-starpick legend { float: left; margin-right: 8px; font-weight: 600; }
.cm-starpick label { display: inline-flex; align-items: center; gap: 2px; min-height: 32px; cursor: pointer; }
.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: var(--kb, 0px); display: flex; flex-direction: column; max-height: 50vh; max-height: min(50dvh, 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 (community.js sets --kb, --vvh): the sheet rests on the keyboard, no home-bar gap below the input. */
.chat-sheet--kb { padding-bottom: 12px; }
.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; }
.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) + var(--kb, 0px)); 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; }
}
/* 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; }