/* Cowork 채팅 — 디자인 토큰·컴포넌트 (docs/ui_design.md §4~5) */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Consolas, "Liberation Mono", monospace;
  --font-size-caption: .75rem; --font-size-small: .875rem; --font-size-body: 1rem; --font-size-subtitle: 1.125rem; --font-size-title: 1.5rem; --font-size-display: 2rem;
  --line-height-ui: 1.4; --line-height-body: 1.6; --line-height-heading: 1.3;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-pill: 999px;
  --control-min-height: 44px; --page-max-width: 1120px; --article-max-width: 720px; --folder-panel-width: 360px; --dialog-width: 440px; --header-min-height: 64px;
  --duration-fast: 120ms; --duration-normal: 180ms; --focus-width: 3px; --focus-offset: 3px;
  --z-header: 10; --z-floating: 20; --z-overlay: 100; --z-toast: 120;
  --color-bg: #F8FAFC; --color-surface: #FFFFFF; --color-surface-muted: #F1F5F9; --color-text: #0F172A; --color-text-muted: #475569;
  --color-border: #CBD5E1; --color-control-border: #64748B; --color-primary: #1D4ED8; --color-primary-hover: #1E40AF; --color-on-primary: #FFFFFF;
  --color-link: #1D4ED8; --color-focus: #1D4ED8; --color-user-bg: #DBEAFE; --color-agent-bg: #FFFFFF;
  --color-info-bg: #EFF6FF; --color-info-text: #1E40AF; --color-success-bg: #F0FDF4; --color-success-text: #166534;
  --color-warning-bg: #FFFBEB; --color-warning-text: #92400E; --color-danger-bg: #FEF2F2; --color-danger-text: #B91C1C;
  --color-danger-solid: #B91C1C; --color-on-danger: #FFFFFF; --color-overlay: rgb(15 23 42 / 48%);
  --shadow-sm: 0 1px 3px rgb(15 23 42 / 8%); --shadow-panel: 0 8px 24px rgb(15 23 42 / 12%); --shadow-dialog: 0 20px 48px rgb(15 23 42 / 24%);
  color-scheme: light;
}
:root[data-resolved-theme="dark"] {
  --color-bg: #0F172A; --color-surface: #1E293B; --color-surface-muted: #334155; --color-text: #F8FAFC; --color-text-muted: #CBD5E1;
  --color-border: #475569; --color-control-border: #94A3B8; --color-primary: #93C5FD; --color-primary-hover: #BFDBFE; --color-on-primary: #0F172A;
  --color-link: #93C5FD; --color-focus: #93C5FD; --color-user-bg: #1E3A5F; --color-agent-bg: #1E293B;
  --color-info-bg: #172554; --color-info-text: #BFDBFE; --color-success-bg: #052E16; --color-success-text: #86EFAC;
  --color-warning-bg: #422006; --color-warning-text: #FCD34D; --color-danger-bg: #450A0A; --color-danger-text: #FCA5A5;
  --color-danger-solid: #FCA5A5; --color-on-danger: #450A0A; --color-overlay: rgb(0 0 0 / 64%);
  --shadow-sm: 0 1px 3px rgb(0 0 0 / 24%); --shadow-panel: 0 8px 24px rgb(0 0 0 / 32%); --shadow-dialog: 0 20px 48px rgb(0 0 0 / 48%);
  color-scheme: dark;
}
*, *::before, *::after { box-sizing: border-box; }
html { height: 100%; }
body { margin: 0; min-height: 100%; background: var(--color-bg); color: var(--color-text); font: var(--font-size-body)/var(--line-height-body) var(--font-sans); -webkit-text-size-adjust: 100%; }
a { color: var(--color-link); text-decoration: underline; }
:focus-visible { outline: var(--focus-width) solid var(--color-focus); outline-offset: var(--focus-offset); }
[hidden] { display: none !important; }
h1, h2, h3 { line-height: var(--line-height-heading); margin: 0 0 var(--space-3); }
h1 { font-size: var(--font-size-title); } h2 { font-size: var(--font-size-subtitle); } h3 { font-size: 1rem; }
h1:focus { outline: none; }
p { margin: 0 0 var(--space-3); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--color-text-muted); } .small { font-size: var(--font-size-small); } .tnum { font-variant-numeric: tabular-nums; }
.skip-link { position: absolute; left: var(--space-2); top: -60px; z-index: var(--z-toast); background: var(--color-surface); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); }
.skip-link:focus { top: var(--space-2); }

