/* 화면 구성 — 헤더 / 대화 영역 / 입력창. */

.app {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ── 헤더 ─────────────────────────────────────────── */
.header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-md);
  padding: var(--gap-md) var(--gap-lg);
  background: var(--bg-blur);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease;
}

.header--scrolled {
  border-bottom-color: var(--border);
}

.brand {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.4px;
}

/* 이름("덴토")만으로는 무슨 앱인지 알 수 없어 붙인 한 줄.
   본이름보다 작고 흐리게 — 로고를 읽는 데 방해가 되면 안 된다. */
.brand__sub {
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--text-sub);
  letter-spacing: 0;
  padding-left: 2px;
}

/* 좁은 화면에서는 숨긴다 — 헤더 오른쪽의 상태 표시와 겹친다. */
@media (max-width: 520px) {
  .brand__sub {
    display: none;
  }
}

/* 로고 표식. 그라데이션 선 그림이라 **바탕색을 깔지 않는다** —
   파란 사각형 위에 올리면 선이 배경에 묻혀 안 보인다.
   같은 표식을 소개·가격 페이지(`site/`)도 쓴다 — 한쪽만 고치지 말 것. */
.brand__mark {
  flex: none;
  width: 30px;
  height: 30px;
}

/* 소개·가격으로 가는 길. 뿌리가 앱이라 이 두 줄이 유일한 통로다. */
.header__nav {
  display: flex;
  gap: var(--gap-xs);
}

/* ghost-btn 은 원래 button 용이라 링크로 쓰면 밑줄이 생긴다. */
a.ghost-btn {
  text-decoration: none;
}

a.ghost-btn:hover {
  border-color: var(--text-weak);
  color: var(--text);
}

/* 🔴 좁은 화면에서는 머리 단추가 한 모양이라야 한다 — 테두리 있는 알약과 테두리
   없는 글자와 그림 단추가 섞이면 어느 것이 눌리는 것인지 알기 어렵다. 머리가 꽉
   차는 폭이므로 **전부 테두리를 지우고** 높이만 톱니(44px)에 맞춘다.
   ⚠️ 자리는 안 바꾼다 — 톱니는 그대로 맨 오른쪽이다.
   ⚠️ `.header__nav` 안쪽만 걸지 말 것 — [새 대화] 는 그 밖에 있어서 혼자 알약으로
      남는다. */
@media (max-width: 560px) {
  .header__right .ghost-btn {
    min-height: 44px;
    padding: 6px 8px;
    border-color: transparent;
    background: transparent;
  }
}

.header__right {
  display: flex;
  align-items: center;
  gap: var(--gap-sm);
}

/* 눈에 띄지 않는 작은 버튼. 새 대화·복사·다시 시도에 함께 쓴다.
   🔴 누르는 높이는 40px 이다. 줄이지 말 것 — 폰에서 손가락으로 헛누르게 된다.
   ⚠️ 높이만 채운다. 너비를 함께 키우면 머리 줄이 넘친다. */
.ghost-btn {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-sub);
  font-size: var(--fs-xs);
  font-weight: 500;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.ghost-btn:hover:not(:disabled) {
  border-color: var(--blue);
  background: var(--blue-weak);
  color: var(--blue-hover);
}

.ghost-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.ghost-btn--sm {
  padding: 4px 10px;
}

.ghost-btn--danger {
  margin-top: var(--gap-sm);
  border-color: var(--danger-border);
  background: transparent;
  color: var(--danger-text);
}

.ghost-btn--danger:hover:not(:disabled) {
  border-color: var(--danger-text);
  background: var(--bg);
  color: var(--danger-text);
}

/* 🔴 서버에 못 닿을 때만 머리 밑에 뜨는 띠. 잘 될 때는 요소째 숨어 있다.
   ⚠️ 화면 끝까지 채운다 — 가운데만 칠하면 알림이 아니라 본문 한 조각으로 읽힌다.
   ⚠️ 자리를 미리 잡아 두지 않는다(`hidden` 이면 높이 0) — 평소에 빈 줄이 남으면
      그만큼 답이 밀린다. */
.offline-bar {
  margin: 0;
  padding: 10px var(--gap-lg);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: var(--fs-sm);
  text-align: center;
}

/* ── 본문 ─────────────────────────────────────────── */
.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--gap-lg);
}

