Update index.html

index.html

@@ -131,9 +131,7 @@
 .chat-msg{margin-bottom:10px;display:flex;gap:6px}.chat-msg.user{justify-content:flex-end}
 .chat-msg .cb3{max-width:75%;padding:8px 12px;border-radius:10px;font-size:11px;line-height:1.6}
 .chat-msg.user .cb3{background:#3b82f6;color:#fff;border-bottom-right-radius:3px}
-.chat-msg.ai .cb3{background:#f1f5f9;color:#1e293b;border-bottom-left-radius:3px}
-.chat-msg.ai .cb3 table{border-collapse:collapse;width:100%;margin:4px 0}.chat-msg.ai .cb3 td{border:1px solid #e2e8f0;padding:3px 6px;font-size:9px}
-.chat-msg.ai .cb3 tr:first-child td{background:#f8fafc;font-weight:700}
+.chat-msg.ai .cb3{background:#f1f5f9;color:#1e293b;border-bottom-left-radius:3px;font-size:11px;line-height:1.7}
 .chat-input{display:flex;gap:6px;padding:10px 14px;border-top:1px solid #e2e8f0;background:#fff}
 /* pocket card */
 .pkt{background:#fff;border:1px solid #e2e8f0;border-radius:6px;padding:8px;box-shadow:0 1px 2px rgba(0,0,0,.03);display:flex;flex-direction:column;gap:3px}.pkt:hover{border-color:#3b82f6}
@@ -446,7 +444,27 @@ function FileLibrary(){const[files,setFiles]=useState([]);const[ld,setLd]=useSta
         {f.author===getUser()&&<button className="btn btn-d" style={{fontSize:8,padding:'3px 6px'}} onClick={()=>del(f.id)}>✕</button>}</div></div></div>)}</div>}
 
 /* === Wizard MD + History + Side === */
-function md2html(t){if(!t)return '';return t.replace(/```(\w*)\n([\s\S]*?)```/g,'<pre style="background:#1e293b;color:#e2e8f0;padding:8px;border-radius:5px;font-size:9px;overflow-x:auto;font-family:JetBrains Mono,monospace;margin:4px 0"><code>$2</code></pre>').replace(/`([^`]+)`/g,'<code style="background:#f1f5f9;padding:1px 3px;border-radius:2px;font-size:9px">$1</code>').replace(/^\|(.+)\|$/gm,r=>{const c=r.split('|').filter(c=>c.trim());if(c.every(c=>/^[\s\-:]+$/.test(c)))return '';return '<tr>'+c.map(c=>'<td style="border:1px solid #e2e8f0;padding:3px 6px;font-size:9px">'+c.trim()+'</td>').join('')+'</tr>'}).replace(/(<tr>[\s\S]*?<\/tr>)/g,m=>'<table style="border-collapse:collapse;width:100%;margin:4px 0">'+m+'</table>').replace(/^### (.+)$/gm,'<div style="font-size:11px;font-weight:700;margin:6px 0 3px">$1</div>').replace(/^## (.+)$/gm,'<div style="font-size:12px;font-weight:700;margin:8px 0 3px">$1</div>').replace(/\*\*(.+?)\*\*/g,'<b>$1</b>').replace(/^[\-\*] (.+)$/gm,'<div style="padding-left:10px;margin:1px 0">• $1</div>').replace(/\n/g,'<br/>')}
+function md2html(t){if(!t)return '';
+  // Code blocks first
+  let h=t.replace(/```(\w*)\n([\s\S]*?)```/g,'<pre style="background:#1e293b;color:#e2e8f0;padding:8px;border-radius:5px;font-size:9px;overflow-x:auto;font-family:JetBrains Mono,monospace;margin:6px 0"><code>$2</code></pre>');
+  h=h.replace(/`([^`]+)`/g,'<code style="background:#f1f5f9;padding:1px 3px;border-radius:2px;font-size:9px">$1</code>');
+  // Tables - group consecutive | lines into one table
+  const lines=h.split('\n');const out=[];let tbl=[];
+  const flushTable=()=>{if(tbl.length===0)return;
+    let html='<div style="overflow-x:auto;margin:8px 0"><table style="border-collapse:collapse;width:100%;font-size:10px">';
+    let isFirst=true;
+    tbl.forEach(row=>{if(/^[\s\|\-:]+$/.test(row.replace(/\|/g,'').trim()))return;
+      const cells=row.split('|').slice(1,-1);if(cells.length===0)return;
+      if(isFirst){html+='<tr>'+cells.map(c=>'<th style="background:#f1f5f9;border:1px solid #e2e8f0;padding:6px 10px;font-weight:700;font-size:10px;color:#1e293b;text-align:left;white-space:nowrap">'+c.trim()+'</th>').join('')+'</tr>';isFirst=false;}
+      else{html+='<tr>'+cells.map(c=>'<td style="border:1px solid #e2e8f0;padding:6px 10px;font-size:10px;color:#475569;line-height:1.5;vertical-align:top">'+c.trim()+'</td>').join('')+'</tr>';}});
+    html+='</table></div>';out.push(html);tbl=[]};
+  lines.forEach(l=>{if(l.trim().startsWith('|')&&l.trim().endsWith('|')){tbl.push(l)}else{flushTable();out.push(l)}});flushTable();
+  h=out.join('\n');
+  h=h.replace(/^### (.+)$/gm,'<div style="font-size:12px;font-weight:700;margin:10px 0 4px;color:#1e293b;border-left:3px solid #3b82f6;padding-left:8px">$1</div>');
+  h=h.replace(/^## (.+)$/gm,'<div style="font-size:13px;font-weight:800;margin:12px 0 6px;color:#1e293b;border-bottom:1px solid #e2e8f0;padding-bottom:4px">$1</div>');
+  h=h.replace(/\*\*(.+?)\*\*/g,'<b style="color:#1e293b">$1</b>');
+  h=h.replace(/^[\-\*] (.+)$/gm,'<div style="padding-left:12px;margin:2px 0;position:relative"><span style="position:absolute;left:0">•</span> $1</div>');
+  h=h.replace(/\n/g,'<br/>');return h}
 
 function WizardTab({tasks,drops,pockets,reqs}){
   const[msgs,setMsgs]=useState(()=>{try{return JSON.parse(localStorage.getItem('vd_chat'))||[{role:'ai',text:'🧙 비드래프트 마법사입니다. 무엇이든 물어보세요!'}]}catch(e){return[{role:'ai',text:'🧙 마법사입니다.'}]}});
@@ -502,10 +520,10 @@ function DashOverview({tasks,drops,reqs}){
         <span style={{fontSize:12,fontWeight:700}}>🧙 {me}님의 브리핑</span>
         <button className="btn btn-g" onClick={()=>loadBrief(true)} disabled={briefLoading} style={{fontSize:8}}>{briefLoading?'⏳ 생성 중...':'🔄 새로 생성'}</button></div>
       {briefLoading&&!brief?<div style={{textAlign:'center',padding:10,color:'#94a3b8',fontSize:10}}>🧙 AI가 브리핑을 준비하고 있습니다...</div>
-      :brief?<><div dangerouslySetInnerHTML={{__html:md2html(brief.text)}} style={{fontSize:10,lineHeight:1.6,color:'#475569'}}/>
+      :brief?<><div dangerouslySetInnerHTML={{__html:md2html(brief.text)}} style={{fontSize:11,lineHeight:1.7,color:'#334155'}}/>
         {brief.org_text&&<div style={{marginTop:8,padding:10,background:'rgba(255,255,255,.8)',borderRadius:6,border:'1px solid #e2e8f0'}}>
           <div style={{fontSize:10,fontWeight:700,color:'#7c3aed',marginBottom:4}}>👑 조직 브리핑 (CEO 전용)</div>
-          <div dangerouslySetInnerHTML={{__html:md2html(brief.org_text)}} style={{fontSize:9,lineHeight:1.5,color:'#475569'}}/></div>}</>
+          <div dangerouslySetInnerHTML={{__html:md2html(brief.org_text)}} style={{fontSize:10,lineHeight:1.6,color:'#334155'}}/></div>}</>
       :<div style={{color:'#94a3b8',fontSize:9,textAlign:'center',padding:6}}>브리핑 로딩 중...</div>}
     </div>
     <div className="dash-search"><input value={search} onChange={e=>setSearch(e.target.value)} placeholder="🔍 전체 검색 (과제명, 담당자)"/></div>
@@ -545,9 +563,15 @@ function AiInsights(){
       <button className="btn btn-n" onClick={loadConn} disabled={cLoading} style={{padding:'10px',fontSize:11,justifyContent:'center'}}>🔮 {cLoading?'분석 중...':'연결 발견 실행'}</button>
       {isCeo&&<button className="btn btn-n" onClick={loadWeekly} disabled={wLoading} style={{padding:'10px',fontSize:11,justifyContent:'center',background:'linear-gradient(135deg,#7c3aed,#ec4899)'}}>👑 {wLoading?'분석 중...':'조직 지능 리포트'}</button>}
     </div>
-    {radar&&<div className="rpt"><div className="rpt-t">🎯 기회 레이더</div><div dangerouslySetInnerHTML={{__html:md2html(radar.text)}} style={{fontSize:10,lineHeight:1.6}}/></div>}
-    {conn&&<div className="rpt"><div className="rpt-t">🔮 연결 발견</div><div dangerouslySetInnerHTML={{__html:md2html(conn.text)}} style={{fontSize:10,lineHeight:1.6}}/></div>}
-    {weekly&&<div className="rpt" style={{borderColor:'#c4b5fd'}}><div className="rpt-t" style={{color:'#7c3aed'}}>👑 주간 조직 지능 리포트</div><div dangerouslySetInnerHTML={{__html:md2html(weekly.text)}} style={{fontSize:10,lineHeight:1.6}}/></div>}
+    {radar&&<div style={{background:'#fff',border:'1px solid #bfdbfe',borderRadius:10,padding:16,marginBottom:12,boxShadow:'0 2px 8px rgba(59,130,246,.08)'}}>
+      <div style={{fontSize:13,fontWeight:800,color:'#1e40af',marginBottom:8,display:'flex',alignItems:'center',gap:6}}>🎯 기회 레이더<span style={{fontSize:8,color:'#94a3b8',fontWeight:400,marginLeft:'auto'}}>AI 분석 결과</span></div>
+      <div dangerouslySetInnerHTML={{__html:md2html(radar.text)}} style={{fontSize:11,lineHeight:1.7,color:'#334155'}}/></div>}
+    {conn&&<div style={{background:'#fff',border:'1px solid #c4b5fd',borderRadius:10,padding:16,marginBottom:12,boxShadow:'0 2px 8px rgba(139,92,246,.08)'}}>
+      <div style={{fontSize:13,fontWeight:800,color:'#6d28d9',marginBottom:8,display:'flex',alignItems:'center',gap:6}}>🔮 연결 발견<span style={{fontSize:8,color:'#94a3b8',fontWeight:400,marginLeft:'auto'}}>크로스 분석</span></div>
+      <div dangerouslySetInnerHTML={{__html:md2html(conn.text)}} style={{fontSize:11,lineHeight:1.7,color:'#334155'}}/></div>}
+    {weekly&&<div style={{background:'linear-gradient(135deg,#faf5ff,#fdf2f8)',border:'1px solid #d8b4fe',borderRadius:10,padding:16,marginBottom:12,boxShadow:'0 2px 8px rgba(168,85,247,.1)'}}>
+      <div style={{fontSize:13,fontWeight:800,color:'#7c3aed',marginBottom:8,display:'flex',alignItems:'center',gap:6}}>👑 주간 조직 지능 리포트<span style={{fontSize:8,color:'#a78bfa',fontWeight:400,marginLeft:'auto'}}>CEO 전용</span></div>
+      <div dangerouslySetInnerHTML={{__html:md2html(weekly.text)}} style={{fontSize:11,lineHeight:1.7,color:'#334155'}}/></div>}
     {!radar&&!conn&&!weekly&&<div style={{textAlign:'center',color:'#94a3b8',fontSize:11,padding:40}}>
       <div style={{fontSize:36,marginBottom:10}}>🎯🔮</div>
       AI가 비드래프트의 전체 데이터를 분석하여<br/>사업 기회와 숨은 연결을 찾아냅니다.<br/><br/>