/* 앱 셸 */
#app { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; }
.app-header { position: sticky; top: 0; z-index: var(--z-header); min-height: var(--header-min-height); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); }
.brand { font-weight: 700; font-size: var(--font-size-subtitle); color: var(--color-text); text-decoration: none; margin-right: auto; white-space: nowrap; }
.app-nav { display: flex; gap: var(--space-1); align-items: center; }
@media (max-width: 767px) { .app-nav .nav-rooms, .app-nav .nav-admin { display: none; } .app-header { padding-inline: var(--space-3); gap: var(--space-2); } .brand { font-size: 1rem; } }
.page { width: 100%; max-width: var(--page-max-width); margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-12); flex: 1; }
.page-narrow { max-width: var(--article-max-width); }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-4); }
.page-head h1 { margin: 0; }
@media (min-width: 1024px) { .app-header { padding-inline: var(--space-8); } .page { padding-inline: var(--space-8); } }

/* 버튼 */
.button, button.button, a.button { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--control-min-height); min-width: var(--control-min-height); padding: 0 var(--space-4); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; font-weight: 500; text-decoration: none; cursor: pointer; transition: background var(--duration-fast); }
.button { white-space: nowrap; }
.button:hover { background: var(--color-surface-muted); }
.button:active { transform: translateY(1px); }
.button-primary { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.button-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.button-danger { background: var(--color-danger-solid); border-color: var(--color-danger-solid); color: var(--color-on-danger); }
.button-danger:hover { background: var(--color-danger-solid); filter: brightness(.92); }
.button-quiet { border-color: transparent; background: transparent; }
.button:disabled, .button[aria-disabled="true"] { background: var(--color-surface-muted); color: var(--color-text-muted); border-color: var(--color-border); cursor: not-allowed; }
.button[aria-busy="true"] { cursor: progress; }
.icon-button { min-width: var(--control-min-height); padding: 0; }
.icon { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* 입력 */
.field { display: grid; gap: var(--space-1); margin-bottom: var(--space-4); }
.field label { font-weight: 500; }
.field .hint { font-size: var(--font-size-small); color: var(--color-text-muted); }
.field .error { font-size: var(--font-size-small); color: var(--color-danger-text); }
.input, textarea.input, select.input { width: 100%; min-height: var(--control-min-height); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface); color: var(--color-text); font: inherit; }
.input[aria-invalid="true"] { border-color: var(--color-danger-text); }
.input[readonly] { background: var(--color-surface-muted); }
textarea.input { resize: vertical; line-height: var(--line-height-body); }

/* 카드·알림·상태 */
.card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-5); box-shadow: var(--shadow-sm); }
.notice { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-info-text); margin: var(--space-3) 0; }
.notice-danger { background: var(--color-danger-bg); color: var(--color-danger-text); }
.notice-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.notice-success { background: var(--color-success-bg); color: var(--color-success-text); }
.notice .notice-actions { margin-left: auto; display: flex; gap: var(--space-2); flex: none; }
.state-view { text-align: center; padding: var(--space-10) var(--space-4); color: var(--color-text-muted); }
.state-view h2 { color: var(--color-text); }
.skeleton { background: linear-gradient(90deg, var(--color-surface-muted), var(--color-surface), var(--color-surface-muted)); background-size: 200% 100%; border-radius: var(--radius-lg); animation: shimmer 1.4s infinite linear; min-height: 120px; }
@keyframes shimmer { to { background-position: -200% 0; } }
.toast-region { position: fixed; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--space-2); width: min(92vw, 420px); pointer-events: none; }
.toast { pointer-events: auto; padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--color-text); color: var(--color-bg); box-shadow: var(--shadow-panel); }