/* 첫 화면: 인사말 + 입력창을 화면 가운데로 */
.app[data-state="idle"] .main {
  justify-content: center;
  padding-bottom: 8vh;
}

.hero {
  text-align: center;
  padding: var(--gap-xl) 0 var(--gap-lg);
}

.app[data-state="chat"] .hero {
  display: none;
}

.hero__title {
  margin: 0 0 var(--gap-sm);
  font-size: var(--fs-hero);
  font-weight: 700;
  letter-spacing: -0.8px;
}

.hero__sub {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-body);
}

/* 자료가 하나도 없을 때의 안내 상자 */
.notice {
  margin: 0 auto var(--gap-lg);
  padding: 18px 20px;
  border: 1px solid var(--border);
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-md);
  background: var(--surface);
}

.app[data-state="chat"] .notice {
  display: none;
}

.notice__title {
  margin: 0 0 var(--gap-xs);
  font-weight: 700;
}

.notice__text,
.notice__skipped {
  margin: 0;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.notice__skipped {
  margin-top: var(--gap-sm);
}

.notice__path {
  margin: var(--gap-sm) 0 0;
}

.notice__path code {
  display: inline-block;
  padding: 4px 8px;
  border-radius: 6px;
  background: var(--surface-strong);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

/* ── 대화 ─────────────────────────────────────────── */
.thread {
  display: flex;
  flex-direction: column;
  gap: var(--gap-xl);
  padding: var(--gap-lg) 0 var(--gap-2xl);
}

.app[data-state="idle"] .thread {
  display: none;
}

.turn {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

/* '여기부터 새 대화' 구분선 */
.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap-md);
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

.divider::before,
.divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--border);
}

.bubble-q {
  align-self: flex-end;
  max-width: 85%;
  padding: 12px 18px;
  border-radius: var(--radius-lg) var(--radius-lg) 6px var(--radius-lg);
  background: var(--blue);
  color: var(--on-blue);
  font-weight: 500;
  white-space: pre-wrap;
}

.answer {
  display: flex;
  flex-direction: column;
  gap: var(--gap-md);
}

.answer__body {
  font-size: var(--fs-body);
}

.answer__body p {
  margin: 0 0 var(--gap-md);
}

.answer__body p:last-child {
  margin-bottom: 0;
}

.answer__body ul,
.answer__body ol {
  margin: 0 0 var(--gap-md);
  padding-left: 20px;
}

/* 긴 답의 뒷부분을 접는다 — 첫 줄만 읽고 판단할 수 있게.
   글자를 버리는 게 아니라 감추는 것이라, 누르면 그대로 다 나온다. */
.answer__more {
  margin-top: var(--gap-md);
}

.answer__more > summary {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--bg-soft, transparent);
  color: var(--fg-dim);
  font-size: var(--fs-sm);
  list-style: none;
  user-select: none;
}

.answer__more > summary::-webkit-details-marker {
  display: none;
}

.answer__more > summary::after {
  content: "▾";
  font-size: 0.85em;
}

.answer__more[open] > summary::after {
  content: "▴";
}

.answer__more > summary:hover {
  color: var(--fg);
  border-color: var(--fg-dim);
}

/* 접힌 부분의 첫 요소가 버튼 바로 아래 붙지 않게 */
.answer__more[open] > summary {
  margin-bottom: var(--gap-md);
}

.answer__body li {
  margin-bottom: 4px;
}

.answer__body h1,
.answer__body h2,
.answer__body h3 {
  margin: var(--gap-lg) 0 var(--gap-sm);
  font-size: var(--fs-title);
  font-weight: 700;
  letter-spacing: -0.3px;
}

.answer__body code {
  padding: 2px 6px;
  border-radius: 6px;
  background: var(--surface-strong);
  font-size: var(--fs-sm);
  font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
}

.answer__body strong {
  font-weight: 700;
}

.answer__body pre {
  margin: 0 0 var(--gap-md);
  padding: 12px 14px;
  border-radius: var(--radius-sm);
  background: var(--surface-strong);
  overflow-x: auto;
}

.answer__body pre code {
  padding: 0;
  background: none;
  line-height: 1.6;
}

.answer__body table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: var(--gap-md);
  font-size: var(--fs-sm);
}

