:root {
  --bg: #faf8f4; --fg: #231f1a; --muted: #6f675d; --line: #ddd5c8;
  --card: #fff; --user: #efe7d8; --accent: #7a4b1e;
  --warn: #b3261e; --warn-bg: #fdecea; --mark: #fff0b3; --mark-fg: #6b4a00;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1c1a17; --fg: #ece6dc; --muted: #a49b8e; --line: #3a352e;
    --card: #26231f; --user: #3a3228; --accent: #e0b27a;
    --warn: #ffb4ab; --warn-bg: #4a1f1b; --mark: #5a4500; --mark-fg: #ffe08a;
  }
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--fg); overflow-x: hidden;
  font: 16px/1.6 system-ui, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
button, input, textarea { font: inherit; color: inherit; }
button {
  background: var(--accent); color: var(--bg); border: 0; border-radius: 8px;
  padding: 0 16px; min-height: 44px; cursor: pointer;
}
button.ghost { background: transparent; color: var(--accent); border: 1px solid var(--line); min-height: 36px; }
button:disabled, textarea:disabled { opacity: .55; cursor: not-allowed; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.app { display: flex; flex-direction: column; height: 100dvh; max-width: 860px; margin: 0 auto; }
header {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-bottom: 1px solid var(--line);
}
header h1 { font-size: 1.1rem; margin: 0; }
#chat { flex: 1; overflow-y: auto; padding: 16px; min-width: 0; }
.empty { color: var(--muted); text-align: center; margin-top: 20vh; }
.msg { margin: 0 0 16px; max-width: 100%; overflow-wrap: anywhere; }
.msg.user { background: var(--user); padding: 8px 12px; border-radius: 12px; margin-left: 15%; white-space: pre-wrap; }
.msg.bot { background: var(--card); border: 1px solid var(--line); padding: 8px 14px; border-radius: 12px; }
.msg.bot > :first-child { margin-top: 0; }
.msg.bot > :last-child { margin-bottom: 0; }
.progress { color: var(--muted); }
.error { background: var(--warn-bg); color: var(--warn); border: 1px solid var(--warn); border-radius: 8px; padding: 8px 12px; }
.msg table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; margin: 8px 0; }
.msg th, .msg td { border: 1px solid var(--line); padding: 4px 10px; text-align: left; white-space: nowrap; }
.msg th { background: var(--user); }
.msg pre { overflow-x: auto; }
.msg strong.warn { background: var(--mark); color: var(--mark-fg); padding: 0 4px; border-radius: 4px; }

form.ask { display: flex; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
form.ask textarea {
  flex: 1; min-width: 0; resize: none; max-height: 40vh; padding: 10px 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}

.login { max-width: 360px; margin: 0 auto; padding: 18vh 16px 16px; }
.login h1 { font-size: 1.3rem; }
.login input {
  width: 100%; padding: 10px 12px; margin-bottom: 12px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
}
.login button { width: 100%; }
#msg { margin-top: 12px; min-height: 1.5em; }