/* 로그인 */
.auth-wrap { max-width: var(--dialog-width); margin: var(--space-10) auto; padding: 0 var(--space-4); width: 100%; }
.big-count { font-size: var(--font-size-display); font-weight: 700; font-variant-numeric: tabular-nums; }

/* 로비 */
.room-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) { .room-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .room-grid { grid-template-columns: repeat(3, 1fr); } }
.room-card { display: block; height: 100%; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-text); text-decoration: none; box-shadow: var(--shadow-sm); }
.room-card:hover { border-color: var(--color-primary); }
.room-card .room-title { font-weight: 700; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; margin: var(--space-1) 0 var(--space-2); }
.room-no { color: var(--color-text-muted); font-variant-numeric: tabular-nums; font-weight: 500; }
.agent-status { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-small); }
.agent-status::before { content: ""; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-text-muted); }
.agent-status[data-state="busy"]::before, .agent-status[data-state="queued"]::before, .agent-status[data-state="stopping"]::before { background: var(--color-warning-text); border-color: var(--color-warning-text); }
.agent-status[data-state="error"]::before { background: var(--color-danger-text); border-color: var(--color-danger-text); }
.meta { font-size: var(--font-size-small); color: var(--color-text-muted); }

/* 모달·서랍 */
.overlay { position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-overlay); display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.dialog { width: min(100%, var(--dialog-width)); max-height: 100%; overflow: auto; background: var(--color-surface); color: var(--color-text); border-radius: var(--radius-lg); box-shadow: var(--shadow-dialog); padding: var(--space-6); }
.dialog-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.dialog-head h2 { margin: 0; font-size: var(--font-size-title); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-4); flex-wrap: wrap; }
@media (max-width: 767px) { .overlay.fullscreen-sm { padding: 0; align-items: stretch; } .overlay.fullscreen-sm .dialog { width: 100%; max-width: none; height: 100%; border-radius: 0; padding: var(--space-4); } }
.menu-pop { position: absolute; right: var(--space-4); top: calc(var(--header-min-height) - 6px); z-index: var(--z-floating); width: min(92vw, 300px); padding: var(--space-4); background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-panel); }
.menu-pop .field { margin-bottom: var(--space-3); }