.answer__body th,
.answer__body td {
  padding: 8px 10px;
  border: 1px solid var(--border);
  text-align: left;
}

.answer__body th {
  background: var(--surface);
  font-weight: 600;
}

/* 진행 상태 */
.thinking {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-sm);
  padding: 8px 14px;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.thinking__dots {
  display: inline-flex;
  gap: 3px;
}

.thinking__dots span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--text-weak);
  animation: blink 1.2s infinite ease-in-out;
}

.thinking__dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.thinking__dots span:nth-child(3) {
  animation-delay: 0.3s;
}

@keyframes blink {
  0%,
  60%,
  100% {
    opacity: 0.25;
  }
  30% {
    opacity: 1;
  }
}

/* 근거 */
.sources {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  padding-top: var(--gap-sm);
  border-top: 1px solid var(--border);
}

.sources__label {
  color: var(--text-weak);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.chip {
  padding: 5px 11px;
  border-radius: var(--radius-full);
  background: var(--blue-weak);
  color: var(--blue-hover);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.chip--muted {
  background: var(--surface-strong);
  color: var(--text-sub);
}

/* 누르면 자료 원문이 아래에 펼쳐지는 칩 */
.chip--link {
  transition: background 0.15s ease, color 0.15s ease;
}

.chip--link:hover,
.chip--link[aria-expanded="true"] {
  background: var(--blue);
  color: var(--on-blue);
}

/* 답변 아래 도구 줄과 그 아래 까닭 줄을 함께 담는 상자. */
.answer__feedback {
  display: flex;
  flex-direction: column;
}

/* 답변 아래 도구 줄 — 아이콘 셋(내용 복사 · 좋은 답변 · 나쁜 답변).
   ⚠️ 왼쪽 음수 여백은 아이콘을 답 본문 왼쪽 줄에 맞추려는 것이다 — 단추가 44px 인데
      그림은 18px 이라, 안 당기면 아이콘만 13px 안쪽으로 들어가 보인다. */
.answer__actions {
  display: flex;
  gap: 2px;
  margin-left: -12px;
}

/* 🔴 누르는 영역은 44px 이다. 줄이지 말 것 — 폰에서 손가락으로 헛누르게 된다.
   보이는 것은 그림 18px 이고 나머지는 투명한 여백이라 화면이 커 보이지도 않는다.
   ⚠️ 이 단추는 `.ghost-btn` 을 아예 안 쓴다 — 넓게 걸면 머리의 [새 대화]·
      [로그아웃]까지 커져 머리 줄이 넘쳤다. */
.icon-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-weak);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}

.icon-btn svg {
  width: 18px;
  height: 18px;
  /* 말풍선이 그림 위에서 깜빡이지 않게 — 마우스 판정을 단추가 통째로 받는다. */
  pointer-events: none;
}

.icon-btn:hover {
  background: var(--surface-strong);
  color: var(--text);
}

/* 고른 상태 — 색을 진하게 하고 **그림을 채운다**(선 그림이라 채우면 확 달라 보인다).
   ⚠️ 아이콘 SVG 의 `fill="none"` 을 지우면 안 고른 것도 채워져 구분이 사라진다. */
.icon-btn[aria-pressed="true"] {
  color: var(--blue);
}

.icon-btn[aria-pressed="true"] svg {
  fill: currentColor;
}

/* 마우스를 올렸을 때만 뜨는 검은 말풍선.
   🔴 글자를 없앴으므로 이것이 눈으로 이름을 아는 유일한 길이다(낭독기 쪽은
      `aria-label`). 늘 보이게 바꾸지 말 것.
   ⚠️ 손가락 기기에는 hover 가 없어 안 뜬다 — 그건 정상이다. 강제로 띄워야 하는
      말(복사 실패 안내)은 `data-tip-open` 으로 따로 띄운다. */
.icon-btn::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% - 6px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  padding: 5px 8px;
  border-radius: 6px;
  background: var(--tip-bg);
  color: var(--tip-text);
  font-size: 12px;
  line-height: 1.3;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* 말풍선 꼬리.
   🔴 `bottom` 을 말풍선(`- 6px`)보다 더 아래로 잡아야 보인다 — 삼각형은 아래쪽
      절반만 색이 있어서, 꼬리 아래 끝을 말풍선 아래 끝보다 5px 더 내려야 그
      절반이 밖으로 나온다. 안 그러면 아무것도 안 그려진 것처럼 된다. */
