:root {
  --line:#e5e8ef; --text:#111827; --muted:#6b7280; --accent:#2563eb; --muted-2:#9aa3ae;
  --radius:10px; --page-bg:#ffffff; --log-bg:#ffffff;
  --kb-open: 0px; --composer-h: 96px; --footer-h: 44px; --topbar-h: 56px;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--page-bg);
  background-image:var(--page-bg-img,none);
  background-size:var(--page-bg-size,cover);
  background-position:var(--page-bg-pos,50% 50%);
  background-repeat:var(--page-bg-repeat,no-repeat);
  background-attachment:var(--page-bg-attachment,scroll);
  color:var(--text);
  font-family:"TTNorms","Pretendard","Noto Sans KR","Noto Sans JP",-apple-system,BlinkMacSystemFont,system-ui,Roboto,"Helvetica Neue","Segoe UI","Malgun Gothic",sans-serif;
  -webkit-tap-highlight-color:transparent;
  overflow:hidden;
  display:flex;flex-direction:column;min-height:100svh;
}

.container{width:100%;max-width:960px;margin:0 auto;padding:12px;display:flex;flex-direction:column;flex:1;min-height:0}
.chat{width:100%;display:flex;flex-direction:column;flex:1;min-height:0}
.log{flex:1;overflow-y:auto;background:var(--log-bg);padding:12px;min-height:0}

.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;height:56px;padding:0 8px;background:#fff;border-bottom:1px solid var(--line)}
.brand-left{display:flex;align-items:center;gap:10px}
.brand-left img{width:28px;height:28px;object-fit:contain}
.brand-left .name{font-weight:700;letter-spacing:.2px}
.newbtn{padding:8px 12px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer;font-weight:600}
.newbtn:hover{opacity:.95}

.hero{text-align:center;padding:24px 6px;margin:4px 0 12px;border:1px solid var(--line)}
.hero .subtitle{font-size:14px;margin-bottom:8px;color:inherit;opacity:.85}
.hero .logo{max-width:100%;height:auto;object-fit:contain;display:block;margin:8px auto 6px}
.hero .title{font-size:32px;font-weight:700;letter-spacing:.3px;color:inherit}
.hero .hero-title{font-weight:700;font-size:16px}