/* 채팅방 */
.chat-layout { flex: 1; min-height: 0; display: flex; height: 100vh; height: 100dvh; }
.chat-main { flex: 1; min-width: 0; display: flex; flex-direction: column; min-height: 0; }
.room-header { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; padding: var(--space-2) var(--space-4); background: var(--color-surface); border-bottom: 1px solid var(--color-border); min-height: var(--header-min-height); }
.room-header .room-heading { flex: 1; min-width: 0; }
.room-header h1 { margin: 0; font-size: var(--font-size-subtitle); overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.room-header .header-actions { display: flex; gap: var(--space-1); align-items: center; flex-wrap: wrap; }
@media (max-width: 767px) { .room-header { display: grid; grid-template-columns: auto 1fr; gap: var(--space-2) var(--space-3); } .room-header .header-actions { grid-column: 1 / -1; } }
.message-scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--space-4); position: relative; overflow-anchor: none; }
.message-list { list-style: none; margin: 0 auto; padding: 0; max-width: 860px; display: flex; flex-direction: column; gap: var(--space-4); }
.msg { display: flex; flex-direction: column; max-width: min(100%, 720px); }
.msg-user { align-self: flex-end; align-items: flex-end; }
.msg-agent { align-self: flex-start; align-items: flex-start; }
.msg-meta { font-size: var(--font-size-small); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.bubble { padding: 12px 16px; border-radius: var(--radius-lg); border: 1px solid var(--color-border); background: var(--color-agent-bg); overflow-wrap: anywhere; min-width: 0; max-width: 100%; }
.msg-user .bubble { background: var(--color-user-bg); border-color: transparent; }
.bubble > :last-child { margin-bottom: 0; }
.bubble pre { margin: var(--space-2) 0; padding: var(--space-3); background: var(--color-surface-muted); border-radius: var(--radius-md); overflow-x: auto; font: .875rem/1.5 var(--font-mono); max-width: 100%; }
.bubble code { font: .9em var(--font-mono); background: var(--color-surface-muted); padding: 1px 4px; border-radius: var(--radius-sm); }
.bubble pre code { background: none; padding: 0; }
.bubble ul, .bubble ol { margin: 0 0 var(--space-3); padding-left: var(--space-6); }
.bubble h1, .bubble h2, .bubble h3 { font-size: 1rem; margin: var(--space-3) 0 var(--space-2); }
.bubble.msg-collapsed { max-height: 22em; overflow: hidden; position: relative; }
.system-message { align-self: center; text-align: center; font-size: var(--font-size-small); color: var(--color-text-muted); background: var(--color-surface-muted); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); max-width: 100%; overflow-wrap: anywhere; }
.day-sep { align-self: center; font-size: var(--font-size-small); color: var(--color-text-muted); }
.file-chip, .attachment-chip { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 36px; margin: var(--space-1) var(--space-1) var(--space-1) 0; padding: var(--space-1) var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-pill); background: var(--color-surface); color: var(--color-text); text-decoration: none; font-size: var(--font-size-small); max-width: 100%; }
.file-chip span.name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
a.file-chip:hover { background: var(--color-surface-muted); }
.file-chip.missing { border-style: dashed; color: var(--color-danger-text); }
.status-chip { display: inline-flex; align-items: center; gap: var(--space-1); margin-top: var(--space-2); padding: 2px var(--space-3); border-radius: var(--radius-pill); background: var(--color-success-bg); color: var(--color-success-text); font-size: var(--font-size-small); }
.msg-error { margin-top: var(--space-1); font-size: var(--font-size-small); color: var(--color-danger-text); }
.window-button { display: block; margin: 0 auto var(--space-4); }
.floating { position: sticky; bottom: var(--space-3); z-index: var(--z-floating); display: flex; flex-direction: column; align-items: center; gap: var(--space-2); pointer-events: none; margin-top: var(--space-2); }
.floating .button { pointer-events: auto; box-shadow: var(--shadow-panel); }
.working-row { display: flex; align-items: center; gap: var(--space-3); max-width: 860px; margin: var(--space-4) auto 0; color: var(--color-text-muted); }
.composer { background: var(--color-surface); border-top: 1px solid var(--color-border); padding: var(--space-3) var(--space-4) calc(var(--space-3) + env(safe-area-inset-bottom)); }
.composer-inner { max-width: 860px; margin: 0 auto; }
.composer-files { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: var(--space-2); }
.attachment-chip button { border: 0; background: none; color: inherit; min-width: 28px; min-height: 28px; cursor: pointer; font-size: 1rem; line-height: 1; }
.composer-row { display: flex; gap: var(--space-2); align-items: flex-end; }
.composer-row textarea { flex: 1; min-height: var(--control-min-height); max-height: 11em; resize: none; }
.composer .hint { font-size: var(--font-size-small); color: var(--color-text-muted); margin: var(--space-1) 0 0 52px; }
.upload-progress { font-size: var(--font-size-small); color: var(--color-info-text); background: var(--color-info-bg); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-2); }
.upload-progress progress { width: 100%; height: 8px; }

/* 작업 폴더 */
.folder-panel { width: var(--folder-panel-width); flex: none; border-left: 1px solid var(--color-border); background: var(--color-surface); display: flex; flex-direction: column; min-height: 0; }
.folder-panel .folder-body { padding: var(--space-4); overflow-y: auto; flex: 1; }
.folder-head { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--color-border); min-height: var(--header-min-height); }
.folder-head h2 { margin: 0; flex: 1; }
.tree { list-style: none; margin: 0; padding: 0; }
.tree .tree { padding-left: var(--space-4); border-left: 1px solid var(--color-border); margin-left: var(--space-2); }
.tree-item { padding: var(--space-1) 0; }
.tree-toggle { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: var(--control-min-height); padding: 0 var(--space-2); border: 0; background: none; color: inherit; font: inherit; font-weight: 500; text-align: left; cursor: pointer; border-radius: var(--radius-md); }
.tree-toggle:hover { background: var(--color-surface-muted); }
.tree-file { display: grid; grid-template-columns: 1fr auto; gap: var(--space-1) var(--space-2); align-items: center; padding: var(--space-1) var(--space-2); }
.tree-file .fname { overflow-wrap: anywhere; font-weight: 500; }
.breadcrumb { display: flex; flex-wrap: wrap; gap: var(--space-1); align-items: center; margin: var(--space-3) 0; font-size: var(--font-size-small); }
@media (max-width: 1023px) { .folder-panel { position: fixed; inset: 0; width: 100%; z-index: var(--z-overlay); border: 0; } }