.icon-btn::before {
  content: "";
  position: absolute;
  bottom: calc(100% - 11px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  border: 5px solid transparent;
  border-top-color: var(--tip-bg);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.12s ease;
}

/* ⚠️ `:focus-visible` 을 함께 넣은 이유 — 키보드로만 쓰는 사람에게도 이름이 보여야 한다.
      `:focus` 로 걸면 마우스로 누른 뒤에도 말풍선이 남아 거슬린다. */
.icon-btn:hover::after,
.icon-btn:hover::before,
.icon-btn:focus-visible::after,
.icon-btn:focus-visible::before,
.icon-btn[data-tip-open]::after,
.icon-btn[data-tip-open]::before {
  opacity: 1;
}

/* 첫 단추의 말풍선이 답 왼쪽 밖으로 잘리는 것을 막는다(중앙 정렬이면 왼쪽으로 삐져
   나간다). 꼬리는 단추 가운데에 그대로 둔다. */
.answer__actions .icon-btn:first-child::after {
  left: 0;
  transform: none;
}

/* ── 나쁜 답변을 누르면 열리는 「왜 별로였나요?」 줄 ─────────
   ⚠️ 아이콘 줄과 달리 음수 여백을 주지 않는다 — 칩은 투명한 여백이 없어서
      당기면 오히려 답 본문보다 왼쪽으로 삐져나간다.
   ⚠️ 좁은 화면에서는 칩이 두 줄로 접힌다. 접히게 두는 것이 맞다 — 글자를 줄이면
      무엇을 고르는 것인지 알 수 없어진다. */
.reasons {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-sm);
  padding-bottom: var(--gap-xs);
}

.reasons__label {
  color: var(--text-weak);
  font-size: var(--fs-xs);
  font-weight: 500;
}

.reason-chip {
  padding: 6px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-sub);
  font-size: var(--fs-xs);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.reason-chip:hover {
  border-color: var(--blue);
  background: var(--blue-weak);
  color: var(--blue-hover);
}

/* 고른 것 하나만 채워 둔다. */
.reason-chip[aria-pressed="true"] {
  border-color: var(--blue);
  background: var(--blue);
  color: var(--on-blue);
}

/* ── ⚙️ 머리의 톱니(설정) ─────────────────────────
   답 아래 아이콘 줄과 같은 단추를 쓰되 둘을 고친다.

   ① 크기 — 머리의 다른 단추(`ghost-btn`)와 높이를 맞춘다(44 → 40).
      🔴 그 단추의 높이를 바꾸면 이 값도 함께 바꾼다 — 갈리면 머리 오른쪽 두 단추의
         손가락 자리가 서로 다른 크기가 된다.
      🔴 좁은 화면에서는 다시 44 로 키운다 — 거기서는 이것이 머리에 남는 유일한
         단추라 손가락이 닿아야 한다.
   ② 🔴 말풍선을 아래로 뒤집는다 — 그대로 두면 머리 위로 떠서 화면 밖으로 나간다.
      꼬리 색도 함께 뒤집어야 한다(`border-top` → `border-bottom`). */
.icon-btn--head {
  width: 40px;
  height: 40px;
  text-decoration: none;
}

.icon-btn--head::after {
  bottom: auto;
  top: calc(100% - 6px);
}

.icon-btn--head::before {
  bottom: auto;
  top: calc(100% - 11px);
  border-top-color: transparent;
  border-bottom-color: var(--tip-bg);
}

/* 자료 원문 펼침 패널 */
.doc-panel {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.doc-panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--surface);
}

.doc-panel__title {
  color: var(--text-sub);
  font-size: var(--fs-xs);
  font-weight: 600;
  overflow-wrap: anywhere;
}

.doc-panel__close {
  flex-shrink: 0;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  color: var(--text-weak);
  font-size: var(--fs-sm);
}

.doc-panel__close:hover {
  color: var(--text);
}

.doc-panel__body {
  max-height: 360px;
  padding: 14px 16px;
  overflow-y: auto;
  font-size: var(--fs-sm);
}

.doc-panel__msg {
  margin: 0;
  padding: 14px 16px;
  color: var(--text-sub);
  font-size: var(--fs-sm);
}

