:root {
  color-scheme: light;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif;
  color: #202635;
  background: #f5f7fb;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  --ink: #202635;
  --muted: #778094;
  --line: #e3e8f0;
  --accent: #335fd5;
  --accent-soft: #edf2ff;
  --surface: #ffffff;
  --page: #f5f7fb;
  --topbar-height: calc(72px + env(safe-area-inset-top, 0px));
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { min-width: 320px; background: var(--page); }
button, textarea { font: inherit; }
button { color: inherit; }
a { color: inherit; }
.app-shell { height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; }
.topbar { z-index: 2; height: var(--topbar-height); flex: 0 0 var(--topbar-height); display: grid; grid-template-columns: 1fr auto; align-items: center; padding: env(safe-area-inset-top, 0px) 30px 0; }
.brand { justify-self: start; color: var(--ink); font-size: 19px; font-weight: 750; letter-spacing: -.045em; text-decoration: none; }
.topbar-actions { justify-self: end; display: flex; align-items: center; gap: 14px; }
.policy-link, .policy-label { color: var(--muted); font-size: 12px; text-decoration: none; }
.policy-link:hover, .feedback-link:hover { color: var(--accent); text-decoration: underline; }
.new-chat-button { justify-self: end; display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--accent); cursor: pointer; }
.new-chat-button[hidden] { display: none; }
.new-chat-button svg { width: 18px; height: 18px; }
.new-chat-button:hover { border-color: #c9d5f4; background: var(--accent-soft); }
.main-area { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.conversation { position: relative; flex: 1; min-height: 0; width: 100%; max-width: 880px; margin: 0 auto; padding: 0 30px; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; scrollbar-color: #cbd2df transparent; scrollbar-width: thin; }
.welcome { min-height: min(64vh, 580px); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 25px 0 40px; text-align: center; }
.welcome[hidden] { display: none; }
.welcome-mark { display: grid; width: 45px; height: 45px; place-items: center; margin-bottom: 20px; border-radius: 14px; color: #fff; background: linear-gradient(145deg, #4774e4, #294fad); font-size: 22px; font-weight: 750; box-shadow: 0 8px 22px rgba(51,95,213,.2); }
.eyebrow { margin: 0 0 12px; color: var(--accent); font-size: 12px; font-weight: 650; letter-spacing: .035em; }
.welcome h1 { margin: 0; color: var(--ink); font-size: clamp(28px, 4vw, 36px); line-height: 1.3; letter-spacing: -.055em; font-weight: 650; }
.welcome-copy { margin: 13px 0 0; color: var(--muted); font-size: 14px; line-height: 1.7; }
.messages { display: none; width: 100%; padding: 24px 0 26px; }
.messages.active { display: block; }
.message-row { display: flex; width: 100%; margin: 0 0 23px; }
.message-row.user { justify-content: flex-end; }
.message-row.assistant { justify-content: flex-start; }
.message-body { min-width: 0; max-width: min(720px, 100%); }
.user .message-body { max-width: min(620px, 84%); padding: 12px 16px; border: 1px solid #e0e6f2; border-radius: 18px 18px 5px 18px; background: #edf1f8; color: #2c3443; }
.assistant .message-body { width: 100%; padding: 2px 0; color: #252d3a; }
.message-content { color: inherit; font-size: 14px; line-height: 1.8; overflow-wrap: anywhere; }
.user .message-content { white-space: pre-wrap; }
.message-content p { margin: 0 0 10px; }
.message-content p:last-child { margin-bottom: 0; }
.message-content ul, .message-content ol { margin: 5px 0 12px; padding-left: 22px; }
.message-content li { padding: 2px 0; }
.message-content h1, .message-content h2, .message-content h3 { margin: 13px 0 7px; color: #202635; font-size: 1.08em; }
.message-content h1:first-child, .message-content h2:first-child, .message-content h3:first-child { margin-top: 0; }
.message-content pre { overflow-x: auto; margin: 10px 0; padding: 12px 14px; border-radius: 10px; background: #eef1f6; }
.message-content code { padding: 2px 5px; border-radius: 5px; color: #244784; background: #eef1f6; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
.message-content pre code { padding: 0; background: transparent; }
.message-content blockquote { margin: 8px 0 12px; padding-left: 14px; border-left: 2px solid #c8d4ef; color: #5d6778; }
.markdown-table-wrap { max-width: 100%; margin: 12px 0; overflow-x: auto; border: 1px solid var(--line); border-radius: 9px; }
.message-content table { width: 100%; border-collapse: collapse; line-height: 1.55; font-size: 13px; }
.message-content th, .message-content td { min-width: 65px; padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.message-content th { background: #f1f4f9; font-weight: 650; }
.thinking { display: inline-flex; gap: 5px; align-items: center; height: 21px; }
.thinking i { width: 5px; height: 5px; border-radius: 50%; background: #6683d2; animation: pulse 1s infinite ease-in-out; }
.thinking i:nth-child(2) { animation-delay: .14s; }
.thinking i:nth-child(3) { animation-delay: .28s; }
.inline-error { margin-top: 6px; color: #a5444a; font-size: 13px; }
.evidence { margin-top: 15px; border-top: 1px solid var(--line); color: #546074; }
.evidence summary { width: fit-content; padding: 11px 0 3px; color: #59667d; font-size: 12px; cursor: pointer; list-style: none; }
.evidence summary::-webkit-details-marker { display: none; }
.evidence summary::before { content: "+"; display: inline-grid; width: 17px; height: 17px; place-items: center; margin-right: 7px; border: 1px solid #d8dfec; border-radius: 50%; color: var(--accent); font-size: 13px; vertical-align: -3px; }
.evidence[open] summary::before { content: "−"; }
.evidence-groups { display: grid; gap: 12px; padding: 10px 0 0; }
.evidence-group-title { margin: 0 0 7px; color: #737f93; font-size: 11px; font-weight: 650; }
.source-card { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.75); }
.source-topline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 9px; margin-bottom: 5px; }
.source-kind { color: var(--accent); font-size: 10px; font-weight: 700; }
.source-title { color: #2f3b52; font-size: 12px; font-weight: 600; text-decoration: none; }
.source-title[href]:hover { text-decoration: underline; }
.source-date { color: #8b94a3; font-size: 10px; }
.source-excerpt { margin: 0; color: #697487; font-size: 11px; line-height: 1.65; white-space: pre-wrap; }
.composer-area { width: 100%; padding: 10px 20px max(15px, env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(245,247,251,0), var(--page) 22%); }
.composer { display: flex; align-items: flex-end; gap: 8px; width: min(720px, 100%); min-height: 58px; margin: 0 auto; padding: 8px 9px 8px 17px; border: 1px solid #dfe5ee; border-radius: 18px; background: var(--surface); box-shadow: 0 8px 28px rgba(35,51,83,.07); }
.composer:focus-within { border-color: #bdcbee; box-shadow: 0 0 0 3px rgba(51,95,213,.08), 0 8px 28px rgba(35,51,83,.07); }
.composer textarea { flex: 1 1 auto; min-width: 0; min-height: 39px; max-height: 160px; padding: 9px 0 7px; resize: none; overflow-y: auto; border: 0; outline: 0; background: transparent; color: var(--ink); font-size: 14px; line-height: 1.6; }
.composer textarea::placeholder { color: #99a2b1; }
.send-button { flex: 0 0 40px; display: grid; width: 40px; height: 40px; place-items: center; border: 0; border-radius: 12px; color: #fff; background: var(--accent); cursor: pointer; }
.send-button svg { width: 19px; height: 19px; }
.send-button:hover:not(:disabled) { background: #284eae; }
.send-button:disabled { background: #b8c4df; cursor: default; }
.composer-note { margin: 8px auto 0; color: #939cac; text-align: center; font-size: 10px; }
.feedback-link { position: fixed; right: 17px; bottom: 8px; z-index: 3; color: #9099a8; font-size: 10px; text-decoration: none; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.policy-page { width: min(780px, calc(100% - 36px)); margin: 0 auto; padding: 32px 0 70px; }
.policy-page h1 { margin: 0 0 12px; color: var(--ink); font-size: clamp(27px, 4vw, 36px); letter-spacing: -.045em; }
.policy-updated { margin: 0 0 30px; color: var(--muted); font-size: 12px; }
.policy-section { margin: 24px 0; }
.policy-section h2 { margin: 0 0 9px; color: #2c3443; font-size: 17px; }
.policy-section p, .policy-section li { color: #596477; font-size: 14px; line-height: 1.85; }
.policy-section ul { padding-left: 21px; }
.policy-page a { color: var(--accent); }
.back-link { color: var(--muted); font-size: 12px; text-decoration: none; }

@keyframes pulse { 0%, 60%, 100% { opacity: .35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-3px); } }
@media (max-width: 640px) {
  :root { --topbar-height: calc(61px + env(safe-area-inset-top, 0px)); }
  .topbar { padding: env(safe-area-inset-top, 0px) 17px 0; }
  .brand { font-size: 18px; }
  .policy-link { font-size: 10px; }
  .topbar-actions { gap: 10px; }
  .conversation { padding: 0 18px; }
  .welcome { min-height: 55vh; }
  .welcome h1 { font-size: 29px; }
  .welcome-copy { max-width: 290px; font-size: 13px; }
  .messages { padding-top: 20px; }
  .message-content { font-size: 13px; }
  .user .message-body { max-width: 88%; }
  .composer-area { padding-right: 12px; padding-left: 12px; padding-bottom: max(13px, env(safe-area-inset-bottom, 0px)); }
  .composer-note { max-width: 90%; font-size: 9px; }
  .feedback-link { right: 10px; bottom: 2px; font-size: 9px; }
  .policy-page { padding-top: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}