/* 도움말 */
.article { max-width: var(--article-max-width); margin-inline: auto; }
.article h1 { font-size: var(--font-size-title); margin-top: var(--space-4); }
.article h2 { margin-top: var(--space-6); } .article ul, .article ol { padding-left: var(--space-6); }
.article pre { padding: var(--space-3); background: var(--color-surface-muted); border-radius: var(--radius-md); overflow-x: auto; font: .875rem/1.5 var(--font-mono); }
.edit-grid { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .edit-grid { grid-template-columns: 1fr 1fr; } }
.tabs { display: flex; gap: var(--space-1); margin-bottom: var(--space-3); }
.tabs [aria-selected="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }
.preview-box { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); background: var(--color-surface); min-height: 200px; }

/* 운영 */
.admin-layout { display: grid; gap: var(--space-6); grid-template-columns: 1fr; }
@media (min-width: 1024px) { .admin-layout { grid-template-columns: 200px 1fr; } }
.admin-nav { display: none; list-style: none; margin: 0; padding: 0; } .admin-nav a { display: block; padding: var(--space-3); border-radius: var(--radius-md); text-decoration: none; color: var(--color-text); min-height: var(--control-min-height); }
.admin-nav a[aria-current="page"] { background: var(--color-primary); color: var(--color-on-primary); font-weight: 700; }
@media (min-width: 1024px) { .admin-nav { display: block; } .admin-select { display: none; } }
table.table { width: 100%; border-collapse: collapse; } .table th, .table td { text-align: left; padding: var(--space-3); border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table th { font-size: var(--font-size-small); color: var(--color-text-muted); }
.stack { display: grid; gap: var(--space-3); }
@media (max-width: 767px) { .table.responsive thead { display: none; } .table.responsive tr { display: block; border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: var(--space-3); padding: var(--space-2); } .table.responsive td { display: block; border: 0; padding: var(--space-1) var(--space-2); } }
.segmented { display: inline-flex; gap: var(--space-1); margin-bottom: var(--space-3); flex-wrap: wrap; }
.segmented [aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); border-color: var(--color-primary); }