.doc-panel__msg--bad {
  color: var(--danger-text);
}

.error-box {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--danger-bg);
  color: var(--danger-text);
  font-size: var(--fs-sm);
}

/* 확인이 어려워 가린 값 알림. 실패(빨강)가 아니라 주의(주황)다. */
.warn-box {
  padding: 14px 16px;
  border-radius: var(--radius-md);
  background: var(--warn-bg);
  border: 1px solid var(--warn-border);
  color: var(--warn-text);
  font-size: var(--fs-sm);
}

.warn-box__msg {
  margin: 0;
  font-weight: 600;
}

.warn-box__list {
  margin: var(--gap-xs) 0 0;
  padding-left: 1.2em;
}

.warn-box__note {
  margin: var(--gap-xs) 0 0;
  color: var(--warn-sub);
  font-size: var(--fs-xs);
}

.error-box__msg {
  margin: 0;
}

.error-box__note {
  margin: var(--gap-xs) 0 0;
  color: var(--danger-sub);
  font-size: var(--fs-xs);
}

/* ── 입력창 ───────────────────────────────────────── */
.composer {
  position: sticky;
  bottom: 0;
  padding: var(--gap-md) 0 var(--gap-lg);
  background: linear-gradient(180deg, var(--bg-fade) 0%, var(--bg) 22%);
}

/* 🔴 답이 나온 뒤에는 입력칸이 화면 맨 아래에 붙는다 — 대화가 짧으면 답 바로 밑,
   곧 화면 한가운데에 떠서 무엇에 딸린 칸인지 흐려진다.
   ⚠️ 첫 화면(`idle`)은 그대로다 — 거기서는 인사말과 함께 가운데 있는 것이 맞다. */
.app[data-state="chat"] .composer {
  margin-top: auto;
}

.composer__box {
  display: flex;
  align-items: flex-end;
  gap: var(--gap-sm);
  padding: 12px 12px 12px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg);
  box-shadow: var(--shadow-soft);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.composer__box:focus-within {
  border-color: var(--blue);
  box-shadow: var(--shadow-lift);
}

.composer__input {
  flex: 1;
  max-height: 180px;
  padding: 8px 0;
  border: none;
  background: none;
  resize: none;
  outline: none;
  line-height: 1.6;
}

.composer__input::placeholder {
  color: var(--text-weak);
}

.composer__send {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 50%;
  background: var(--blue);
  color: var(--on-blue);
  font-size: 18px;
  transition: background 0.15s ease, transform 0.1s ease;
}

.composer__send:hover:not(:disabled) {
  background: var(--blue-hover);
}

.composer__send:active:not(:disabled) {
  transform: scale(0.94);
}

.composer__send:disabled {
  background: var(--surface-strong);
  color: var(--text-weak);
  cursor: not-allowed;
}

/* 🔴 서버에 못 닿는 동안. 글자를 고치면 단추가 되살아나는데 보내기는 막혀 있어,
   눌리는 것처럼 보이면 고장으로 읽힌다. */
.app[data-offline] .composer__send {
  background: var(--surface-strong);
  color: var(--text-weak);
  cursor: not-allowed;
}

/* ── 🔴 좁은 화면 개인정보 경고 ─────────
   폰에서는 입력칸 안내글이 잘려 경고가 통째로 안 보인다. 그래서 좁을 때만 이
   줄로 내린다.

   🔴 기본이 `none` 이고 좁을 때만 켠다 — 반대로 짜면 CSS 가 늦게 오는 찰나에
      PC 에서도 잠깐 보인다.
   ⚠️ 입력창에 딱 붙인다 — 아래 `composer__meta` 와 사이를 벌리면 어느 쪽에 딸린
      글인지 흐려진다.
   ⚠️ 겁주는 색을 쓰지 않는다 — 자리만 바뀌고 무게는 그대로라야 한다. */
.composer__pii {
  display: none;
  margin: 6px 4px 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

/* 남은 글자 수 — 한도에 가까워질 때만 보인다. */
/* 입력창 바로 아래 한 줄. 왼쪽 글자 수 · 오른쪽 남은 건수.
   ⚠️ 둘 다 평소에는 숨어 있어 이 줄이 비는 일이 흔하다 — 그때 자리를 차지하지
      않도록 `min-height` 를 주지 않는다. */
.composer__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-sm);
  margin: 6px 4px 0;
}

