/* 리뷰 · 게시판 · 채팅 (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: 0; 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 (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; }
.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; }