/* uiux-improve 1차: 터치 칸 44px · 간격 · 글자 늘어남 대비 */
.brand { display: inline-flex; align-items: center; min-height: var(--control-min-height); }
.app-header .button { white-space: normal; text-align: center; line-height: 1.2; padding: 6px 12px; }
.back-link, .meta a, .table td a, .article li > a { display: inline-flex; align-items: center; min-height: var(--control-min-height); }
.article li > a { padding: 0; }
.article li { margin: 0; }
.file-chip, .attachment-chip { min-height: var(--control-min-height); margin: var(--space-2) var(--space-2) var(--space-2) 0; }
.attachment-chip button { min-width: 36px; min-height: 36px; margin-right: -8px; border-radius: 50%; }
.attachment-chip button:hover { background: var(--color-surface-muted); }
.admin-check { display: flex; gap: var(--space-2); align-items: center; min-height: 48px; padding-right: var(--space-2); }
p, .bubble, .meta, .system-message { text-wrap: pretty; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* uiux-improve 2차: 운영 화면 링크 폭 44px · 위아래 간격 · 가장자리 48px */
.meta a { min-width: 44px; justify-content: center; padding: 0 var(--space-2); margin: 0 calc(-1 * var(--space-2)); }
.card .meta { margin-bottom: var(--space-2); }
.card details { margin-top: var(--space-2); }
.card details summary { min-height: 48px; }
.table td a { min-height: 48px; }

/* 다중 작업자: 닉네임·참가자·입장 안내·@일꾼 */
.heading-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.chip-button { display: inline-flex; align-items: center; min-height: var(--control-min-height); padding: 0 var(--space-3); border: 1px solid var(--color-control-border); border-radius: 999px; background: var(--color-surface); color: var(--color-text); font: inherit; font-size: var(--font-size-small); cursor: pointer; }
.chip-button[aria-expanded="true"] { background: var(--color-info-bg); color: var(--color-info-text); border-color: var(--color-info-text); }
.members-panel { flex: none; max-height: 42vh; overflow: auto; padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--color-border); background: var(--color-surface-muted); }
.members-panel p { margin: 0; }
.member-list { list-style: none; margin: var(--space-2) 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.member-list li { display: flex; align-items: center; gap: var(--space-2); min-height: 32px; }
.member-name { font-weight: 600; overflow-wrap: anywhere; }
.member-dot { flex: none; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-text-muted); }
.member-dot[data-on="1"] { background: var(--color-success-text); border-color: var(--color-success-text); }
.chip-tag { padding: 0 var(--space-2); border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface); font-size: var(--font-size-small); }
.welcome-banner { flex: none; padding: var(--space-3) var(--space-4); background: var(--color-info-bg); color: var(--color-info-text); border-bottom: 1px solid var(--color-border); max-height: 38vh; overflow: auto; }
.welcome-banner p { margin: var(--space-1) 0; }
.welcome-banner ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.welcome-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.welcome-nick strong { font-size: 1.15em; }
.msg-other { align-self: flex-start; align-items: flex-start; }
.msg-other .bubble { background: var(--color-surface-muted); }
.mention-btn { margin-bottom: var(--space-2); }

.room-header, .composer { flex: none; }

/* 토큰 인증 */
.auth-card { max-width: 520px; }
.auth-code-row { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: var(--space-3) 0; }
.auth-code { flex: 1 1 260px; min-width: 0; padding: var(--space-3) var(--space-4); border: 2px dashed var(--color-control-border); border-radius: var(--radius-md); background: var(--color-surface-muted); font: 700 1.25rem/1.4 var(--font-mono); letter-spacing: .06em; overflow-wrap: anywhere; user-select: all; }
.auth-status { margin: var(--space-2) 0; font-weight: 600; }
.auth-steps { margin: var(--space-3) 0; padding-left: var(--space-5); }
.auth-input { font-family: var(--font-mono); letter-spacing: .05em; max-width: 420px; }
.session-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.session-list li { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); }
.session-list .button { margin-top: var(--space-2); }
.login-fab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40; display: inline-flex; align-items: center; justify-content: center; min-width: 64px; min-height: var(--control-min-height); padding: 0 var(--space-4); border: 1px solid var(--color-control-border); border-radius: 999px; background: var(--color-surface); color: var(--color-link); font-weight: 600; text-decoration: none; box-shadow: 0 2px 8px rgba(0,0,0,.18); }
.login-fab:hover { background: var(--color-surface-muted); }
.auth-wrap { padding-bottom: calc(var(--control-min-height) + 48px); }   /* 우측 하단 로그인 링크가 내용을 가리지 않게 */
.auth-code { font-size: clamp(.95rem, 4.4vw, 1.25rem); letter-spacing: .04em; }
.chip-danger { color: var(--color-danger-text); border-color: var(--color-danger-text); }
.auth-nick { margin: var(--space-2) 0; }

/* 방 목록의 이용 안내 */
.guide-card { margin: 0 0 var(--space-5); padding: var(--space-1) var(--space-4) var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-info-bg); color: var(--color-info-text); }
.guide-card summary { display: flex; align-items: center; min-height: var(--control-min-height); font-weight: 700; cursor: pointer; }
.guide-card ul { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.guide-card li { margin: var(--space-2) 0; }
.guide-card a { color: inherit; text-decoration: underline; display: inline-flex; align-items: center; min-height: var(--control-min-height); }