/* 약관·방침·사업자 정보로 가는 작은 길. 남은 건수 칩과 한 줄을 나눠 쓴다.
   ⚠️ 조용한 자리다 — 밑줄은 마우스를 올렸을 때만 긋는다. 늘 그으면 이 줄이
      입력칸보다 먼저 눈에 들어온다. */
.composer__legal {
  margin: 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

.composer__legal a {
  color: inherit;
  text-decoration: none;
}

.composer__legal a:hover {
  color: var(--text-sub);
  text-decoration: underline;
}

.composer__legal span {
  margin: 0 4px;
  opacity: 0.6;
}

.composer__count {
  margin: 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
  text-align: right;
}

/* 글자 수가 숨었을 때 남은 건수가 오른쪽에 붙게 한다. */
.composer__count[hidden] + .quota {
  margin-left: auto;
}

.composer__count--full {
  color: var(--red);
  font-weight: 600;
}

.composer__hint {
  margin: var(--gap-sm) 4px 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
  text-align: center;
}

/* 🔴 짧은 꼴은 좁은 화면에서만 나온다. 기본은 넓은 화면 글이다 — 반대로 짜면
   CSS 가 늦게 오는 찰나에 PC 에서도 짧은 글이 잠깐 보인다. */
.composer__hint--short {
  display: none;
}

/*
  판 표시 한 줄. 안내문보다 한 단계 더 연하게 — 늘 떠 있지만 질문하다 눈에
  거슬리면 안 되고, 확인하려고 볼 때만 보이면 된다. 비어 있을 때는
  `:empty` 로 여백까지 없앤다(옛 서버라 `app` 이 안 올 때).
*/
.composer__version {
  margin: 6px 4px 0;
  color: var(--text-weak);
  opacity: 0.55;
  font-size: var(--fs-xs);
  text-align: center;
}

.composer__version:empty {
  display: none;
}

/* 추천 질문 */
/* ⚠️ 비어 있으면 요소째 숨긴다 — 위 여백만 남아 아래 붙박이가 그만큼 두꺼워진다.
   서버가 추천 질문을 안 주는 날에는 늘 비어 있다. */
.suggestions:empty {
  display: none;
}

.suggestions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap-sm);
  padding-top: var(--gap-md);
}

.app[data-state="chat"] .suggestions {
  display: none;
}

/* 🔴 누르는 높이는 40px 이다. 줄이지 말 것 — 폰에서 손가락으로 헛누르게 된다.
   글자 크기·여백은 그대로 두고 높이만 채운다. */
.suggestion {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg);
  color: var(--text-sub);
  font-size: var(--fs-sm);
  transition: all 0.15s ease;
}

.suggestion:hover {
  border-color: var(--blue);
  background: var(--blue-weak);
  color: var(--blue-hover);
}

/* ── 두 답 나란히 보기 (견주기 — 운영자 전용) ──────────────────
   🔴 켜고 끄는 체크칸은 없다. 운영자면 늘 켜지고 손님에게는 아예 안 켜진다 —
   판정은 `/api/me` 이고 화면 배선은 `js/main.js` 의 `compareOn` 이다. */

.compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--gap-md);
  align-items: start;
}

.compare__col {
  min-width: 0;               /* 긴 코드·표가 칸을 밀어내지 않게 */
  padding: var(--gap-md);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
}

.compare__col--peer {
  background: var(--surface);
}