.assistant-card{border:1px solid var(--line);border-radius:10px;padding:16px;margin-bottom:12px;font-size:14px;line-height:24px;background:#f6f7fb}
.assistant-card .head{font-weight:700;margin-bottom:8px}

.quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:10px}
.quick-grid button{
  width:100%;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;font-size:14px;font-weight:600;transition:transform .03s ease
}
.quick-grid button:hover{transform:translateY(-1px)}
.quick-group{border:1px solid var(--line);border-radius:10px;padding:10px;background:#fff}
.quick-group .g-head{display:flex;align-items:center;justify-content:space-between;font-weight:700;cursor:pointer;user-select:none}
.quick-group .g-head .caret{opacity:.6}

.meta{display:flex;align-items:center;gap:8px;margin:12px 0 4px 2px}
.meta.user{justify-content:flex-end}
.meta .avatar-img{width:38px;height:38px;border-radius:50%;display:block;object-fit:cover;flex:0 0 38px;border:1px solid #00000010}
.meta .avatar-fallback{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex:0 0 38px;border:1px solid #00000010;background:#eef2ff;color:#2563eb}
.meta .name{font-size:13px;color:#475569;font-weight:700}

.row{display:flex;gap:10px;margin:10px 0}
.row.assistant{justify-content:flex-start}
.row.user{justify-content:flex-end}
.bubble{border-radius:var(--radius);padding:12px 14px;font-size:14px;line-height:24px;border:1px solid var(--line)}
.bubble.assistant{max-width:720px;box-shadow:0 1px 0 rgba(0,0,0,.02)}
.bubble.user{max-width:70%}
.bubble.assistant a{color:#2563eb;text-decoration:none;word-break:break-all}
.bubble.assistant a:hover{text-decoration:underline}
.time{margin-top:6px;font-size:12px}

.bubble.assistant.form{width:100%;max-width:720px}
.form-wrap,.form-card,.form-container{width:100%!important}
.form-wrap{display:grid;gap:10px;margin-top:6px}
.f-row{display:flex;flex-direction:column;gap:6px}
.f-label{font-size:13px;color:var(--muted-2)}
.f-input,.f-textarea,.f-select{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font-size:14px;line-height:24px;outline:none;background:#fff}
.f-input:focus,.f-textarea:focus,.f-select:focus{border-color:#cbd5e1;box-shadow:inset 0 0 0 2px #e5e7eb}
.f-help{font-size:12px;color:var(--muted-2)}
.f-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:2px}
.btn{padding:10px 14px;border-radius:10px;border:1px solid var(--line);background:#fff;cursor:pointer}
.btn.primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn:disabled{opacity:.6;cursor:not-allowed}

.composer{border-top:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 10px 0 10px;flex-shrink:0;max-width:100%}
textarea{width:100%;min-height:44px;max-height:140px;resize:none;border-radius:12px;border:1px solid var(--line);padding:10px 12px;font-size:14px;line-height:24px;outline:none}
textarea::placeholder{
  font-size: inherit;
  line-height: inherit;
  color: var(--placeholder,#9aa3ae);
}
.send{padding:10px 14px;border-radius:12px;border:1px solid var(--line);background:var(--accent);color:#fff;font-weight:700;cursor:pointer}
.send:disabled{opacity:.6;cursor:not-allowed}
.counter{align-self:end;font-size:12px;color:#94a3b8;margin-right:4px}

.typing{display:inline-flex;gap:4px;align-items:center}
.dot{width:6px;height:6px;border-radius:50%;background:#9ca3af;opacity:.6;animation:bounce 1.2s infinite ease-in-out}
.dot:nth-child(2){animation-delay:.15s}.dot:nth-child(3){animation-delay:.3s}
@keyframes bounce{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-4px);opacity:1}}

.footer{border-top:1px solid var(--line);padding:5px 12px;flex:0 0 auto}
.footer-inner{max-width:960px;margin:0 auto;font-size:12px;color:var(--muted);text-align:center;padding-bottom:calc(env(safe-area-inset-bottom))}
.watermark{padding:6px 12px;font-size:12px;color:var(--muted);text-align:center}
.watermark .inner{max-width:960px;margin:0 auto;padding-bottom:calc(env(safe-area-inset-bottom))}
.sources-min{margin-top:6px;font-size:12px;color:var(--muted);opacity:.85}

@media (max-width:768px){
  html,body{height:auto;min-height:100dvh;overflow:auto!important}
  input,textarea,select{font-size:16px}
  .topbar{position:fixed;left:0;right:0;top:0;z-index:300;padding-top:env(safe-area-inset-top);min-height:56px;height:auto;background:#fff}
  .container{max-width:100%;padding-left:12px;padding-right:12px;padding-top:var(--topbar-h,56px);padding-bottom:calc(var(--composer-h,96px) + var(--footer-h,44px));min-height:100dvh}
  .chat{min-height:0}
  .log{overflow:visible}
  .composer{position:fixed;left:0;right:0;bottom:var(--footer-h,30px);z-index:200;background:var(--page-bg);border-top:1px solid var(--line);max-width:100%;margin:0;padding-bottom:env(safe-area-inset-bottom);transform:translateY(calc(-1 * var(--lift,0px)));will-change:transform;transition:transform .15s ease-out}
  .footer{position:fixed;left:0;right:0;bottom:0;z-index:150;background:var(--page-bg);margin:0;border-top:1px solid var(--line)}
}


/* === ÆùÆ® ÅëÀÏ: º»¹® ÆùÆ® ÁöÁ¤ + Æû ÄÁÆ®·Ñ »ó¼Ó === */
:root{
  --font-ui: Pretendard, system-ui, -apple-system, "Segoe UI", Roboto,
             "Noto Sans KR", "Malgun Gothic", AppleSDGothicNeo, Arial, sans-serif;
}
body{ font-family: var(--font-ui); }

/* Æû ÄÁÆ®·ÑÀÌ º»¹® ÆùÆ®¸¦ »ó¼ÓÇϵµ·Ï */
input, select, textarea, button{ font-family: inherit; }

/* (¼±ÅÃ) 꺿 ÀÔ·Â⸸ È®½ÇÈ÷ °íÁ¤ÇÏ°í ½Í´Ù¸é ¾Æ·¡ ÇÑ ÁÙµµ Ãß°¡ */
.chat .composer textarea{ font-family: var(--font-ui); }