* { box-sizing: border-box; }
body { margin: 0; color: var(--ink); background: var(--surface); font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; font-size: var(--font-md); line-height: 1.55; }
button, input, textarea, select { font: inherit; color: inherit; }
button, a, input, textarea, select { -webkit-tap-highlight-color: transparent; }
button { border: 0; cursor: pointer; }
button:disabled { cursor: wait; opacity: .65; }
a { color: inherit; text-decoration: none; }
button, a { transition: background-color 150ms ease, color 150ms ease; }
button:focus-visible, a:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
svg { width: 20px; height: 20px; flex: 0 0 auto; }
h1, h2, h3, p { margin: 0; }
h1 { font-size: var(--font-total); font-weight: 700; letter-spacing: -.02em; line-height: 1.3; }
h2 { font-size: var(--font-lg); line-height: 1.4; font-weight: 700; }
h3 { font-size: var(--font-md); font-weight: 600; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* 셸: 위 헤더 + 왼쪽 메뉴 한 줄 + 본문 */
.shell { min-height: 100vh; display: flex; flex-direction: column; }
.topbar { height: 64px; flex: 0 0 auto; display: flex; align-items: center; padding: 0 28px; background: var(--surface); border-bottom: 1px solid var(--line); }
.brand { min-height: 44px; display: inline-flex; align-items: center; gap: 10px; font-size: var(--font-lg); font-weight: 700; letter-spacing: -.02em; }
.brand img { width: 28px; height: 28px; }
.shell-body { flex: 1; display: grid; grid-template-columns: 264px minmax(0, 1fr); }
.sidebar { padding: 32px 16px; border-right: 1px solid var(--line); background: var(--surface); display: flex; flex-direction: column; }
.channel-profile { display: flex; align-items: center; gap: 12px; padding: 0 8px 24px; margin-bottom: 16px; border-bottom: 1px solid var(--line); min-width: 0; }
.channel-text { min-width: 0; display: grid; }
.channel-text strong { font-size: var(--font-md); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-text small { font-size: var(--font-sm); color: var(--ink-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.channel-icon { display: grid; place-items: center; width: 44px; height: 44px; flex: 0 0 auto; border-radius: 50%; background: var(--channel); color: var(--ink); overflow: hidden; }
.channel-icon svg { width: 22px; height: 22px; }
.channel-icon.has-image { padding: 0; background: var(--surface-sunken); }
.channel-icon.has-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.nav { display: grid; gap: 4px; }
.nav a { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 0 16px; border-radius: var(--radius-small); font-size: var(--font-md); color: var(--ink); }
.nav a:hover { background: var(--surface-soft); }
.nav a.active { background: var(--surface-sunken); font-weight: 700; }
.sidebar-account { display: grid; gap: 8px; margin-top: auto; padding: 24px 8px 0; border-top: 1px solid var(--line); }
.sidebar-account span { overflow: hidden; color: var(--ink-secondary); font-size: var(--font-sm); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-account .btn { width: 100%; }
.sidebar-legal-links, .auth-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 8px; color: var(--ink-muted); font-size: var(--font-xs); }
.sidebar-legal-links a, .auth-legal-links a { min-height: 32px; display: inline-flex; align-items: center; color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sidebar-legal-links span, .auth-legal-links span { display: inline-flex; align-items: center; }
.route-progress { position: fixed; z-index: 100; top: 0; right: 0; left: 0; height: 3px; overflow: hidden; background: var(--primary-soft); pointer-events: none; }
.route-progress::after { display: block; width: 40%; height: 100%; background: var(--primary); animation: route-progress 900ms ease-in-out infinite; content: ''; }
@keyframes route-progress { from { transform: translateX(-100%); } to { transform: translateX(350%); } }
.unread { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--unread); color: var(--surface); font-size: var(--font-xs); font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.content { min-width: 0; width: 100%; max-width: 1240px; padding: 48px 64px 64px; }
.content.room { max-width: none; padding: 24px; }

/* 공용 */
.page-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 32px; }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 12px; }
.section-head h2 { font-size: var(--font-md); }
.section-head p { color: var(--ink-muted); font-size: var(--font-sm); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: var(--radius-small); background: var(--surface-sunken); color: var(--ink-secondary); font-size: var(--font-sm); font-weight: 600; white-space: nowrap; }
.btn:hover { background: var(--line); }
.btn.primary { background: var(--primary-text); color: var(--surface); }
.btn.primary:hover { background: var(--primary-hover); }
.btn.soft { background: var(--primary-soft); color: var(--primary-text); }
.btn.soft:hover { background: var(--surface-sunken); }
.btn.line { background: var(--surface); color: var(--ink); box-shadow: var(--field-ring); }
.btn.line:hover { background: var(--surface-soft); }
.btn.full { width: 100%; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-small); }
.badge { display: inline-flex; gap: 6px; align-items: center; padding: 2px 8px; border-radius: var(--radius-small); font-size: var(--font-xs); font-weight: 600; background: var(--surface-sunken); color: var(--ink-muted); white-space: nowrap; }
.badge.info { color: var(--primary-text); background: var(--primary-soft); }
.badge.success { color: var(--success); background: var(--success-soft); }
.empty { padding: 64px 24px; text-align: center; color: var(--ink-muted); }
.empty h1, .empty h2 { font-size: var(--font-md); font-weight: 600; color: var(--ink-secondary); }
.empty p { margin: 12px auto 24px; max-width: 42ch; }
.empty svg { width: 32px; height: 32px; margin-bottom: 12px; }
.meta-line { color: var(--ink-muted); font-size: var(--font-xs); margin-top: 8px; }
.eyebrow { color: var(--primary-text); font-size: var(--font-sm); font-weight: 600; }
.amount { font-size: var(--font-total); font-weight: 700; letter-spacing: -.02em; line-height: 1.25; font-variant-numeric: tabular-nums; }
.amount small { font-size: var(--font-md); font-weight: 500; margin-left: 4px; }
input:not([type]), input[type=search] { width: 100%; min-height: 44px; background: var(--surface); border: 0; border-radius: var(--radius-small); box-shadow: var(--field-ring); padding: 8px 14px; font-size: var(--font-sm); }
textarea { width: 100%; min-height: 72px; max-height: 160px; resize: vertical; background: var(--surface); border: 0; border-radius: var(--radius-small); box-shadow: var(--field-ring); padding: 12px 14px; font-size: var(--font-sm); line-height: 1.5; }
textarea::placeholder, input::placeholder { color: var(--ink-muted); }
select { min-height: 44px; border: 0; border-radius: var(--radius-small); background-color: var(--surface); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%234e5968' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m7 10 5 5 5-5'/%3E%3C/svg%3E"); background-position: right 12px center; background-repeat: no-repeat; box-shadow: var(--field-ring); padding: 0 40px 0 14px; font-size: var(--font-sm); appearance: none; }
/* 입력칸 포커스는 외곽선 대신 테두리 1px 만 진해진다(카카오 비즈니스 입력칸처럼 조용하게). 기본 입력칸 규칙보다 뒤에 둬야 이긴다. */
input:focus, textarea:focus, select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
dt { color: var(--ink-muted); }
dd { margin: 0; font-weight: 500; text-align: right; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* 내 채팅 목록 */
.tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); border: 1px solid var(--line); margin-bottom: 24px; }
.tabs .tab-count { color: var(--ink-muted); font-size: var(--font-xs); font-weight: 400; font-variant-numeric: tabular-nums; }
.tabs a, .tabs button { min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 12px; background: var(--tab-idle); color: var(--ink-muted); font-size: var(--font-md); text-align: center; }
.tabs a + a, .tabs button + button { border-left: 1px solid var(--line); }
.tabs a[aria-current], .tabs button[aria-current] { background: var(--surface); color: var(--ink); font-weight: 700; }
.tabs a:not([aria-current]):hover, .tabs button:not([aria-current]):hover { color: var(--ink); }
.list-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
/* 메시지 채널 표시: 카카오 노랑 K, 네이버 초록 N. 수신함은 하나이고 채널은 표시·필터로만 나눈다. */
.channel-mark { width: 18px; height: 18px; flex: 0 0 auto; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: 800; line-height: 1; }
.channel-mark.kakao { background: var(--channel); color: #191919; }
.channel-mark.navertalk { background: var(--channel-naver); color: #fff; }
.avatar-wrap { position: relative; flex: 0 0 auto; display: inline-flex; }
.channel-mark.on-avatar { position: absolute; right: -2px; bottom: -2px; box-shadow: 0 0 0 2px var(--surface); }
.channel-filter { display: flex; flex-wrap: wrap; gap: 8px; }
.channel-filter a { min-height: 40px; padding: 0 14px; display: inline-flex; align-items: center; gap: 6px; border-radius: 20px; box-shadow: var(--field-ring); font-size: var(--font-sm); color: var(--ink-secondary); background: var(--surface); }
.channel-filter a[aria-current] { background: var(--ink); color: var(--surface); box-shadow: none; font-weight: 700; }
.channel-filter a[aria-current] .tab-count { color: inherit; opacity: .7; }
.channel-filter .tab-count { color: var(--ink-muted); font-size: var(--font-xs); font-variant-numeric: tabular-nums; }
.channel-tag { display: inline-flex; align-items: center; gap: 6px; }
.settings-subhead { padding: 28px 0 4px; }
.settings-subhead h2 { margin: 0; font-size: var(--font-lg); }
.settings-subhead p { margin: 6px 0 0; color: var(--ink-muted); font-size: var(--font-sm); }
.channel-row h2, .channel-section h2 { display: flex; align-items: center; gap: 8px; }
.tag.on { background: var(--success-soft); color: var(--success); }
/* 왼쪽 위 워크스페이스 전환기. 채널 프로필 자리를 눌러 연다. */
.workspace-switch { position: relative; }
.workspace-switch > summary { list-style: none; cursor: pointer; border-radius: var(--radius-small); }
.workspace-switch > summary::-webkit-details-marker { display: none; }
.workspace-switch > summary:hover .channel-text strong { text-decoration: underline; text-underline-offset: 3px; }
.workspace-chevron { margin-left: auto; color: var(--ink-muted); display: inline-flex; transition: transform .15s; }
.workspace-chevron svg { width: 18px; height: 18px; transform: rotate(90deg); }
.workspace-switch[open] .workspace-chevron { transform: rotate(180deg); }
.workspace-menu { position: absolute; z-index: 20; top: calc(100% - 16px); left: 0; right: 0; min-width: 220px; padding: 8px; background: var(--surface); border-radius: var(--radius-control); box-shadow: 0 8px 24px rgb(0 0 0 / 12%), var(--field-ring); display: grid; gap: 2px; }
.workspace-menu-title { margin: 4px 8px 6px; font-size: var(--font-xs); color: var(--ink-muted); }
.workspace-item { min-height: 44px; padding: 0 10px; display: flex; align-items: center; gap: 8px; border-radius: var(--radius-small); font-size: var(--font-sm); color: var(--ink); text-align: left; background: none; width: 100%; }
.workspace-item:hover { background: var(--surface-soft); }
.workspace-item[aria-current] { background: var(--surface-sunken); font-weight: 700; }
.workspace-item .workspace-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.workspace-item .tab-count { color: var(--ink-muted); font-size: var(--font-xs); font-variant-numeric: tabular-nums; }
.workspace-item.add { color: var(--primary-text); border-top: 1px solid var(--line); border-radius: 0 0 var(--radius-small) var(--radius-small); margin-top: 4px; }
.page-lead { margin: -8px 0 24px; color: var(--ink-muted); font-size: var(--font-sm); line-height: 1.6; }
.form-actions { display: flex; justify-content: flex-end; gap: 8px; }
.workspace-name { flex: 0 1 360px; }
.channel-links { display: grid; gap: 2px; padding: 0 0 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line); }
.channel-link { display: flex; align-items: center; gap: 10px; min-height: 40px; padding: 0 16px; border-radius: var(--radius-small); font-size: var(--font-sm); color: var(--ink-secondary); }
.channel-link:hover { background: var(--surface-soft); }
.channel-link-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--line); flex: 0 0 auto; }
.status-dot.on { background: var(--online); }
.search { position: relative; width: 100%; max-width: 360px; }
.search input { padding-right: 44px; }
.search svg { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--ink-muted); pointer-events: none; }
.list-item { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; align-items: center; gap: 16px; min-height: 96px; padding: 20px 8px; border-bottom: 1px solid var(--line); }
.list-item:hover { background: var(--surface-soft); }
.avatar { width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%; overflow: hidden; background: var(--surface-sunken); display: grid; place-items: center; font-size: var(--font-lg); font-weight: 600; color: var(--ink-muted); }
.avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar.small { width: 40px; height: 40px; font-size: var(--font-sm); }
.list-main { min-width: 0; }
.list-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.list-title strong { font-size: var(--font-name); font-weight: 700; line-height: 1.35; }
.list-flag { font-size: var(--font-xs); color: var(--ink-muted); }
.list-flag::before { content: '· '; }
.list-subtitle { margin-top: 2px; color: var(--ink-muted); font-size: var(--font-row); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.list-meta { display: grid; justify-items: end; gap: 4px; padding-right: 32px; }
.list-meta time { color: var(--ink-muted); font-size: var(--font-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
.list-meta small { color: var(--ink-muted); font-size: var(--font-xs); white-space: nowrap; }

/* 대화방 */
.chat-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 24px; align-items: start; }
.chat-panel { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: 1px solid var(--chat-line); background: var(--chat-bg); }
.chat-layout .chat-panel { height: calc(100vh - 64px - 48px); min-height: 560px; }
.chat-top { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 16px 20px; background: var(--chat-bg); border-bottom: 1px solid var(--chat-line); }
.chat-who { display: flex; align-items: center; gap: 12px; min-width: 0; }
.chat-who .avatar { width: 48px; height: 48px; font-size: var(--font-md); background: var(--surface-soft); }
.chat-who-text { min-width: 0; }
.chat-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.chat-name h1 { font-size: var(--font-md); font-weight: 700; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tag { flex: 0 0 auto; padding: 0 6px; border-radius: 4px; background: var(--date-pill); color: var(--ink); font-size: var(--font-xs); font-weight: 700; line-height: 20px; }
.chat-state { display: flex; align-items: center; gap: 6px; font-size: var(--font-sm); color: var(--ink-muted); }
.chat-state::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }
.chat-state.live::before { background: var(--online); }
.chat-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.chat-actions .btn { padding: 0 14px; }
.btn.on { background: var(--ink); color: var(--surface); }
.btn.on:hover { background: var(--ink-secondary); }
.chat-store { display: flex; align-items: center; gap: 12px; }
.messages { flex: 1; min-height: 0; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; gap: 4px; background: var(--chat-bg); }
.date-divider { display: flex; justify-content: center; margin: 16px 0 8px; }
.date-divider span { padding: 4px 16px; border-radius: 999px; background: var(--date-pill); color: var(--ink); font-size: var(--font-sm); }
.message { display: flex; align-items: flex-start; gap: 8px; max-width: 80%; align-self: flex-start; }
.message.run-start { margin-top: 12px; }
.date-divider + .message { margin-top: 0; }
.message.assistant, .message.manager { align-self: flex-end; }
.message-body { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.message.assistant .message-body, .message.manager .message-body { align-items: flex-end; }
.avatar-gap { width: 40px; flex: 0 0 auto; }
.message-label { margin-bottom: 4px; font-size: var(--font-sm); color: var(--ink-muted); }
.bubble-row { display: flex; align-items: flex-end; gap: 6px; max-width: 100%; }
.message.assistant .bubble-row, .message.manager .bubble-row { flex-direction: row-reverse; }
.bubble-row time { flex: 0 0 auto; font-size: var(--font-xs); color: var(--ink-muted); white-space: nowrap; font-variant-numeric: tabular-nums; }
.bubble { position: relative; min-width: 0; padding: 9px 14px; background: var(--surface); border-radius: 14px; font-size: var(--font-row); line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.message.assistant .bubble, .message.manager .bubble { background: var(--bubble-ours); }
/* 묶음의 첫 말풍선에만 카카오식 꼬리 */
.message.run-start .bubble::before { content: ''; position: absolute; top: 0; left: -6px; border-top: 10px solid var(--surface); border-left: 10px solid transparent; }
.message.run-start.assistant .bubble::before, .message.run-start.manager .bubble::before { left: auto; right: -6px; border-top-color: var(--bubble-ours); border-left: 0; border-right: 10px solid transparent; }
.message.system { align-self: center; max-width: 100%; margin: 8px 0; }
.message.system p { font-size: var(--font-sm); color: var(--ink-muted); text-align: center; }
.message-link { width: 280px; max-width: 100%; margin-top: 6px; padding: 16px; background: var(--surface); border-radius: 14px; }
.message-link .link-label { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: var(--primary-text); font-size: var(--font-xs); font-weight: 600; margin-bottom: 8px; }
.message-link .link-label svg { width: 16px; height: 16px; }
.message-link > div { font-size: var(--font-sm); }
.message-link strong { display: block; margin-top: 2px; font-size: var(--font-lg); font-variant-numeric: tabular-nums; }
.message-link .btn { margin-top: 12px; width: 100%; }
.message-link small { display: block; margin-top: 8px; color: var(--ink-muted); font-size: var(--font-xs); }

/* 입력창: 카카오처럼 테두리 없는 흰 영역 + 아래 줄에 답변 칩과 전송 */
.composer { flex: 0 0 auto; padding: 10px 12px; background: var(--surface); border-top: 1px solid var(--chat-line); }
.composer-form { display: flex; align-items: flex-end; gap: 8px; }
/* 한 줄에서 시작해 쓰는 만큼(최대 5줄) 늘어난다. */
.composer textarea { min-height: 44px; height: 44px; max-height: 132px; field-sizing: content; box-shadow: none; background: var(--surface-soft); border-radius: 22px; padding: 11px 16px; font-size: var(--font-sm); line-height: 22px; resize: none; }
.composer .btn.send { min-height: 44px; border-radius: 22px; }
.composer textarea:focus, .composer textarea:focus-visible { outline: none; box-shadow: none; }
.composer textarea:focus { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.composer-state { display: flex; align-items: flex-start; gap: 8px; margin: 0 4px 8px; font-size: var(--font-xs); line-height: 1.6; color: var(--ink-muted); }
.composer-state .dot { margin-top: 6px; }
.composer-state.warn { padding: 8px 12px; margin: 0 0 8px; border-radius: var(--radius-small); background: var(--danger-soft); }
.inline-icon { display: inline-grid; place-items: center; width: 20px; height: 20px; margin: 0 1px; vertical-align: -5px; border-radius: 6px; background: var(--surface); box-shadow: var(--field-ring); color: var(--ink); }
.inline-icon svg { width: 13px; height: 13px; }
.composer-state .muted { color: var(--ink-muted); }
.composer-state .dot { flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--line); }
.composer-state.ok .dot { background: var(--online); }
.composer-state.warn { color: var(--ink); }
.composer-state.warn .dot { background: var(--danger); }
.pending-ghost { align-self: flex-end; }
.suggestions { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.suggestion { min-height: 44px; padding: 0 12px; display: inline-flex; align-items: center; background: var(--surface); border-radius: 22px; box-shadow: var(--field-ring); font-size: var(--font-sm); color: var(--ink-secondary); text-align: left; }
.suggestion:hover { background: var(--surface-soft); }
.suggestion.edit { box-shadow: none; color: var(--ink-muted); text-decoration: underline; text-underline-offset: 3px; }
.btn.send { flex: 0 0 auto; min-width: 72px; background: var(--primary-text); color: var(--surface); }
.btn.send:hover { background: var(--primary-hover); }
.composer form:has(textarea:placeholder-shown) .btn.send { background: var(--surface-sunken); color: var(--ink-muted); }
.composer-status { margin-top: 4px; font-size: var(--font-xs); color: var(--ink-muted); }
.composer-status:empty { margin: 0; }
.composer-label { display: block; font-size: var(--font-xs); color: var(--ink-muted); margin-bottom: 8px; }
.input-row { display: flex; align-items: flex-end; gap: 12px; }
.composer-foot { display: flex; justify-content: space-between; gap: 16px; color: var(--ink-muted); font-size: var(--font-xs); margin-top: 4px; }

/* 주문 패널: 그림자 없이 가는 선만 */
.order-aside { display: grid; gap: 16px; }
.order-card { padding: 20px; }
.order-card .section-head { margin-bottom: 16px; }
.order-card h2 { font-size: var(--font-md); }
.order-fields { margin: 0; display: grid; gap: 12px; }
.order-fields > div { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; font-size: var(--font-sm); }
.order-total { padding-top: 16px; margin-top: 16px; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.order-total span { font-size: var(--font-sm); color: var(--ink-muted); }
.order-card .amount { font-size: var(--font-title); }
.order-card .btn { margin-top: 12px; }
.order-card .btn + .btn { margin-top: 8px; }
.timeline { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 16px; }
.timeline li { display: flex; align-items: flex-start; gap: 10px; }
.timeline svg { color: var(--ink-muted); margin-top: 2px; }
.timeline li.done svg { color: var(--primary-text); }
.timeline p { font-size: var(--font-sm); font-weight: 600; }
.timeline small { display: block; font-size: var(--font-xs); color: var(--ink-muted); margin-top: 2px; }

/* 자주 쓰는 답변 · 결제 링크 · 지식맵 */
.preset-form label, .preset-row label, .settings-panel label { display: grid; gap: 6px; font-size: var(--font-sm); color: var(--ink-muted); }
.preset-list, .link-list { border: 0; border-top: 1px solid var(--ink); border-radius: 0; }
.preset-form { margin-bottom: 32px; display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: end; }
/* 이름(input)과 문구(textarea)가 같은 44px 에서 시작한다. 문구가 길면 문구 칸만 내용만큼 늘어난다. */
.preset-form input, .preset-row input, .preset-form textarea, .preset-row textarea { min-height: 44px; }
.preset-form textarea, .preset-row textarea { height: 44px; padding: 11px 14px; line-height: 22px; field-sizing: content; max-height: 200px; }
.preset-row { display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; gap: 12px; align-items: center; min-height: 72px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.preset-row.editing { align-items: end; background: var(--surface-soft); margin: 0 -16px; padding: 14px 16px; }
.preset-label { font-size: var(--font-md); overflow-wrap: anywhere; }
.preset-text { margin: 0; color: var(--ink); font-size: var(--font-sm); line-height: 1.6; white-space: pre-wrap; overflow-wrap: anywhere; }
.preset-actions { display: flex; gap: 8px; }
.link-row { display: grid; grid-template-columns: minmax(0, 1fr) 160px 96px 120px; gap: 24px; align-items: center; padding: 20px 8px; border-bottom: 1px solid var(--line); }
.link-row .amount { font-size: var(--font-lg); }
.link-row small { display: block; font-size: var(--font-sm); color: var(--ink-muted); margin-top: 2px; }
.link-row .badge { justify-self: start; }
.settings-panel { padding: 24px; display: grid; gap: 20px; }
.settings-panel .btn { justify-self: start; }
#knowledge-status, #preset-status { color: var(--ink-muted); font-size: var(--font-sm); }

/* 결제 화면 */
.pay-shell { max-width: 520px; margin: 0 auto; padding: 32px 24px 48px; }
.pay-brand { display: flex; align-items: center; justify-content: space-between; margin-bottom: 32px; gap: 16px; }
.pay-brand .brand { font-size: var(--font-md); }
.pay-card { padding: 32px; }
.pay-heading { margin-bottom: 32px; }
.pay-heading h1 { font-size: var(--font-xl); margin: 12px 0 8px; }
.pay-card .order-fields { gap: 16px; }
.pay-card .order-total { margin: 24px 0 32px; padding-top: 24px; }
.pay-method { padding: 16px; background: var(--primary-soft); border-radius: var(--radius-small); color: var(--primary-text); margin-bottom: 24px; display: flex; align-items: center; gap: 12px; font-size: var(--font-sm); }
.pay-disclaimer { margin-top: 16px; color: var(--ink-muted); font-size: var(--font-xs); text-align: center; }
.pay-status { padding: 8px 0 32px; text-align: center; }
.pay-status svg { width: 48px; height: 48px; color: var(--success); margin-bottom: 16px; }
.pay-status h1 { font-size: var(--font-xl); }
.pay-status p { color: var(--ink-muted); font-size: var(--font-sm); margin-top: 12px; }

/* 고객 메시지 테스트 */
.customer-shell { max-width: 1100px; margin: 0 auto; padding: 32px 24px 48px; }
.customer-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 24px; }
.customer-toolbar .btn svg { transform: rotate(180deg); }
.customer-context { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 24px; }
.customer-context h1 { font-size: var(--font-title); }
.customer-context label { display: grid; gap: 6px; min-width: 240px; color: var(--ink-muted); font-size: var(--font-sm); }
.customer-layout { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 24px; align-items: start; }
.customer-messages { height: 440px; flex: 0 0 auto; }
.customer-layout .composer .suggestions { margin-bottom: 12px; }
.customer-layout .composer textarea { box-shadow: var(--field-ring); padding: 10px 12px; }
.customer-guide { padding: 20px; }
.catalog-mini { margin: 16px 0 0; display: grid; gap: 12px; }
.catalog-mini > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--font-sm); }
.catalog-mini strong { font-weight: 500; white-space: nowrap; font-variant-numeric: tabular-nums; }
.customer-guide .btn { margin-top: 24px; }

.initial-state { padding: 80px 24px; text-align: center; color: var(--ink-muted); }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 10; max-width: calc(100% - 48px); padding: 12px 24px; background: var(--ink); color: var(--surface); border-radius: var(--radius-small); font-size: var(--font-sm); }

/* 계정 화면은 앱 셸을 건너뛰고 중앙 폼만 보여 준다. */
.auth-shell { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px; background: var(--surface-soft); }
.auth-card { width: min(100%, 400px); padding: 32px; border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); }
.auth-brand { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; font-size: var(--font-lg); font-weight: 700; }
.auth-brand img { width: 32px; height: 32px; }
.auth-card h1 { margin-bottom: 24px; }
.auth-form { display: grid; gap: 16px; }
.auth-form label { display: grid; gap: 8px; color: var(--ink-secondary); font-size: var(--font-sm); font-weight: 600; }
.auth-form input { width: 100%; min-height: 44px; padding: 8px 14px; border: 0; border-radius: var(--radius-small); background: var(--surface); box-shadow: var(--field-ring); }
.auth-form input:focus { outline: 2px solid var(--primary-text); outline-offset: 1px; }
.auth-form small { color: var(--ink-muted); font-size: var(--font-xs); font-weight: 400; }
.auth-form .terms-agree { grid-template-columns: 24px minmax(0, 1fr); align-items: start; gap: 8px; min-height: 44px; padding: 8px 0; font-weight: 400; line-height: 1.6; }
.auth-form .terms-agree input { appearance: none; width: 24px; min-height: 24px; height: 24px; padding: 0; margin: 0; border: 1px solid var(--ink-muted); border-radius: 4px; box-shadow: none; }
.auth-form .terms-agree input:checked { border-color: var(--primary-text); background: var(--primary-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.auth-form .terms-agree input:focus-visible { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.terms-agree a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.auth-form .btn { margin-top: 8px; }
.auth-form .btn:disabled { cursor: not-allowed; background: var(--surface-sunken); color: var(--ink-muted); }
.auth-status { min-height: 24px; margin-top: 12px; color: var(--danger); font-size: var(--font-sm); }
.auth-switch { display: block; min-height: 44px; padding: 10px 0; text-align: center; color: var(--primary-text); font-size: var(--font-sm); font-weight: 600; }
.auth-legal-links { margin-top: 8px; }

/* 약관·개인정보 처리방침: 인증 화면과 같은 바탕 위에 읽기 폭만 제한한다. */
.legal-shell { min-height: 100vh; padding: 48px 16px 80px; background: var(--surface-soft); }
.legal-document { width: min(100%, 720px); margin: 0 auto; padding: 40px; border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); color: var(--ink-secondary); font-size: var(--font-md); line-height: 1.7; overflow-wrap: anywhere; }
.legal-brand { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin-bottom: 24px; color: var(--ink); font-size: var(--font-lg); font-weight: 700; }
.legal-brand img { width: 32px; height: 32px; }
.legal-document h1 { margin: 0 0 8px; color: var(--ink); font-size: var(--font-title); line-height: 1.3; }
.legal-document h2 { margin: 40px 0 12px; color: var(--ink); font-size: var(--font-lg); line-height: 1.4; }
.legal-document p { margin: 0 0 12px; }
.legal-document ol, .legal-document ul { margin: 8px 0 16px; padding-left: 24px; }
.legal-document li + li { margin-top: 8px; }
.legal-effective { color: var(--ink-muted); font-size: var(--font-sm); }
.legal-placeholder { padding: 16px; border-radius: var(--radius-small); background: var(--primary-soft); color: var(--ink); }
.legal-table-wrap { max-width: 100%; overflow-x: auto; margin: 16px 0 24px; }
.legal-document table { width: 100%; min-width: 640px; border-collapse: collapse; font-size: var(--font-sm); line-height: 1.6; }
.legal-document th, .legal-document td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.legal-document th { background: var(--surface-sunken); color: var(--ink); font-weight: 600; }
.legal-document a { color: var(--primary-text); text-decoration: underline; text-underline-offset: 3px; }
.legal-footer { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); font-size: var(--font-sm); }
@media (max-width: 600px) {
  .legal-shell { padding: 0; background: var(--surface); }
  .legal-document { padding: 32px 20px 64px; border-radius: 0; box-shadow: none; }
  .legal-document h1 { font-size: var(--font-xl); }
}

@media (max-width: 1150px) {
  .shell-body { grid-template-columns: 220px minmax(0, 1fr); }
  .content { padding: 40px 32px 48px; }
  .chat-layout { grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; }
  .link-row { grid-template-columns: minmax(0, 1fr) 120px 80px; gap: 16px; }
  .link-row .btn { grid-column: 1 / -1; justify-self: end; }
}
@media (max-width: 900px) {
  .shell-body { display: block; }
  .sidebar { padding: 12px 16px; border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
  .channel-profile { padding: 0; margin: 0; border: 0; }
  .channel-links { display: none; }
  .workspace-menu { top: 100%; }
  .workspace-name { flex-basis: 100%; }
  .nav { display: flex; flex-wrap: wrap; gap: 4px; }
  .nav a { min-height: 44px; padding: 0 12px; font-size: var(--font-sm); }
  .sidebar-account { display: flex; align-items: center; gap: 8px; margin: 0 0 0 auto; padding: 0; border: 0; }
  .sidebar-account .btn { width: auto; }
  .chat-layout { display: flex; flex-direction: column; }
  .chat-layout > * { width: 100%; }
  .chat-layout .chat-panel { height: 80vh; min-height: 520px; }
}
@media (max-width: 700px) {
  .topbar { height: 56px; padding: 0 16px; }
  .brand { font-size: var(--font-md); }
  .channel-icon { width: 36px; height: 36px; }
  .content { padding: 24px 16px 40px; }
  .content.room { padding: 12px 0 32px; }
  .content.room .order-aside { padding: 0 16px; }
  .page-head { gap: 12px; margin-bottom: 20px; }
  h1 { font-size: var(--font-xl); }
  .page-head .btn { padding: 0 12px; }
  .tabs a, .tabs button { font-size: var(--font-sm); }
  .search { max-width: none; }
  .list-item { grid-template-columns: 48px minmax(0, 1fr) auto; gap: 12px; padding: 16px 0; min-height: 80px; }
  .list-item .avatar { width: 48px; height: 48px; }
  .list-title strong { font-size: var(--font-md); }
  .list-subtitle { font-size: var(--font-sm); }
  .list-meta { padding-right: 0; align-self: start; padding-top: 2px; }
  .list-meta time { font-size: var(--font-xs); }
  .chat-panel { border-left: 0; border-right: 0; }
  .chat-top { padding: 12px 16px; flex-wrap: wrap; }
  .chat-actions { width: 100%; justify-content: flex-start; }
  .messages { padding: 12px; }
  .message { max-width: 92%; }
  .composer .suggestions { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .composer .suggestion { flex: 0 0 auto; }
  .preset-form, .preset-row { grid-template-columns: minmax(0, 1fr); }
  .preset-row { align-items: start; }
  .preset-row.editing { margin: 0; }
  .link-row { grid-template-columns: minmax(0, 1fr) auto; padding: 20px 0; gap: 12px; }
  .link-row .badge { grid-column: 1; }
  .link-row .btn { grid-column: 2; grid-row: 2; }
  .pay-card { padding: 24px; }
  .pay-shell, .customer-shell { padding: 24px 16px 40px; }
  .customer-toolbar, .customer-context { align-items: stretch; flex-direction: column; }
  .customer-context label { min-width: 0; }
  .customer-layout { display: flex; flex-direction: column; }
  .customer-layout > * { width: 100%; }
  .customer-messages { height: 360px; }
  .input-row { gap: 8px; }
  .input-row .btn { width: 48px; padding: 0; }
  .input-row .btn span { display: none; }
  .auth-shell { padding: 24px 16px; }
  .auth-card { padding: 24px; }
  .sidebar-account { width: 100%; max-width: 100%; flex-wrap: wrap; margin-left: 0; }
  .sidebar-account > span { flex: 1 1 0; min-width: 0; }
  .sidebar-legal-links { flex: 1 0 100%; justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; scroll-behavior: auto !important; }
  .route-progress::after { width: 100%; animation: none; }
}
.knowledge-guide { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; padding-bottom: 20px; border-bottom: 1px solid var(--ink); }
.knowledge-guide p { margin: 0 0 12px; font-size: var(--font-md); }
.knowledge-guide dl { margin: 0; display: grid; gap: 6px; font-size: var(--font-sm); }
.knowledge-guide dl div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.knowledge-guide dt { color: var(--ink-muted); }
.knowledge-guide dd { margin: 0; text-align: left; font-weight: 400; overflow-wrap: anywhere; }
.knowledge-actions { display: flex; gap: 8px; flex: 0 0 auto; }
.knowledge-upload { cursor: pointer; }
.knowledge-upload:has(input:focus-visible) { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.knowledge-files ul { list-style: none; margin: 0; padding: 0; }
.knowledge-files li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.knowledge-files li div { display: grid; gap: 4px; min-width: 0; }
.knowledge-files strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--font-md); }
.knowledge-files small { color: var(--ink-muted); font-size: var(--font-sm); }
@media (max-width: 760px) {
  .knowledge-guide { flex-direction: column; align-items: stretch; }
  .knowledge-actions .btn { flex: 1; justify-content: center; }
}
/* 자주 쓰는 답변은 넓은 화면에선 오른쪽 열에 쭉 나열하고, 오른쪽 열이 아래로 내려가는 좁은 화면에선 입력창 버튼줄로 둔다. */
.preset-panel .section-head a { color: var(--ink-muted); font-size: var(--font-xs); }
.preset-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.preset-chips .suggestion { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.composer-presets { display: none; margin-top: 8px; }
@media (max-width: 900px) {
  .composer-presets { display: flex; }
  .preset-panel { display: none; }
}
.delivery { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.delivery .spinner { width: 14px; height: 14px; margin: 0 4px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--ink-muted); animation: delivery-spin .8s linear infinite; }
@keyframes delivery-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .delivery .spinner { animation: none; border-top-color: var(--ink); } }
.delivery-action { display: inline-grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 50%; background: var(--surface); color: var(--ink); box-shadow: var(--field-ring); cursor: pointer; }
.delivery-action svg { width: 14px; height: 14px; }
.delivery-action:hover { background: var(--surface-soft); }
/* X(중단·삭제)는 배경 없이 아이콘만. */
.delivery-action[data-cancel-reply] { background: transparent; box-shadow: none; color: var(--ink-muted); }
.delivery-action[data-cancel-reply]:hover { background: transparent; color: var(--ink); }
.delivery.failed .delivery-action.retry { color: var(--surface); background: var(--danger); box-shadow: none; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 0; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); margin-bottom: 40px; }
.setting-row h2 { margin: 0 0 6px; font-size: var(--font-md); }
.setting-row p { margin: 0; color: var(--ink-muted); font-size: var(--font-sm); line-height: 1.6; max-width: 640px; }
.retention-setting > div { min-width: 0; }
.retention-setting small { display: block; margin-top: 6px; color: var(--ink-muted); font-size: var(--font-xs); line-height: 1.6; }
.retention-setting select { min-width: 112px; }
.settings-subhead { margin: 0 0 16px; font-size: var(--font-lg); }
.switch { flex: 0 0 auto; position: relative; width: 52px; height: 32px; padding: 0; border: 0; border-radius: 16px; background: var(--line); cursor: pointer; transition: background .15s; }
.switch span { position: absolute; top: 4px; left: 4px; width: 24px; height: 24px; border-radius: 50%; background: var(--surface); box-shadow: 0 1px 2px rgb(0 0 0 / 20%); transition: transform .15s; }
.switch[aria-checked="true"] { background: var(--primary); }
.switch[aria-checked="true"] span { transform: translateX(20px); }
@media (prefers-reduced-motion: reduce) { .switch, .switch span { transition: none; } }

/* 설정 · 답변 LLM: 커머스 채널 줄과 같은 hairline 절. 연결 방식은 지식맵과 같은 .tabs 세그먼트를 쓴다. */
.tabs button { width: 100%; border: 0; border-radius: 0; font: inherit; cursor: pointer; }
/* 커머스 채널 줄의 아래 hairline 을 그대로 경계로 쓴다(선을 두 번 긋지 않는다). */
.llm-result { margin: 12px 0 0; min-height: 22px; font-size: var(--font-sm); color: var(--ink-muted); overflow-wrap: anywhere; }
.llm-panel .llm-result { margin: 0; }
.llm-result.ok { color: var(--success); }
.llm-result.err { color: var(--danger); }
@media (max-width: 700px) {

}
/* ── 설정류 화면(자주 쓰는 답변 · 결제 링크 · 지식맵 · 설정)은 읽기 좋은 폭으로 제한한다. 채팅 목록·상담 화면은 넓게. ── */
.page-narrow { max-width: 960px; }
/* 설정 묶음 = 위 굵은 선 + 설정 줄(왼쪽 설명 · 오른쪽 조작)들. */
.settings-group { border-top: 1px solid var(--ink); margin-bottom: 40px; }
.settings-group .setting-row { border-top: 0; margin-bottom: 0; }
.settings-policy-links { flex: 0 0 auto; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; color: var(--primary-text); font-size: var(--font-sm); font-weight: 600; }
.settings-policy-links a { min-height: 44px; display: inline-flex; align-items: center; text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 700px) {
  .settings-policy { align-items: flex-start; flex-direction: column; }
  .settings-policy-links { justify-content: flex-start; }
}
/* 작은 세그먼트(연결 방식 고르기): 오른쪽에 붙는 조작 */
.segmented { flex: 0 0 auto; display: inline-flex; padding: 3px; gap: 2px; border-radius: 12px; background: var(--tab-idle); }
.segmented button { min-height: 38px; padding: 0 14px; border: 0; border-radius: 9px; background: transparent; color: var(--ink-muted); font: inherit; font-size: var(--font-sm); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.segmented button[aria-selected="true"] { background: var(--surface); color: var(--ink); font-weight: 700; box-shadow: 0 1px 2px rgb(0 0 0 / 8%); }
.segmented .tab-count { color: var(--primary-text); font-size: var(--font-xs); font-weight: 600; }
.llm-section, .channel-section { border-bottom: 1px solid var(--line); }
.llm-section .llm-head, .channel-section .llm-head { border-bottom: 0; padding-bottom: 12px; }
.llm-panel { display: grid; gap: 12px; padding: 4px 0 20px; }
.llm-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; }
.llm-line { margin: 0; font-size: var(--font-sm); line-height: 1.6; overflow-wrap: anywhere; min-width: 0; }
.llm-note { margin: 0; color: var(--ink-muted); font-size: var(--font-xs); line-height: 1.6; }
/* 한 줄 입력: 라벨은 입력칸 위에 작게, 입력칸·버튼은 같은 줄 */
.llm-form.inline { display: flex; align-items: flex-end; gap: 8px; }
.llm-form label { display: grid; gap: 6px; min-width: 0; font-size: var(--font-xs); color: var(--ink-muted); }
.llm-form .grow { flex: 1 1 0; }
.llm-form .fixed { flex: 0 0 160px; }
.llm-form input, .llm-form select { width: 100%; min-width: 0; min-height: 44px; }
.llm-form input { background: var(--surface); border: 0; border-radius: var(--radius-small); box-shadow: var(--field-ring); padding: 8px 14px; font-size: var(--font-sm); }
.llm-form select { box-shadow: var(--field-ring); }
.llm-form input:focus, .llm-form select:focus { outline: none; box-shadow: inset 0 0 0 1px var(--ink); }
.llm-actions { flex: 0 0 auto; display: flex; gap: 8px; }
.llm-actions .btn { white-space: nowrap; }
.llm-actions:empty { display: none; }
@media (max-width: 760px) {
  .setting-row.llm-head { flex-direction: column; align-items: stretch; }
  .segmented { display: flex; }
  .segmented button { flex: 1; justify-content: center; padding: 0 8px; }
  .llm-bar { flex-wrap: wrap; }
  .llm-form.inline { flex-direction: column; align-items: stretch; }
  .llm-form.inline .grow, .llm-form.inline .fixed { flex: 0 0 auto; }
  .llm-actions .btn { flex: 1 1 0; }
}

/* 리뷰 관리 */
.review-page { min-width: 0; }
.review-page-head > div:first-child { min-width: 0; }
.review-page-head p { margin-top: 6px; color: var(--ink-muted); font-size: var(--font-sm); }
.review-head-links, .review-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.review-back { display: inline-block; margin-bottom: 6px; color: var(--ink-muted); font-size: var(--font-sm); text-decoration: underline; text-underline-offset: 3px; }
.review-tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: initial; }
.review-tools { display: flex; justify-content: flex-end; margin-bottom: 12px; }
.review-tools label { display: grid; gap: 6px; color: var(--ink-muted); font-size: var(--font-xs); }
.review-list { overflow: hidden; border-top-color: var(--ink); }
.review-row { display: grid; grid-template-columns: 64px minmax(0, 1fr) 136px; gap: 16px; align-items: center; min-height: 104px; padding: 20px 16px; border-bottom: 1px solid var(--line); }
.review-row:last-child { border-bottom: 0; }
.review-row:hover { background: var(--surface-soft); }
.review-score, .review-stars { display: flex; align-items: baseline; gap: 4px; color: var(--primary-text); font-variant-numeric: tabular-nums; }
.review-score strong { color: var(--ink); font-size: var(--font-xl); line-height: 1; }
.review-row-main { min-width: 0; }
.review-row-head { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; font-size: var(--font-sm); }
.review-row-head > span:first-child { color: var(--ink-muted); }
.review-row-main > p { display: -webkit-box; margin-top: 6px; overflow: hidden; color: var(--ink-secondary); font-size: var(--font-sm); line-height: 1.5; overflow-wrap: anywhere; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.review-row-meta { display: grid; justify-items: end; gap: 8px; }
.review-row-meta time { color: var(--ink-muted); font-size: var(--font-xs); font-variant-numeric: tabular-nums; }
.review-risk { display: inline-flex; align-items: center; min-height: 24px; padding: 2px 8px; border-radius: var(--radius-small); background: var(--danger-soft); color: var(--danger); font-size: var(--font-xs); font-weight: 600; }
.review-demo { display: grid; gap: 16px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.review-demo > div p { margin-top: 4px; color: var(--ink-muted); font-size: var(--font-xs); }
.review-demo form { display: flex; align-items: flex-end; gap: 8px; }
.review-demo label, .review-compensation label, .review-source-form label, .review-source-config label { display: grid; gap: 6px; min-width: 0; color: var(--ink-muted); font-size: var(--font-xs); }
.review-grow { flex: 1 1 auto; }
.review-demo textarea { min-height: 44px; height: 44px; max-height: 120px; padding: 11px 14px; line-height: 22px; field-sizing: content; }
.review-result { min-height: 20px; color: var(--ink-muted); font-size: var(--font-sm); }
.review-result:empty { display: none; }
.review-section { margin-top: 40px; }
.review-original, .review-reply, .review-insight-panel, .review-extension-note { padding: 24px; }
.review-original-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 24px; }
.review-original-head > div:last-child { display: grid; justify-items: end; gap: 2px; font-size: var(--font-sm); }
.review-original-head time { color: var(--ink-muted); font-size: var(--font-xs); }
.review-stars strong { color: var(--ink); font-size: var(--font-total); line-height: 1; }
.review-original > h2 { margin-bottom: 8px; }
.review-body { max-width: 65ch; white-space: pre-wrap; overflow-wrap: anywhere; }
.review-meta { display: grid; gap: 8px; margin: 24px 0 0; padding-top: 16px; border-top: 1px solid var(--line); }
.review-meta > div { display: flex; justify-content: space-between; gap: 16px; font-size: var(--font-xs); }
.review-meta dd { max-width: 70%; font-weight: 400; }
.review-classification { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.review-muted { color: var(--ink-muted); font-size: var(--font-sm); }
.review-reply textarea { max-height: 320px; }
.review-count { color: var(--ink-muted); font-size: var(--font-xs); font-variant-numeric: tabular-nums; }
.review-count b { color: var(--ink-secondary); }
.review-reply .review-actions { margin-top: 12px; }
.review-outbox { padding: 0 20px; }
.review-outbox > .review-muted { display: block; padding: 20px 0; }
.review-outbox-row, .review-compensation-result { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.review-outbox-row:last-child, .review-compensation-result:last-child { border-bottom: 0; }
.review-outbox-row > div:first-child, .review-compensation-result > div:first-child { display: grid; gap: 2px; min-width: 0; }
.review-outbox-row small, .review-compensation-result small { color: var(--ink-muted); font-size: var(--font-xs); overflow-wrap: anywhere; }
.review-compensation-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.review-compensation { display: grid; gap: 16px; padding: 20px; }
.review-compensation > p { color: var(--ink-muted); font-size: var(--font-sm); }
.review-compensation input, .review-source-form input[type="text"], .review-source-form input[type="password"] { width: 100%; min-width: 0; min-height: 44px; padding: 8px 14px; border: 0; border-radius: var(--radius-small); background: var(--surface); box-shadow: var(--field-ring); font-size: var(--font-sm); }
.review-compensation .btn, .review-source-form > .btn { justify-self: start; }
.review-compensation-results { margin-top: 12px; }
.review-timeline { position: relative; display: grid; gap: 16px; margin: 0; padding: 4px 0 4px 24px; list-style: none; }
.review-timeline::before { position: absolute; top: 12px; bottom: 12px; left: 7px; width: 1px; background: var(--line); content: ''; }
.review-timeline li { position: relative; min-width: 0; }
.review-timeline li > span { position: absolute; top: 7px; left: -21px; width: 9px; height: 9px; border-radius: 50%; background: var(--primary-text); box-shadow: 0 0 0 3px var(--surface); }
.review-timeline li > div { display: grid; gap: 2px; }
.review-timeline strong { font-size: var(--font-sm); }
.review-timeline time { color: var(--ink-muted); font-size: var(--font-xs); }
.review-kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 24px; }
.review-kpis > div { display: grid; gap: 8px; padding: 20px; }
.review-kpis span { color: var(--ink-muted); font-size: var(--font-xs); }
.review-kpis strong { font-size: var(--font-xl); font-variant-numeric: tabular-nums; }
.review-kpis small { color: var(--ink-muted); font-size: var(--font-xs); font-variant-numeric: tabular-nums; }
.review-insight-panel { margin-bottom: 24px; }
.review-chart { display: block; width: 100%; height: auto; overflow: visible; }
.review-chart text { fill: var(--ink-muted); font-size: var(--font-xs); }
.review-chart-axis { stroke: var(--line); stroke-width: 1; }
.review-chart-bar { fill: var(--primary-soft); }
.review-chart-line { fill: none; stroke: var(--primary-text); stroke-linecap: round; stroke-linejoin: round; stroke-width: 3; }
.review-chart-point { fill: var(--surface); stroke: var(--primary-text); stroke-width: 2; }
.review-insight-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 24px; }
.review-complaints { display: grid; gap: 20px; margin: 0; padding: 0; list-style: none; }
.review-complaints li { display: grid; gap: 6px; }
.review-complaints li > div { display: flex; justify-content: space-between; gap: 12px; font-size: var(--font-sm); }
.review-complaints li > div:last-child { justify-content: flex-start; color: var(--primary-text); font-size: var(--font-xs); }
.review-complaint-bar { height: 8px; overflow: hidden; border-radius: 4px; background: var(--surface-sunken); }
.review-complaint-bar i { display: block; height: 100%; border-radius: inherit; background: var(--primary); }
.review-response-times { display: grid; gap: 16px; margin: 0; }
.review-response-times > div { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.review-response-times dd { font-size: var(--font-lg); }
.review-extension-note { margin-bottom: 40px; background: var(--surface-soft); }
.review-extension-note h2 { margin-bottom: 8px; font-size: var(--font-md); }
.review-extension-note p { color: var(--ink-muted); font-size: var(--font-sm); line-height: 1.6; overflow-wrap: anywhere; }
.review-extension-note code { color: var(--ink-secondary); }
.review-source-list { padding: 0 20px; }
.review-source-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; min-height: 104px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.review-source-row:last-child { border-bottom: 0; }
.review-source-row > div:first-child { min-width: 0; }
.review-source-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.review-source-row p, .review-source-row small { display: block; margin-top: 4px; color: var(--ink-muted); font-size: var(--font-xs); overflow-wrap: anywhere; }
.review-source-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; }
.review-source-auto { display: flex; align-items: center; gap: 8px; color: var(--ink-muted); font-size: var(--font-xs); }
.review-source-form { display: grid; gap: 16px; padding: 24px; }
.review-source-config { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.review-check { display: flex !important; align-items: center; grid-template-columns: none; min-height: 44px; gap: 8px !important; color: var(--ink-secondary) !important; }
.review-check input { width: 20px; height: 20px; margin: 0; accent-color: var(--primary-text); }

@media (max-width: 760px) {
  .review-page-head { align-items: flex-start; }
  .review-head-links { justify-content: flex-start; }
  .review-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-tabs a:nth-child(3) { border-left: 0; border-top: 1px solid var(--line); }
  .review-tabs a:nth-child(4) { border-top: 1px solid var(--line); }
  .review-row { grid-template-columns: 48px minmax(0, 1fr); gap: 12px; padding: 16px 12px; }
  .review-score strong { font-size: var(--font-lg); }
  .review-row-meta { grid-column: 2; grid-row: 2; display: flex; align-items: center; justify-content: space-between; }
  .review-demo form, .review-original-head, .review-outbox-row, .review-compensation-result, .review-source-row { align-items: stretch; flex-direction: column; }
  .review-demo form > *, .review-actions .btn { width: 100%; }
  .review-actions { align-items: stretch; }
  .review-original-head > div:last-child { justify-items: start; }
  .review-original, .review-reply, .review-insight-panel, .review-extension-note, .review-source-form { padding: 20px 16px; }
  .review-compensation-grid, .review-insight-grid, .review-source-config { grid-template-columns: minmax(0, 1fr); }
  .review-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .review-kpis > div:last-child { grid-column: 1 / -1; }
  .review-source-actions { justify-content: flex-start; }
}

/* 채널 설정은 앱 렌더와 독립된 dialog로 입력을 유지한다. */
.channel-setup { width: min(640px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 24px; border: 0; border-radius: var(--radius-panel); background: var(--surface); color: var(--ink); overflow-y: auto; overflow-wrap: anywhere; }
.channel-row { flex-wrap: wrap; }
.channel-setup .tag, .channel-row .tag { flex: none; align-self: flex-start; width: auto; }
.channel-setup .llm-form .llm-actions { flex: 0 0 auto; }
.channel-setup .llm-actions, .channel-row .llm-actions { flex: 1 1 100%; flex-wrap: wrap; min-width: 0; max-width: 100%; }
.channel-setup .llm-note, .channel-row .llm-note { flex: 1 1 100%; min-width: 0; }
.channel-setup::backdrop { background: color-mix(in srgb, var(--ink) 40%, transparent); }
.channel-setup-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 32px; }
.channel-setup-head h2 { margin: 0; font-size: var(--font-xl); }
.channel-setup-head p { margin: 8px 0 0; color: var(--ink-muted); font-size: var(--font-sm); }
.channel-setup .channel-setup-name { display: grid; gap: 10px; margin-bottom: 28px; }
.channel-setup .channel-setup-name > span, .channel-setup legend { font-size: var(--font-md); font-weight: 700; color: var(--ink); }
.channel-setup input[name=name] { width: 100%; min-width: 0; min-height: 48px; font-size: var(--font-md); }
.channel-setup fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.channel-setup legend { padding: 0; }
.channel-setup-hint { margin: 6px 0 0; color: var(--ink-muted); font-size: var(--font-sm); }
/* 채널 선택 카드: 체크박스 대신 카드 전체를 누른다. 고르면 테두리와 오른쪽 체크가 켜진다. */
.channel-setup-choices { display: grid; gap: 12px; margin: 16px 0 28px; }
.channel-setup .channel-setup-choice { position: relative; display: flex; align-items: center; gap: 16px; padding: 18px 20px; min-height: 84px; background: var(--surface); border-radius: var(--radius-control); box-shadow: var(--field-ring); cursor: pointer; transition: box-shadow .12s, background .12s; }
.channel-setup .channel-setup-choice:hover { background: var(--surface-soft); }
.channel-setup .channel-setup-choice:has(:checked) { background: var(--primary-soft); box-shadow: inset 0 0 0 2px var(--primary-text); }
.channel-setup-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.channel-choice-mark .channel-mark { width: 36px; height: 36px; font-size: 15px; }
.channel-choice-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 4px; }
.channel-choice-text strong { font-size: var(--font-name); font-weight: 700; color: var(--ink); }
.channel-choice-text small { font-size: var(--font-sm); line-height: 1.5; color: var(--ink-muted); }
.channel-choice-check { flex: 0 0 24px; width: 24px; height: 24px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line); display: grid; place-items: center; color: transparent; }
.channel-choice-check svg { width: 16px; height: 16px; }
.channel-choice-check svg circle { display: none; }
.channel-setup-choice:has(:checked) .channel-choice-check { background: var(--primary-text); box-shadow: none; color: #fff; }
.channel-setup-choice:has(input:focus-visible) { outline: 2px solid var(--primary-text); outline-offset: 2px; }
.settings-channel-choice input { appearance: none; flex: 0 0 24px; width: 24px; height: 24px; min-height: 24px; margin: 0; border: 1px solid var(--ink-muted); border-radius: 4px; background: var(--surface); }
.settings-channel-choice input:checked { border-color: var(--primary-text); background: var(--primary-text) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 16px no-repeat; }
.settings-channel-choice:has(input:focus-visible) { outline: 2px solid var(--primary-text); outline-offset: 2px; }
/* 새 워크스페이스 모달 뒤: 사이드바 없이 틀만 */
.shell-body.blank { grid-template-columns: minmax(0, 1fr); }
.channel-setup .setting-row, .channel-setup .llm-form, .channel-setup .llm-bar { flex-wrap: wrap; min-width: 0; }
.channel-setup .llm-actions { flex-wrap: wrap; min-width: 0; }
.channel-setup .setting-row > div, .channel-setup .llm-panel, .channel-setup .grow { min-width: 0; }
.channel-setup .channel-row { align-items: flex-start; }
.channel-setup .channel-row > div:first-child { flex-basis: 100%; }
.channel-setup .settings-subhead { display: none; }
.channel-setup .llm-line code { white-space: normal; overflow-wrap: anywhere; }
.channel-setup .form-actions { flex-wrap: wrap; margin-top: 24px; }
.channel-connect { font-size: var(--font-xs); white-space: nowrap; color: var(--ink-muted); }
.settings-channel-choices { display: flex; flex-wrap: wrap; gap: 8px 24px; }
.settings-channel-choice { display: flex; align-items: center; gap: 8px; min-height: 44px; cursor: pointer; }
@media (max-width: 600px) {
  .channel-setup { padding: 24px 16px; }
  .channel-setup .llm-form { flex-direction: column; align-items: stretch; }
  .setting-row.channel-selection { flex-direction: column; align-items: stretch; gap: 16px; }
  .setting-row.retention-setting { flex-direction: column; align-items: stretch; gap: 16px; }
  .retention-setting select { width: 100%; }
}