.compare__label {
  margin-bottom: var(--gap-sm);
  color: var(--text-weak);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.compare__wait {
  margin-left: var(--gap-sm);
  color: var(--text-weak);
  font-size: var(--fs-sm);
}

.compare__note {
  margin: var(--gap-sm) 0 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

.compare__error {
  margin: 0;
  color: var(--red);
  font-size: var(--fs-sm);
}

.compare__meta {
  margin: var(--gap-sm) 0 0;
  color: var(--text-weak);
  font-size: var(--fs-xs);
}

/* ── 좁은 화면 ────────────────────────────────────── */
@media (max-width: 600px) {
  /* 좁으면 두 칸을 위아래로 — 옆으로 나란히 두면 글자가 세로로 서 버린다. */
  .compare {
    grid-template-columns: 1fr;
  }

  :root {
    --fs-hero: 24px;
  }

  .main,
  .header {
    padding-left: var(--gap-md);
    padding-right: var(--gap-md);
  }

  .bubble-q {
    max-width: 92%;
  }

  /* 좁은 화면에서 표가 넘치면 표만 옆으로 밀어 본다. */
  .answer__body table {
    display: block;
    overflow-x: auto;
  }

  /* 🔴 입력칸 안내글이 잘려 사라지던 개인정보 경고를 여기서 되살린다.
     ⚠️ 이 폭(600px)은 `js/ui.js` 의 `NARROW` 와 같은 값이라야 한다 — 갈리면
        안내글은 짧아졌는데 경고 줄은 안 나오는 구간이 생기고, 그 사이에는
        경고가 어디에도 없다. */
  .composer__pii {
    display: block;
  }

  /* 🔴 좁은 머리에서는 톱니 하나만 남긴다.
     ⚠️ 나가는 길이 사라지는 것이 아니다 — 톱니 → 설정 안에 로그아웃이 있다.
        그 짝이 깨지면 폰에서 나갈 방법이 없어진다. */
  #signOut {
    display: none;
  }

  /* 손가락이 닿을 만큼 키운다. 여기서는 이것이 유일한 단추다. */
  .icon-btn--head {
    width: 44px;
    height: 44px;
  }

  /* 🔴 폰에서는 칩 폭이 제각각이라 가운데로 모으면 줄마다 시작점이 어긋나
     계단처럼 보인다 — 한 줄에 하나씩, 폭을 꽉 채운다.
     ⚠️ 넓은 화면은 그대로 가운데 정렬이다. */
  .suggestions {
    flex-direction: column;
    align-items: stretch;
  }

  .suggestion {
    justify-content: center;
  }
}

/* ── 🔴 폰에서 아래 붙박이 줄이기 ────────────────────
   입력칸에 딸린 것들이 세로로 쌓이면 답을 읽을 자리가 그만큼 없어진다.

   🔴 무엇을 뺐나 — ① 판 번호(손님이 쓸 일이 없다) ② AI 고지를 짧은 꼴로
      (뜻은 그대로) ③ 위아래 여백.
   🔴 무엇을 안 뺐나 — 개인정보 경고 한 줄 · 남은 건수 칩 · 약관 링크 줄.
      셋 다 있어야 하는 것이다. 경고를 줄이거나 접는 쪽으로 바꾸지 말 것.
   ⚠️ 넓은 화면은 한 군데도 안 바뀐다. */
@media (max-width: 480px) {
  .composer {
    padding: var(--gap-sm) 0 var(--gap-md);
  }

  /* 그림 단추 크기는 그대로 두고 둘레 여백만 줄인다 — 손가락이 닿는 넓이는
     안 건드린다. */
  .composer__box {
    padding: 8px 8px 8px 16px;
  }

  .composer__hint--long {
    display: none;
  }

  .composer__hint--short {
    display: block;
    margin-top: 4px;
  }

  /* 줄 사이를 2px 씩 좁힌다. 여기 넷이 모여 한 줄 값이 된다. */
  .composer__pii,
  .composer__meta {
    margin-top: 4px;
  }

  /* 어느 판으로 도는지는 손님이 쓸 일이 없다. 넓은 화면에는 그대로 둔다. */
  .composer__version {
    display: none;
  }
}

/* ── 🔴 남은 질문 건수 ─────────────────
   ⚠️ 조용한 자리다. 평소에는 흐린 회색이고 적게 남았을 때만 색이 붙는다 —
      남은 수가 늘 눈에 띄면 손님이 아껴 쓰게 된다. */
.quota {
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--text-weak);
  font-size: var(--fs-xs);
  font-weight: 600;
  white-space: nowrap;
}

.quota--low {
  background: color-mix(in srgb, var(--amber) 16%, var(--bg));
  color: var(--amber);
}

.quota--out {
  background: color-mix(in srgb, var(--red) 14%, var(--bg));
  color: var(--red);
}

/* 다 썼을 때만 입력창 아래에 뜬다. */
.quota-out {
  margin: var(--gap-sm) 0 0;
  color: var(--red);
  font-size: var(--fs-sm);
  text-align: center;
}