Files

412 lines
31 KiB
HTML

<html lang="ko" vid="0"><head vid="1">
<meta charset="UTF-8" vid="2">
<meta name="viewport" content="width=device-width, initial-scale=1.0" vid="3">
<title vid="4">Eroom AI Partners - 작업 공간</title>
<script src="https://cdn.tailwindcss.com/3.4.17" vid="5"></script>
<script src="https://unpkg.com/@phosphor-icons/web" vid="6"></script>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;display=swap" rel="stylesheet" vid="7">
<style vid="8">
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
::-webkit-scrollbar {
width: 8px;
height: 8px;
}
::-webkit-scrollbar-track {
background: #f1f5f9;
}
::-webkit-scrollbar-thumb {
background: #cbd5e1;
border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
background: #94a3b8;
}
</style>
<script vid="9">
tailwind.config = {
theme: {
extend: {
colors: {
brand: {
50: '#fdf3f6',
100: '#fbe5ec',
200: '#f7cddb',
300: '#f0a8c0',
400: '#e57a9e',
500: '#d5537f',
600: '#bd3763',
700: '#9d284e',
800: '#8b1e3f',
900: '#731d38',
950: '#400b1b',
}
}
}
}
}
</script>
</head>
<body class="bg-gray-50 text-gray-800 h-screen w-screen overflow-hidden flex flex-col antialiased" vid="10">
<header class="h-16 bg-white border-b border-gray-200 flex items-center justify-between px-6 shrink-0 z-20 shadow-sm relative" vid="11">
<div class="flex items-center gap-3 w-64 cursor-pointer" vid="12">
<div class="w-8 h-8 rounded-lg bg-brand-800 flex items-center justify-center shadow-inner" vid="13">
<i class="ph-bold ph-scales text-white text-lg" vid="14"></i>
</div>
<span class="font-bold text-xl tracking-tight text-gray-900" vid="15">Eroom AI <span class="text-brand-800" vid="16">Partners</span></span>
</div>
<div class="absolute left-1/2 transform -translate-x-1/2 flex items-center gap-2" vid="17">
<i class="ph-fill ph-scales text-brand-800 text-xl" vid="18"></i>
<h1 class="text-lg font-semibold text-gray-900" vid="19">김변호사의 작업 공간</h1>
</div>
<div class="flex items-center gap-4 w-64 justify-end" vid="20">
<button class="p-2 text-gray-500 hover:text-brand-800 hover:bg-brand-50 rounded-full transition-colors relative" vid="21">
<i class="ph ph-bell text-xl" vid="22"></i>
<span class="absolute top-1.5 right-1.5 w-2 h-2 bg-brand-500 rounded-full border border-white" vid="23"></span>
</button>
<div class="h-8 w-px bg-gray-200 mx-1" vid="24"></div>
<div class="flex items-center gap-3 cursor-pointer hover:bg-gray-50 py-1.5 px-3 rounded-xl transition-all border border-transparent hover:border-gray-200" vid="25">
<div class="flex flex-col text-right" vid="26">
<span class="text-sm font-semibold text-gray-900 leading-tight" vid="27">김대표 변호사</span>
<span class="text-xs text-brand-800 font-medium" vid="28">파트너</span>
</div>
<div class="w-10 h-10 rounded-full bg-brand-100 border border-brand-200 flex items-center justify-center text-brand-800 font-bold text-lg shadow-sm" vid="29">
김
</div>
<i class="ph ph-caret-down text-gray-400 text-sm" vid="30"></i>
</div>
</div>
</header>
<div class="flex flex-1 overflow-hidden h-full" vid="31">
<aside class="w-64 bg-white border-r border-gray-200 flex flex-col shrink-0 shadow-[4px_0_24px_rgba(0,0,0,0.02)] z-10" vid="32">
<div class="p-6 flex-1 flex flex-col" vid="33">
<nav class="space-y-1.5" vid="34">
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg bg-brand-50 text-brand-800 font-semibold transition-all shadow-sm border border-brand-100/50 group" vid="35">
<i class="ph-fill ph-squares-four text-xl" vid="36"></i>
<span vid="37">모든 작업실</span>
<span class="ml-auto bg-brand-100 text-brand-800 py-0.5 px-2 rounded-full text-xs font-bold" vid="38">8</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="39">
<i class="ph ph-star text-xl group-hover:text-amber-500 transition-colors" vid="40"></i>
<span vid="41">중요 작업실</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="42">
<i class="ph ph-users text-xl group-hover:text-blue-500 transition-colors" vid="43"></i>
<span vid="44">공유 작업실</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="45">
<i class="ph ph-clock text-xl group-hover:text-green-500 transition-colors" vid="46"></i>
<span vid="47">최근 작업실</span>
</a>
<a href="#" class="flex items-center gap-3 px-4 py-3 rounded-lg text-gray-600 hover:bg-gray-50 hover:text-gray-900 font-medium transition-colors group" vid="48">
<i class="ph ph-folders text-xl group-hover:text-brand-600 transition-colors" vid="49"></i>
<span vid="50">종류별 작업실</span>
</a>
</nav>
<div class="mt-auto pt-6 border-t border-gray-100" vid="51">
<button class="w-full flex items-center justify-center gap-2 bg-brand-800 hover:bg-brand-900 text-white px-4 py-3.5 rounded-xl font-medium transition-all shadow-md shadow-brand-800/20 active:scale-[0.98]" vid="52">
<i class="ph-bold ph-plus text-lg" vid="53"></i>
<span vid="54">신규 작업실 생성</span>
</button>
</div>
</div>
</aside>
<main class="flex-1 overflow-y-auto bg-[#F8F9FA] p-8" vid="55">
<div class="max-w-6xl mx-auto" vid="56">
<div class="flex items-center justify-between mb-8" vid="57">
<div vid="58">
<h2 class="text-2xl font-bold text-gray-900 tracking-tight" vid="59">모든 작업실</h2>
<p class="text-sm text-gray-500 mt-1" vid="60">총 8개의 작업실에 접근할 수 있습니다.</p>
</div>
<div class="flex items-center gap-3" vid="61">
<div class="relative" vid="62">
<i class="ph ph-magnifying-glass absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400" vid="63"></i>
<input type="text" placeholder="작업실 검색..." class="pl-9 pr-4 py-2 border border-gray-200 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-brand-800/20 focus:border-brand-800 w-64 bg-white shadow-sm transition-shadow" vid="64">
</div>
<button class="p-2 border border-gray-200 bg-white rounded-lg text-gray-600 hover:bg-gray-50 hover:text-brand-800 transition-colors shadow-sm" vid="65">
<i class="ph ph-faders text-lg" vid="66"></i>
</button>
</div>
</div>
<div class="grid grid-cols-2 gap-6" vid="67">
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="68">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="69"></div>
<div class="flex justify-between items-start mb-4" vid="70">
<div class="flex items-center gap-3" vid="71">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors" vid="72">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="73"></i>
</div>
<div vid="74">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="75">작업실 - 01</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="76">민사 소송</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="77">
<i class="ph-bold ph-dots-three text-xl" vid="78"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="79">손해배상 청구 소송 관련 증거 자료 분석 및 법리 검토를 위한 메인 작업 공간입니다.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="80">
<div class="flex -space-x-2" vid="81">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="82">김</div>
<div class="w-7 h-7 rounded-full bg-emerald-100 border-2 border-white flex items-center justify-center text-xs text-emerald-700 font-bold z-10" vid="83">이</div>
<div class="w-7 h-7 rounded-full bg-gray-100 border-2 border-white flex items-center justify-center text-[10px] text-gray-600 font-medium z-0" vid="84">+3</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="85">
<i class="ph ph-clock" vid="86"></i>
<span vid="87">10분 전 업데이트</span>
</div>
</div>
</div>
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="88">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="89"></div>
<div class="flex justify-between items-start mb-4" vid="90">
<div class="flex items-center gap-3" vid="91">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors" vid="92">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="93"></i>
</div>
<div vid="94">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="95">작업실 - 02</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="96">형사 소송</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="97">
<i class="ph-bold ph-dots-three text-xl" vid="98"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="99">특정경제범죄가중처벌등에관한법률위반 사건 진술 조서 AI 요약 및 쟁점 추출.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="100">
<div class="flex -space-x-2" vid="101">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="102">김</div>
<div class="w-7 h-7 rounded-full bg-purple-100 border-2 border-white flex items-center justify-center text-xs text-purple-700 font-bold z-10" vid="103">박</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="104">
<i class="ph ph-clock" vid="105"></i>
<span vid="106">2시간 전 업데이트</span>
</div>
</div>
</div>
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="107">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="108"></div>
<div class="flex justify-between items-start mb-4" vid="109">
<div class="flex items-center gap-3" vid="110">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors relative" vid="111">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="112"></i>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-amber-400 rounded-full border-2 border-white" vid="113"></div>
</div>
<div vid="114">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="115">작업실 - 03</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="116">기업 자문</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="117">
<i class="ph-bold ph-dots-three text-xl" vid="118"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="119">A기업 M&amp;A 관련 영문 계약서 초안 AI 번역 및 독소조항 자동 검토 리포트.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="120">
<div class="flex -space-x-2" vid="121">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="122">김</div>
<div class="w-7 h-7 rounded-full bg-rose-100 border-2 border-white flex items-center justify-center text-xs text-rose-700 font-bold z-10" vid="123">최</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="124">
<i class="ph ph-clock" vid="125"></i>
<span vid="126">오늘 오전 11:20</span>
</div>
</div>
</div>
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="127">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="128"></div>
<div class="flex justify-between items-start mb-4" vid="129">
<div class="flex items-center gap-3" vid="130">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors" vid="131">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="132"></i>
</div>
<div vid="133">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="134">작업실 - 04</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="135">지식재산권</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="136">
<i class="ph-bold ph-dots-three text-xl" vid="137"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="138">특허 침해 경고장 발송을 위한 선행기술조사 및 유사 판례 데이터베이스 구축.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="139">
<div class="flex -space-x-2" vid="140">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="141">김</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="142">
<i class="ph ph-clock" vid="143"></i>
<span vid="144">어제</span>
</div>
</div>
</div>
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="145">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="146"></div>
<div class="flex justify-between items-start mb-4" vid="147">
<div class="flex items-center gap-3" vid="148">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors" vid="149">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="150"></i>
</div>
<div vid="151">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="152">작업실 - 05</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="153">가사 소송</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="154">
<i class="ph-bold ph-dots-three text-xl" vid="155"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="156">이혼 및 재산분할 청구 소송 관련 상대방 재산 내역 추적 및 서면 작성 준비.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="157">
<div class="flex -space-x-2" vid="158">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="159">김</div>
<div class="w-7 h-7 rounded-full bg-orange-100 border-2 border-white flex items-center justify-center text-xs text-orange-700 font-bold z-10" vid="160">정</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="161">
<i class="ph ph-clock" vid="162"></i>
<span vid="163">2일 전</span>
</div>
</div>
</div>
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="164">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="165"></div>
<div class="flex justify-between items-start mb-4" vid="166">
<div class="flex items-center gap-3" vid="167">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors relative" vid="168">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="169"></i>
<div class="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full border-2 border-white" vid="170"></div>
</div>
<div vid="171">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="172">작업실 - 06</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="173">행정 소송</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="174">
<i class="ph-bold ph-dots-three text-xl" vid="175"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="176">영업정지처분 취소소송 집행정지 신청서 초안 작성 및 관련 행정규칙 리서치.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="177">
<div class="flex -space-x-2" vid="178">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="179">김</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="180">
<i class="ph ph-clock" vid="181"></i>
<span vid="182">3일 전</span>
</div>
</div>
</div>
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="183">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="184"></div>
<div class="flex justify-between items-start mb-4" vid="185">
<div class="flex items-center gap-3" vid="186">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors" vid="187">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="188"></i>
</div>
<div vid="189">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="190">작업실 - 07</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="191">노동 사건</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="192">
<i class="ph-bold ph-dots-three text-xl" vid="193"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="194">부당해고 구제신청 이유서 작성 지원 및 유사 노동위원회 판정례 데이터 추출.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="195">
<div class="flex -space-x-2" vid="196">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="197">김</div>
<div class="w-7 h-7 rounded-full bg-cyan-100 border-2 border-white flex items-center justify-center text-xs text-cyan-700 font-bold z-10" vid="198">강</div>
<div class="w-7 h-7 rounded-full bg-indigo-100 border-2 border-white flex items-center justify-center text-xs text-indigo-700 font-bold z-0" vid="199">조</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="200">
<i class="ph ph-clock" vid="201"></i>
<span vid="202">지난 주</span>
</div>
</div>
</div>
<div class="group bg-white rounded-2xl border border-gray-200 p-6 shadow-[0_2px_10px_rgba(0,0,0,0.02)] hover:shadow-[0_8px_30px_rgba(139,30,63,0.08)] hover:border-brand-800/30 transition-all duration-300 cursor-pointer flex flex-col h-[200px] relative overflow-hidden" vid="203">
<div class="absolute top-0 left-0 w-1 h-full bg-brand-800 opacity-0 group-hover:opacity-100 transition-opacity" vid="204"></div>
<div class="flex justify-between items-start mb-4" vid="205">
<div class="flex items-center gap-3" vid="206">
<div class="w-12 h-12 bg-brand-50 rounded-xl flex items-center justify-center group-hover:bg-brand-100 transition-colors" vid="207">
<i class="ph-fill ph-folder-open text-2xl text-brand-800" vid="208"></i>
</div>
<div vid="209">
<h3 class="text-lg font-bold text-gray-900 group-hover:text-brand-800 transition-colors" vid="210">작업실 - 08</h3>
<span class="inline-block mt-1 px-2 py-0.5 bg-gray-100 text-gray-600 text-[11px] font-medium rounded-md" vid="211">개인 프로젝트</span>
</div>
</div>
<button class="text-gray-400 hover:text-gray-700 p-1.5 rounded-lg hover:bg-gray-100 transition-colors" vid="212">
<i class="ph-bold ph-dots-three text-xl" vid="213"></i>
</button>
</div>
<p class="text-sm text-gray-500 line-clamp-2 mt-2 flex-1" vid="214">최신 대법원 전원합의체 판결 요지 정리 및 사내 세미나 발표 자료 초안 구성.</p>
<div class="flex items-center justify-between mt-4 pt-4 border-t border-gray-100" vid="215">
<div class="flex -space-x-2" vid="216">
<div class="w-7 h-7 rounded-full bg-blue-100 border-2 border-white flex items-center justify-center text-xs text-blue-700 font-bold z-20" vid="217">김</div>
</div>
<div class="flex items-center gap-1.5 text-xs font-medium text-gray-400" vid="218">
<i class="ph ph-clock" vid="219"></i>
<span vid="220">지난 주</span>
</div>
</div>
</div>
</div>
</div>
</main>
</div>
</body></html>