diff --git a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
index b14cc70..340594b 100755
--- a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
+++ b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
@@ -179,7 +179,7 @@ ${styles}
   ]
 
   return (
-    <div className="flex flex-col h-full w-full flex-1 overflow-hidden" style={{ background: 'var(--bg0)' }}>
+    <div className="flex flex-col h-full w-full flex-1 overflow-hidden bg-bg-0">
       <div ref={contentRef} className="flex-1 overflow-y-auto p-5" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
 
         {/* 헤더 */}
@@ -197,19 +197,19 @@ ${styles}
               placeholder="물질명 또는 CAS 번호 검색..."
               value={searchQuery}
               onChange={e => setSearchQuery(e.target.value)}
-              className="rounded-sm border border-border text-[10px] outline-none"
-              style={{ padding: '6px 12px', background: 'var(--bg3)', width: 200 }}
+              className="rounded-sm border border-border text-[10px] outline-none bg-bg-3 px-3 py-1.5"
+              style={{ width: 200 }}
             />
             <button
               onClick={handleExportPDF}
-              className="rounded-sm text-[10px] font-semibold cursor-pointer text-status-orange"
-              style={{ padding: '6px 14px', border: '1px solid rgba(249,115,22,.3)', background: 'rgba(249,115,22,.08)' }}
+              className="rounded-sm text-[10px] font-semibold cursor-pointer text-status-orange px-3.5 py-1.5"
+              style={{ border: '1px solid rgba(249,115,22,.3)', background: 'rgba(249,115,22,.08)' }}
             >📥 DB 다운로드</button>
           </div>
         </div>
 
         {/* 서브탭 */}
-        <div className="flex rounded-md border border-border mb-5" style={{ gap: 3, background: 'var(--bg3)', padding: 4 }} data-html2pdf-ignore>
+        <div className="flex rounded-md border border-border mb-5 bg-bg-3 p-1" style={{ gap: 3 }} data-html2pdf-ignore>
           {tabLabels.map((tab, idx) => (
             <button
               key={idx}
@@ -230,59 +230,59 @@ ${styles}
                 <span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 8px', borderRadius: 10, background: 'rgba(249,115,22,.1)' }}>Standard European Behaviour Classification</span>
               </div>
               <div className="text-[10px] text-text-2 leading-[1.7] mb-[14px]">
-                HNS 물질이 해양에 유출되었을 때의 <b style={{ color: 'var(--orange)' }}>물리·화학적 거동</b>에 따라 분류하는 국제 표준 체계입니다. 물질의 밀도, 증기압, 용해도에 따라 5개 주요 거동 유형과 혼합 유형으로 구분되며, 각 유형별로 대응 전략이 달라집니다.
+                HNS 물질이 해양에 유출되었을 때의 <b className="text-status-orange">물리·화학적 거동</b>에 따라 분류하는 국제 표준 체계입니다. 물질의 밀도, 증기압, 용해도에 따라 5개 주요 거동 유형과 혼합 유형으로 구분되며, 각 유형별로 대응 전략이 달라집니다.
               </div>
               <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 8, marginBottom: 14 }}>
                 {/* G: Gas */}
                 <div className="p-3 rounded-md text-center" style={{ background: 'rgba(168,85,247,.06)', border: '1px solid rgba(168,85,247,.2)' }}>
                   <div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(168,85,247,.15)' }}>💨</div>
-                  <div className="text-[13px] font-mono text-primary-purple" style={{ fontWeight: 800 }}>G</div>
-                  <div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Gas</div>
+                  <div className="text-[13px] font-mono font-extrabold text-primary-purple">G</div>
+                  <div className="text-[11px] font-bold my-1">Gas</div>
                   <div className="text-[8px] text-text-2 leading-normal">기체 상태로 대기 중 확산. 증기압이 높아 빠르게 증발</div>
-                  <div className="mt-1.5 text-[7px] font-semibold text-primary-purple" style={{ padding: 3, background: 'rgba(168,85,247,.08)', borderRadius: 3 }}>대기확산 모델 적용</div>
+                  <div className="mt-1.5 text-[7px] font-semibold text-primary-purple p-[3px]" style={{ background: 'rgba(168,85,247,.08)', borderRadius: 3 }}>대기확산 모델 적용</div>
                 </div>
                 {/* E: Evaporator */}
                 <div className="p-3 rounded-md text-center" style={{ background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.2)' }}>
                   <div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(239,68,68,.15)' }}>🔥</div>
-                  <div className="text-[13px] font-mono text-status-red" style={{ fontWeight: 800 }}>E</div>
-                  <div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Evaporator</div>
+                  <div className="text-[13px] font-mono font-extrabold text-status-red">E</div>
+                  <div className="text-[11px] font-bold my-1">Evaporator</div>
                   <div className="text-[8px] text-text-2 leading-normal">해수면에서 증발. 부유 후 기화하여 독성 가스 생성</div>
-                  <div className="mt-1.5 text-[7px] font-semibold text-status-red" style={{ padding: 3, background: 'rgba(239,68,68,.08)', borderRadius: 3 }}>대기+해양 복합 대응</div>
+                  <div className="mt-1.5 text-[7px] font-semibold text-status-red p-[3px]" style={{ background: 'rgba(239,68,68,.08)', borderRadius: 3 }}>대기+해양 복합 대응</div>
                 </div>
                 {/* F: Floater */}
                 <div className="p-3 rounded-md text-center" style={{ background: 'rgba(234,179,8,.06)', border: '1px solid rgba(234,179,8,.2)' }}>
                   <div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(234,179,8,.15)' }}>🟡</div>
-                  <div className="text-[13px] font-mono text-status-yellow" style={{ fontWeight: 800 }}>F</div>
-                  <div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Floater</div>
+                  <div className="text-[13px] font-mono font-extrabold text-status-yellow">F</div>
+                  <div className="text-[11px] font-bold my-1">Floater</div>
                   <div className="text-[8px] text-text-2 leading-normal">{'해수면 위에 부유. 비중 < 1.0, 불용성 물질'}</div>
-                  <div className="mt-1.5 text-[7px] font-semibold text-status-yellow" style={{ padding: 3, background: 'rgba(234,179,8,.08)', borderRadius: 3 }}>오일펜스 유사 봉쇄</div>
+                  <div className="mt-1.5 text-[7px] font-semibold text-status-yellow p-[3px]" style={{ background: 'rgba(234,179,8,.08)', borderRadius: 3 }}>오일펜스 유사 봉쇄</div>
                 </div>
                 {/* D: Dissolver */}
                 <div className="p-3 rounded-md text-center" style={{ background: 'rgba(6,182,212,.06)', border: '1px solid rgba(6,182,212,.2)' }}>
                   <div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(6,182,212,.15)' }}>💧</div>
-                  <div className="text-[13px] font-mono text-primary-cyan" style={{ fontWeight: 800 }}>D</div>
-                  <div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Dissolver</div>
+                  <div className="text-[13px] font-mono font-extrabold text-primary-cyan">D</div>
+                  <div className="text-[11px] font-bold my-1">Dissolver</div>
                   <div className="text-[8px] text-text-2 leading-normal">해수에 용해. 수중 확산하여 넓은 범위 오염</div>
-                  <div className="mt-1.5 text-[7px] font-semibold text-primary-cyan" style={{ padding: 3, background: 'rgba(6,182,212,.08)', borderRadius: 3 }}>해양확산 모델 적용</div>
+                  <div className="mt-1.5 text-[7px] font-semibold text-primary-cyan p-[3px]" style={{ background: 'rgba(6,182,212,.08)', borderRadius: 3 }}>해양확산 모델 적용</div>
                 </div>
                 {/* S: Sinker */}
                 <div className="p-3 rounded-md text-center" style={{ background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.2)' }}>
                   <div className="flex items-center justify-center text-[18px] mx-auto mb-2" style={{ width: 36, height: 36, borderRadius: '50%', background: 'rgba(34,197,94,.15)' }}>⬇</div>
-                  <div className="text-[13px] font-mono text-status-green" style={{ fontWeight: 800 }}>S</div>
-                  <div className="text-[11px] font-bold" style={{ margin: '4px 0' }}>Sinker</div>
+                  <div className="text-[13px] font-mono font-extrabold text-status-green">S</div>
+                  <div className="text-[11px] font-bold my-1">Sinker</div>
                   <div className="text-[8px] text-text-2 leading-normal">{'해저로 침강. 비중 > 1.0, 저층 오염 축적'}</div>
-                  <div className="mt-1.5 text-[7px] font-semibold text-status-green" style={{ padding: 3, background: 'rgba(34,197,94,.08)', borderRadius: 3 }}>저층 3D 모니터링 필수</div>
+                  <div className="mt-1.5 text-[7px] font-semibold text-status-green p-[3px]" style={{ background: 'rgba(34,197,94,.08)', borderRadius: 3 }}>저층 3D 모니터링 필수</div>
                 </div>
               </div>
               {/* 복합 거동 */}
-              <div className="rounded-md p-3 border border-border" style={{ background: 'var(--bg3)' }}>
+              <div className="rounded-md p-3 border border-border bg-bg-3">
                 <div className="text-[10px] font-bold mb-2">🔀 복합 거동 유형</div>
-                <div className="text-center" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 6, fontSize: 8 }}>
-                  <div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-primary-purple">GD</span><br/><span className="text-text-3">기체+용해</span></div>
-                  <div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-status-red">ED</span><br/><span className="text-text-3">증발+용해</span></div>
-                  <div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-status-yellow">FE</span><br/><span className="text-text-3">부유+증발</span></div>
-                  <div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-primary-cyan">FED</span><br/><span className="text-text-3">부유+증발+용해</span></div>
-                  <div className="rounded" style={{ padding: 6, background: 'var(--bg0)' }}><span className="font-bold text-status-green">SD</span><br/><span className="text-text-3">침강+용해</span></div>
+                <div className="text-center text-[8px]" style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: 6 }}>
+                  <div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-primary-purple">GD</span><br/><span className="text-text-3">기체+용해</span></div>
+                  <div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-status-red">ED</span><br/><span className="text-text-3">증발+용해</span></div>
+                  <div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-status-yellow">FE</span><br/><span className="text-text-3">부유+증발</span></div>
+                  <div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-primary-cyan">FED</span><br/><span className="text-text-3">부유+증발+용해</span></div>
+                  <div className="rounded p-1.5 bg-bg-0"><span className="font-bold text-status-green">SD</span><br/><span className="text-text-3">침강+용해</span></div>
                 </div>
               </div>
             </div>
@@ -312,20 +312,23 @@ ${styles}
 
               {/* 암모니아 */}
               {filtered.find(s => s.casNumber === '7664-41-7') && (
-              <div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--purple)' }}>
+              <div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--purple)' }}>
                 <div className="flex items-center justify-between mb-[10px]">
-                  <div><span className="text-sm font-mono text-primary-purple" style={{ fontWeight: 800 }}>NH₃</span> <span className="text-xs font-bold">암모니아</span></div>
-                  <div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-purple" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G/GD</span><span className="text-[8px] font-semibold text-status-red" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span></div>
+                  <div><span className="text-sm font-mono font-extrabold text-primary-purple">NH₃</span> <span className="text-xs font-bold">암모니아</span></div>
+                  <div className="flex gap-1">
+                    <span className="text-[8px] font-semibold text-primary-purple px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G/GD</span>
+                    <span className="text-[8px] font-semibold text-status-red px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span>
+                  </div>
                 </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">7664-41-7</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">17.03</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-33.4°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono">0.73</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono">N/A (불연)</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">매우 높음</span></div>
+                <div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">7664-41-7</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">17.03</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-33.4°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono">0.73</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono">N/A (불연)</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">매우 높음</span></div>
                 </div>
-                <div className="text-center" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4, fontSize: 7 }}>
+                <div className="text-center text-[7px]" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
                   <div style={{ padding: 4, background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.12)', borderRadius: 3 }}><span className="text-status-green">AEGL-2</span><br/><b>160 ppm</b></div>
                   <div style={{ padding: 4, background: 'rgba(249,115,22,.06)', border: '1px solid rgba(249,115,22,.12)', borderRadius: 3 }}><span className="text-status-orange">ERPG-2</span><br/><b>150 ppm</b></div>
                   <div style={{ padding: 4, background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.12)', borderRadius: 3 }}><span className="text-status-red">IDLH</span><br/><b>300 ppm</b></div>
@@ -336,20 +339,23 @@ ${styles}
 
               {/* 메탄올 */}
               {filtered.find(s => s.casNumber === '67-56-1') && (
-              <div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--cyan)' }}>
+              <div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--cyan)' }}>
                 <div className="flex items-center justify-between mb-[10px]">
-                  <div><span className="text-sm font-mono text-primary-cyan" style={{ fontWeight: 800 }}>CH₃OH</span> <span className="text-xs font-bold">메탄올</span></div>
-                  <div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-cyan" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(6,182,212,.1)' }}>ED</span><span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span></div>
+                  <div><span className="text-sm font-mono font-extrabold text-primary-cyan">CH₃OH</span> <span className="text-xs font-bold">메탄올</span></div>
+                  <div className="flex gap-1">
+                    <span className="text-[8px] font-semibold text-primary-cyan px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(6,182,212,.1)' }}>ED</span>
+                    <span className="text-[8px] font-semibold text-status-orange px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span>
+                  </div>
                 </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">67-56-1</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">32.04</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">64.7°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono">0.79</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">11°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">완전 혼화</span></div>
+                <div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">67-56-1</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">32.04</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">64.7°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono">0.79</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">11°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">완전 혼화</span></div>
                 </div>
-                <div className="text-center" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4, fontSize: 7 }}>
+                <div className="text-center text-[7px]" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr 1fr', gap: 4 }}>
                   <div style={{ padding: 4, background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.12)', borderRadius: 3 }}><span className="text-status-green">AEGL-2</span><br/><b>2,100 ppm</b></div>
                   <div style={{ padding: 4, background: 'rgba(249,115,22,.06)', border: '1px solid rgba(249,115,22,.12)', borderRadius: 3 }}><span className="text-status-orange">ERPG-2</span><br/><b>1,000 ppm</b></div>
                   <div style={{ padding: 4, background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.12)', borderRadius: 3 }}><span className="text-status-red">IDLH</span><br/><b>6,000 ppm</b></div>
@@ -360,18 +366,21 @@ ${styles}
 
               {/* 수소 */}
               {filtered.find(s => s.casNumber === '1333-74-0') && (
-              <div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--red)' }}>
+              <div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--red)' }}>
                 <div className="flex items-center justify-between mb-[10px]">
-                  <div><span className="text-sm font-mono text-status-red" style={{ fontWeight: 800 }}>H₂</span> <span className="text-xs font-bold">수소</span></div>
-                  <div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-purple" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span><span className="text-[8px] font-semibold text-status-red" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>폭발</span></div>
+                  <div><span className="text-sm font-mono font-extrabold text-status-red">H₂</span> <span className="text-xs font-bold">수소</span></div>
+                  <div className="flex gap-1">
+                    <span className="text-[8px] font-semibold text-primary-purple px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span>
+                    <span className="text-[8px] font-semibold text-status-red px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>폭발</span>
+                  </div>
                 </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">1333-74-0</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">2.016</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-252.9°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중(기체):</span> <span className="font-mono">0.07</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">LFL:</span> <span className="font-mono text-status-red">4.0%</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">UFL:</span> <span className="font-mono text-status-red">75.0%</span></div>
+                <div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">1333-74-0</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">2.016</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-252.9°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중(기체):</span> <span className="font-mono">0.07</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">LFL:</span> <span className="font-mono text-status-red">4.0%</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">UFL:</span> <span className="font-mono text-status-red">75.0%</span></div>
                 </div>
                 <div className="mt-1.5 text-[8px] text-text-3 leading-normal">폭발 범위 극히 넓음(4~75%). 무색·무취로 감지 불가. 극저온 액화수소 유출 시 BLEVE 위험. 급속 상승 확산.</div>
               </div>
@@ -379,18 +388,21 @@ ${styles}
 
               {/* LNG */}
               {filtered.find(s => s.nameEn === 'LPG (Propane/Butane)' || s.casNumber === '74-82-8') && (
-              <div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--orange)' }}>
+              <div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--orange)' }}>
                 <div className="flex items-center justify-between mb-[10px]">
-                  <div><span className="text-sm font-mono text-status-orange" style={{ fontWeight: 800 }}>CH₄</span> <span className="text-xs font-bold">LNG (메탄)</span></div>
-                  <div className="flex gap-1"><span className="text-[8px] font-semibold text-primary-purple" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span><span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화/폭발</span></div>
+                  <div><span className="text-sm font-mono font-extrabold text-status-orange">CH₄</span> <span className="text-xs font-bold">LNG (메탄)</span></div>
+                  <div className="flex gap-1">
+                    <span className="text-[8px] font-semibold text-primary-purple px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(168,85,247,.1)' }}>G</span>
+                    <span className="text-[8px] font-semibold text-status-orange px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화/폭발</span>
+                  </div>
                 </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">74-82-8</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">16.04</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-161.5°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중(액체):</span> <span className="font-mono">0.42</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">LFL:</span> <span className="font-mono text-status-orange">5.0%</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">UFL:</span> <span className="font-mono text-status-orange">15.0%</span></div>
+                <div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">74-82-8</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">16.04</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono text-primary-cyan">-161.5°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중(액체):</span> <span className="font-mono">0.42</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">LFL:</span> <span className="font-mono text-status-orange">5.0%</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">UFL:</span> <span className="font-mono text-status-orange">15.0%</span></div>
                 </div>
                 <div className="mt-1.5 text-[8px] text-text-3 leading-normal">극저온(-162°C) 유출 시 RPT(급속상변환폭발), Pool Fire 위험. Flash 기화 → 가연성 가스운 형성. 인천·평택항 LNG 물동량 상위.</div>
               </div>
@@ -398,37 +410,43 @@ ${styles}
 
               {/* 페놀 */}
               {filtered.find(s => s.casNumber === '108-95-2' || s.name === '페놀') && (
-              <div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--green)' }}>
+              <div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--green)' }}>
                 <div className="flex items-center justify-between mb-[10px]">
-                  <div><span className="text-sm font-mono text-status-green" style={{ fontWeight: 800 }}>C₆H₅OH</span> <span className="text-xs font-bold">페놀</span></div>
-                  <div className="flex gap-1"><span className="text-[8px] font-semibold text-status-green" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(34,197,94,.1)' }}>S/SD</span><span className="text-[8px] font-semibold text-status-red" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span></div>
+                  <div><span className="text-sm font-mono font-extrabold text-status-green">C₆H₅OH</span> <span className="text-xs font-bold">페놀</span></div>
+                  <div className="flex gap-1">
+                    <span className="text-[8px] font-semibold text-status-green px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(34,197,94,.1)' }}>S/SD</span>
+                    <span className="text-[8px] font-semibold text-status-red px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(239,68,68,.1)' }}>독성</span>
+                  </div>
                 </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">108-95-2</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">94.11</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono">181.7°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono text-status-green">1.07 (침강)</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">79°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">84 g/L</span></div>
+                <div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">108-95-2</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">94.11</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono">181.7°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono text-status-green">1.07 (침강)</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">79°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono text-primary-cyan">84 g/L</span></div>
                 </div>
-                <div className="mt-1.5 text-[8px] text-text-3 leading-normal">비중 1.07 → <b style={{ color: 'var(--green)' }}>Sinker 특성</b>으로 저층 축적. ROMS 검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).</div>
+                <div className="mt-1.5 text-[8px] text-text-3 leading-normal">비중 1.07 → <b className="text-status-green">Sinker 특성</b>으로 저층 축적. ROMS 검증 결과 저층 농도가 표층의 3.5배. 해양산업시설 배출 주요 HNS (31.8kg/일).</div>
               </div>
               )}
 
               {/* 톨루엔 */}
               {filtered.find(s => s.casNumber === '108-88-3') && (
-              <div className="rounded-[10px] p-[14px] border border-border" style={{ background: 'var(--bg3)', borderLeft: '4px solid var(--yellow)' }}>
+              <div className="rounded-[10px] p-[14px] border border-border bg-bg-3" style={{ borderLeft: '4px solid var(--yellow)' }}>
                 <div className="flex items-center justify-between mb-[10px]">
-                  <div><span className="text-sm font-mono text-status-yellow" style={{ fontWeight: 800 }}>C₇H₈</span> <span className="text-xs font-bold">톨루엔</span></div>
-                  <div className="flex gap-1"><span className="text-[8px] font-semibold text-status-yellow" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(234,179,8,.1)' }}>FE</span><span className="text-[8px] font-semibold text-status-orange" style={{ padding: '2px 6px', borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span></div>
+                  <div><span className="text-sm font-mono font-extrabold text-status-yellow">C₇H₈</span> <span className="text-xs font-bold">톨루엔</span></div>
+                  <div className="flex gap-1">
+                    <span className="text-[8px] font-semibold text-status-yellow px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(234,179,8,.1)' }}>FE</span>
+                    <span className="text-[8px] font-semibold text-status-orange px-1.5 py-0.5" style={{ borderRadius: 3, background: 'rgba(249,115,22,.1)' }}>인화성</span>
+                  </div>
                 </div>
-                <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4, fontSize: 8, marginBottom: 8 }}>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">CAS:</span> <span className="font-mono">108-88-3</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">분자량:</span> <span className="font-mono">92.14</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">끓는점:</span> <span className="font-mono">110.6°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">비중:</span> <span className="font-mono text-status-yellow">0.87 (부유)</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">4°C</span></div>
-                  <div className="rounded" style={{ padding: '4px 6px', background: 'var(--bg0)' }}><span className="text-text-3">용해도:</span> <span className="font-mono">0.52 g/L</span></div>
+                <div className="text-[8px] mb-2" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 4 }}>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">CAS:</span> <span className="font-mono">108-88-3</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">분자량:</span> <span className="font-mono">92.14</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">끓는점:</span> <span className="font-mono">110.6°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">비중:</span> <span className="font-mono text-status-yellow">0.87 (부유)</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">인화점:</span> <span className="font-mono text-status-orange">4°C</span></div>
+                  <div className="rounded bg-bg-0 px-1.5 py-1"><span className="text-text-3">용해도:</span> <span className="font-mono">0.52 g/L</span></div>
                 </div>
                 <div className="mt-1.5 text-[8px] text-text-3 leading-normal">해수면 부유 → 증발. 인화점 극히 낮아(4°C) 화재 위험 상시. 석유화학 산업의 대표적 HNS. 울산항 주요 취급물질.</div>
               </div>
@@ -442,49 +460,49 @@ ${styles}
           <div>
             <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 16, marginBottom: 16 }}>
               {/* AEGL 기준 */}
-              <div className="rounded-[10px] p-4 border border-border" style={{ background: 'var(--bg3)', borderTop: '3px solid var(--green)' }}>
+              <div className="rounded-[10px] p-4 border border-border bg-bg-3" style={{ borderTop: '3px solid var(--green)' }}>
                 <div className="text-[13px] font-bold text-status-green mb-[10px]">🟢 AEGL (Acute Exposure Guideline Level)</div>
                 <div className="text-[9px] text-text-3 mb-[10px]">미국 EPA — 일반인 급성 노출 기준 (10분, 30분, 60분, 4시간, 8시간)</div>
                 <div className="flex flex-col gap-1.5">
-                  <div className="rounded-sm" style={{ padding: '8px 10px', background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)', borderLeft: '4px solid var(--green)' }}>
+                  <div className="rounded-sm px-2.5 py-2" style={{ background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)', borderLeft: '4px solid var(--green)' }}>
                     <div className="text-[11px] font-bold text-status-green">AEGL-1 (불쾌감)</div>
                     <div className="text-[9px] text-text-2 leading-normal">눈에 띄는 불쾌감, 자극 또는 비감각적 증상. 노출 중단 시 증상 소멸.</div>
                   </div>
-                  <div className="rounded-sm" style={{ padding: '8px 10px', background: 'rgba(249,115,22,.04)', border: '1px solid rgba(249,115,22,.12)', borderLeft: '4px solid var(--orange)' }}>
+                  <div className="rounded-sm px-2.5 py-2" style={{ background: 'rgba(249,115,22,.04)', border: '1px solid rgba(249,115,22,.12)', borderLeft: '4px solid var(--orange)' }}>
                     <div className="text-[11px] font-bold text-status-orange">AEGL-2 (비가역적 영향)</div>
-                    <div className="text-[9px] text-text-2 leading-normal">비가역적·장기적 건강 영향 또는 대피 능력 저하. <b style={{ color: 'var(--orange)' }}>대피 기준으로 사용</b>.</div>
+                    <div className="text-[9px] text-text-2 leading-normal">비가역적·장기적 건강 영향 또는 대피 능력 저하. <b className="text-status-orange">대피 기준으로 사용</b>.</div>
                   </div>
-                  <div className="rounded-sm" style={{ padding: '8px 10px', background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.12)', borderLeft: '4px solid var(--red)' }}>
+                  <div className="rounded-sm px-2.5 py-2" style={{ background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.12)', borderLeft: '4px solid var(--red)' }}>
                     <div className="text-[11px] font-bold text-status-red">AEGL-3 (생명 위협)</div>
-                    <div className="text-[9px] text-text-2 leading-normal">생명을 위협하는 건강 영향 또는 사망. <b style={{ color: 'var(--red)' }}>즉시 대피·격리 구역 설정</b>.</div>
+                    <div className="text-[9px] text-text-2 leading-normal">생명을 위협하는 건강 영향 또는 사망. <b className="text-status-red">즉시 대피·격리 구역 설정</b>.</div>
                   </div>
                 </div>
               </div>
 
               {/* ERPG / IDLH */}
-              <div className="rounded-[10px] p-4 border border-border" style={{ background: 'var(--bg3)', borderTop: '3px solid var(--red)' }}>
+              <div className="rounded-[10px] p-4 border border-border bg-bg-3" style={{ borderTop: '3px solid var(--red)' }}>
                 <div className="text-[13px] font-bold text-status-red mb-[10px]">🔴 ERPG &amp; IDLH</div>
                 <div className="flex flex-col gap-2">
                   <div>
                     <div className="text-[10px] font-bold text-status-orange mb-1">ERPG (Emergency Response Planning Guideline)</div>
                     <div className="text-[9px] text-text-3 mb-1.5">AIHA 발행 — 1시간 노출 기준</div>
                     <div className="flex flex-col gap-1">
-                      <div className="text-[8px] rounded" style={{ padding: '6px 8px', background: 'rgba(34,197,94,.03)', border: '1px solid rgba(34,197,94,.1)', borderLeft: '3px solid var(--green)' }}><b style={{ color: 'var(--green)' }}>ERPG-1</b> — 일시적 건강 영향, 냄새 감지</div>
-                      <div className="text-[8px] rounded" style={{ padding: '6px 8px', background: 'rgba(249,115,22,.03)', border: '1px solid rgba(249,115,22,.1)', borderLeft: '3px solid var(--orange)' }}><b style={{ color: 'var(--orange)' }}>ERPG-2</b> — 비가역적 영향, 대피 판단 기준</div>
-                      <div className="text-[8px] rounded" style={{ padding: '6px 8px', background: 'rgba(239,68,68,.03)', border: '1px solid rgba(239,68,68,.1)', borderLeft: '3px solid var(--red)' }}><b style={{ color: 'var(--red)' }}>ERPG-3</b> — 생명 위협 농도</div>
+                      <div className="text-[8px] rounded px-2 py-1.5" style={{ background: 'rgba(34,197,94,.03)', border: '1px solid rgba(34,197,94,.1)', borderLeft: '3px solid var(--green)' }}><b className="text-status-green">ERPG-1</b> — 일시적 건강 영향, 냄새 감지</div>
+                      <div className="text-[8px] rounded px-2 py-1.5" style={{ background: 'rgba(249,115,22,.03)', border: '1px solid rgba(249,115,22,.1)', borderLeft: '3px solid var(--orange)' }}><b className="text-status-orange">ERPG-2</b> — 비가역적 영향, 대피 판단 기준</div>
+                      <div className="text-[8px] rounded px-2 py-1.5" style={{ background: 'rgba(239,68,68,.03)', border: '1px solid rgba(239,68,68,.1)', borderLeft: '3px solid var(--red)' }}><b className="text-status-red">ERPG-3</b> — 생명 위협 농도</div>
                     </div>
                   </div>
-                  <div className="mt-1 rounded-sm" style={{ padding: 10, background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.15)' }}>
+                  <div className="mt-1 rounded-sm p-2.5" style={{ background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.15)' }}>
                     <div className="text-[10px] font-bold text-status-red mb-1">IDLH (Immediately Dangerous to Life or Health)</div>
                     <div className="text-[9px] text-text-3 mb-1">NIOSH — 30분 노출 시 생명·건강에 즉각적 위험</div>
-                    <div className="text-[9px] text-text-2 leading-normal"><b style={{ color: 'var(--red)' }}>최대 허용 노출 한계</b>로서 이 농도를 초과하면 자급식 호흡장치(SCBA) 없이는 진입 불가. WING 시스템에서 위험구역 자동 설정의 기준값으로 사용.</div>
+                    <div className="text-[9px] text-text-2 leading-normal"><b className="text-status-red">최대 허용 노출 한계</b>로서 이 농도를 초과하면 자급식 호흡장치(SCBA) 없이는 진입 불가. WING 시스템에서 위험구역 자동 설정의 기준값으로 사용.</div>
                   </div>
                 </div>
               </div>
             </div>
 
             {/* 물질별 위험도 비교표 */}
-            <div className="rounded-[10px] p-4 border border-border" style={{ background: 'var(--bg3)' }}>
+            <div className="rounded-[10px] p-4 border border-border bg-bg-3">
               <div className="text-xs font-bold mb-3">📊 주요 HNS 물질별 위험도 기준 비교 (ppm)</div>
               <table style={{ width: '100%', borderCollapse: 'collapse', fontSize: 9 }}>
                 <thead>
@@ -571,18 +589,18 @@ ${styles}
         {activeTab === 3 && (
           <div>
             {/* ── 검색창 ── */}
-            <div className="rounded-[10px] p-4 mb-4 border border-border" style={{ background: 'var(--bg3)' }}>
+            <div className="rounded-[10px] p-4 mb-4 border border-border bg-bg-3">
               <div className="flex items-center justify-between mb-[14px]">
                 <div className="text-[13px] font-bold">🔍 HNS 물질 통합 검색 <span className="text-[9px] font-normal text-text-3">(화물약어·제품명·동의어·CAS·UN번호 통합)</span></div>
                 <div className="flex gap-1">
-                  <button className="text-[9px] font-semibold cursor-pointer text-status-orange rounded" style={{ padding: '5px 10px', border: '1px solid rgba(249,115,22,.25)', background: 'rgba(249,115,22,.08)' }}>📥 DB 다운로드</button>
-                  <button className="text-[9px] font-semibold cursor-pointer text-primary-cyan rounded" style={{ padding: '5px 10px', border: '1px solid rgba(6,182,212,.25)', background: 'rgba(6,182,212,.08)' }}>🔗 Port-MIS 연동</button>
+                  <button className="text-[9px] font-semibold cursor-pointer text-status-orange rounded px-2.5 py-[5px]" style={{ border: '1px solid rgba(249,115,22,.25)', background: 'rgba(249,115,22,.08)' }}>📥 DB 다운로드</button>
+                  <button className="text-[9px] font-semibold cursor-pointer text-primary-cyan rounded px-2.5 py-[5px]" style={{ border: '1px solid rgba(6,182,212,.25)', background: 'rgba(6,182,212,.08)' }}>🔗 Port-MIS 연동</button>
                 </div>
               </div>
               <div className="flex gap-2 mb-[10px] items-center">
                 <div className="shrink-0 flex items-center gap-1">
                   <span className="text-[9px] font-semibold text-text-3">구분:</span>
-                  <select value={hmsSearchType} onChange={e => { setHmsSearchType(e.target.value as typeof hmsSearchType); setHmsPage(1) }} className="rounded-sm border border-border text-[10px] outline-none" style={{ padding: '6px 10px', background: 'var(--bg0)', minWidth: 130 }}>
+                  <select value={hmsSearchType} onChange={e => { setHmsSearchType(e.target.value as typeof hmsSearchType); setHmsPage(1) }} className="rounded-sm border border-border text-[10px] outline-none bg-bg-0 px-2.5 py-1.5" style={{ minWidth: 130 }}>
                     <option value="abbr">❶ 약자/제품명</option>
                     <option value="korName">❷ 국문명 (동의어)</option>
                     <option value="engName">❸ 영문명 (동의어)</option>
@@ -590,19 +608,19 @@ ${styles}
                     <option value="un">❺ UN번호</option>
                   </select>
                 </div>
-                <input type="text" value={hmsSearchInput} onChange={e => { setHmsSearchInput(e.target.value); setHmsPage(1) }} placeholder={hmsSearchType === 'abbr' ? '검색어 입력 (부호·띄어쓰기 제외)' : hmsSearchType === 'cas' ? 'CAS번호 입력 (예: 71-43-2)' : hmsSearchType === 'un' ? 'UN번호 입력 (예: 1114)' : '검색어 입력 (* 동의어 검색)'} className="flex-1 rounded-sm border border-border text-[11px] outline-none" style={{ padding: '8px 12px', background: 'var(--bg0)' }} />
-                <button onClick={() => setHmsPage(1)} className="text-[11px] font-bold cursor-pointer shrink-0 rounded-sm" style={{ padding: '8px 20px', border: 'none', background: 'linear-gradient(135deg,var(--orange),var(--red))', color: '#fff' }}>🔎 검색</button>
+                <input type="text" value={hmsSearchInput} onChange={e => { setHmsSearchInput(e.target.value); setHmsPage(1) }} placeholder={hmsSearchType === 'abbr' ? '검색어 입력 (부호·띄어쓰기 제외)' : hmsSearchType === 'cas' ? 'CAS번호 입력 (예: 71-43-2)' : hmsSearchType === 'un' ? 'UN번호 입력 (예: 1114)' : '검색어 입력 (* 동의어 검색)'} className="flex-1 rounded-sm border border-border text-[11px] outline-none bg-bg-0 px-3 py-2" />
+                <button onClick={() => setHmsPage(1)} className="text-[11px] font-bold cursor-pointer shrink-0 rounded-sm text-white px-5 py-2" style={{ border: 'none', background: 'linear-gradient(135deg,var(--orange),var(--red))' }}>🔎 검색</button>
               </div>
-              <div className="text-[8px] text-text-3" style={{ lineHeight: 1.6 }}>
-                ※ 국문명·영문명 검색 시 <b style={{ color: 'var(--orange)' }}>동의어까지 검색</b> &nbsp;|&nbsp; 약자/제품명 검색 시 <b style={{ color: 'var(--orange)' }}>부호, 띄어쓰기 제외</b> 후 검색 &nbsp;|&nbsp; 총 <b style={{ color: 'var(--cyan)' }}>1,316종</b> 등록 (화물적부도 277종 / 해양시설 56종 / 용선자 화물코드 983종)
+              <div className="text-[8px] text-text-3 leading-[1.6]">
+                ※ 국문명·영문명 검색 시 <b className="text-status-orange">동의어까지 검색</b> &nbsp;|&nbsp; 약자/제품명 검색 시 <b className="text-status-orange">부호, 띄어쓰기 제외</b> 후 검색 &nbsp;|&nbsp; 총 <b className="text-primary-cyan">1,316종</b> 등록 (화물적부도 277종 / 해양시설 56종 / 용선자 화물코드 983종)
               </div>
             </div>
 
             {/* ── 검색 결과 테이블 ── */}
-            <div className="rounded-[10px] p-4 mb-4 border border-border" style={{ background: 'var(--bg3)' }}>
+            <div className="rounded-[10px] p-4 mb-4 border border-border bg-bg-3">
               <div className="flex items-center justify-between mb-[10px]">
                 <div className="text-[11px] font-bold">📋 검색 결과 <span className="text-[9px] font-normal text-text-3">— {hmsTotal}건 조회</span></div>
-                <select value={hmsFilterSebc} onChange={e => { setHmsFilterSebc(e.target.value); setHmsPage(1) }} className="rounded border border-border text-[9px] text-text-2 outline-none" style={{ padding: '3px 8px', background: 'var(--bg0)' }}>
+                <select value={hmsFilterSebc} onChange={e => { setHmsFilterSebc(e.target.value); setHmsPage(1) }} className="rounded border border-border text-[9px] text-text-2 outline-none bg-bg-0 px-2 py-[3px]">
                   <option>전체 거동분류</option><option>G (Gas)</option><option>E (Evaporator)</option><option>F (Floater)</option><option>D (Dissolver)</option><option>S (Sinker)</option>
                 </select>
               </div>
@@ -648,13 +666,13 @@ ${styles}
                 </table>
               </div>
               <div className="mt-[10px] flex items-center justify-between text-[9px] text-text-3">
-                <span>총 <b style={{ color: 'var(--orange)' }}>{hmsTotal.toLocaleString()}</b>종 등록 · Port-MIS 화물적부도 연동 · 해경청 물질정보집 · IBC CODE 692종</span>
+                <span>총 <b className="text-status-orange">{hmsTotal.toLocaleString()}</b>종 등록 · Port-MIS 화물적부도 연동 · 해경청 물질정보집 · IBC CODE 692종</span>
                 <div className="flex gap-1">
-                  <button onClick={() => setHmsPage(p => Math.max(1, p - 1))} disabled={hmsPage <= 1} className="rounded cursor-pointer border border-border text-[9px] text-text-2" style={{ padding: '4px 10px', background: 'var(--bg0)', opacity: hmsPage <= 1 ? 0.4 : 1 }}>◀</button>
+                  <button onClick={() => setHmsPage(p => Math.max(1, p - 1))} disabled={hmsPage <= 1} className="rounded cursor-pointer border border-border text-[9px] text-text-2 bg-bg-0 px-2.5 py-1" style={{ opacity: hmsPage <= 1 ? 0.4 : 1 }}>◀</button>
                   {Array.from({ length: Math.min(hmsTotalPages, 5) }, (_, i) => i + 1).map(p => (
-                    <button key={p} onClick={() => setHmsPage(p)} className="rounded cursor-pointer border border-border text-[9px]" style={{ padding: '4px 10px', background: p === hmsPage ? 'rgba(249,115,22,.08)' : 'var(--bg0)', color: p === hmsPage ? 'var(--orange)' : 'var(--t2)', fontWeight: p === hmsPage ? 600 : 400 }}>{p}</button>
+                    <button key={p} onClick={() => setHmsPage(p)} className="rounded cursor-pointer border border-border text-[9px] px-2.5 py-1" style={{ background: p === hmsPage ? 'rgba(249,115,22,.08)' : 'var(--bg0)', color: p === hmsPage ? 'var(--orange)' : 'var(--t2)', fontWeight: p === hmsPage ? 600 : 400 }}>{p}</button>
                   ))}
-                  <button onClick={() => setHmsPage(p => Math.min(hmsTotalPages, p + 1))} disabled={hmsPage >= hmsTotalPages} className="rounded cursor-pointer border border-border text-[9px] text-text-2" style={{ padding: '4px 10px', background: 'var(--bg0)', opacity: hmsPage >= hmsTotalPages ? 0.4 : 1 }}>▶</button>
+                  <button onClick={() => setHmsPage(p => Math.min(hmsTotalPages, p + 1))} disabled={hmsPage >= hmsTotalPages} className="rounded cursor-pointer border border-border text-[9px] text-text-2 bg-bg-0 px-2.5 py-1" style={{ opacity: hmsPage >= hmsTotalPages ? 0.4 : 1 }}>▶</button>
                 </div>
               </div>
             </div>
diff --git a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
index 5d194fb..b7052f7 100755
--- a/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsLeftPanel.tsx
@@ -169,7 +169,7 @@ export function IncidentsLeftPanel({
   }
 
   return (
-    <div className="flex flex-col bg-bg-1 border-r border-border overflow-hidden" style={{ width: '360px', flexShrink: 0 }}>
+    <div className="flex flex-col bg-bg-1 border-r border-border overflow-hidden shrink-0" style={{ width: '360px' }}>
       {/* Search */}
       <div className="px-4 py-3 border-b border-border shrink-0">
         <div className="relative">
@@ -261,12 +261,12 @@ export function IncidentsLeftPanel({
       </div>
 
       {/* Count */}
-      <div className="px-4 py-1.5 text-[11px] text-text-3 shrink-0" style={{ borderBottom: '1px solid rgba(30,42,74,0.3)' }}>
+      <div className="px-4 py-1.5 text-[11px] text-text-3 shrink-0 border-b border-border">
         총 {filteredIncidents.length}건
       </div>
 
       {/* Incident List */}
-      <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin', scrollbarColor: 'var(--bdL) transparent' }}>
+      <div className="flex-1 overflow-y-auto" style={{ scrollbarWidth: 'thin' as const, scrollbarColor: 'var(--bdL) transparent' }}>
         {pagedIncidents.length === 0 ? (
           <div className="px-4 py-10 text-center text-text-3 text-[11px]">
             검색 결과가 없습니다.
@@ -300,7 +300,7 @@ export function IncidentsLeftPanel({
               onMouseLeave={(e) => { if (!isSel) e.currentTarget.style.background = '' }}
             >
               {/* Row 1: name + status */}
-              <div className="flex items-center justify-between" style={{ marginBottom: '5px' }}>
+              <div className="flex items-center justify-between mb-[5px]">
                 <div className="flex items-center gap-1.5 text-xs font-bold">
                   <span className="shrink-0" style={{ width: '8px', height: '8px', borderRadius: '50%', background: dotStyle[inc.status], boxShadow: dotShadow[inc.status] }} />
                   {inc.name}
@@ -310,7 +310,7 @@ export function IncidentsLeftPanel({
                 </span>
               </div>
               {/* Row 2: meta */}
-              <div className="flex items-center gap-2 text-[10px] text-text-3" style={{ marginBottom: '5px' }}>
+              <div className="flex items-center gap-2 text-[10px] text-text-3 mb-[5px]">
                 <span>📅 {inc.date} {inc.time}</span>
                 <span>🏛 {inc.office}</span>
               </div>
@@ -371,11 +371,11 @@ export function IncidentsLeftPanel({
       )}
 
       {/* Pagination */}
-      <div className="flex items-center justify-between bg-bg-1 shrink-0 border-t border-border" style={{ padding: '8px 12px' }}>
+      <div className="flex items-center justify-between bg-bg-1 shrink-0 border-t border-border px-3 py-2">
         <div className="text-[9px] text-text-3">
           총 <b>{filteredIncidents.length}</b>건 중 {(safePage - 1) * pageSize + 1}-{Math.min(safePage * pageSize, filteredIncidents.length)}
         </div>
-        <div className="flex items-center" style={{ gap: '3px' }}>
+        <div className="flex items-center gap-[3px]">
           <PgBtn label="⏮" disabled={safePage <= 1} onClick={() => setCurrentPage(1)} />
           <PgBtn label="◀" disabled={safePage <= 1} onClick={() => setCurrentPage(Math.max(1, safePage - 1))} />
           {Array.from({ length: totalPages }, (_, i) => i + 1).filter(p => Math.abs(p - safePage) <= 2).map(p => (
@@ -385,8 +385,7 @@ export function IncidentsLeftPanel({
           <PgBtn label="⏭" disabled={safePage >= totalPages} onClick={() => setCurrentPage(totalPages)} />
         </div>
         <select onChange={(e) => { /* page size change placeholder */ void e }}
-          className="bg-bg-0 border border-border text-text-2 text-[9px] outline-none"
-          style={{ padding: '3px 6px', borderRadius: '4px' }}>
+          className="bg-bg-0 border border-border text-text-2 text-[9px] outline-none rounded px-1.5 py-[3px]">
           <option>6건</option><option>10건</option><option>20건</option>
         </select>
       </div>
@@ -418,41 +417,38 @@ const WeatherPopup = forwardRef<HTMLDivElement, {
   onClose: () => void
 }>(({ data, position, onClose }, ref) => {
   return (
-    <div ref={ref} className="fixed overflow-hidden" style={{
+    <div ref={ref} className="fixed overflow-hidden rounded-xl border border-border bg-bg-1" style={{
       zIndex: 9990, width: 280,
       top: position.top, left: position.left,
-      background: 'var(--bg1)', border: '1px solid rgba(59,130,246,0.3)', borderRadius: 12,
+      borderColor: 'rgba(59,130,246,0.3)',
       boxShadow: '0 12px 40px rgba(0,0,0,0.5)', backdropFilter: 'blur(12px)',
     }}>
       {/* Header */}
-      <div className="flex items-center justify-between border-b border-border"
-        style={{
-          padding: '10px 14px',
-          background: 'linear-gradient(135deg, rgba(59,130,246,0.08), rgba(6,182,212,0.04))',
-        }}>
-        <div className="flex items-center" style={{ gap: 6 }}>
-          <span style={{ fontSize: 14 }}>🌤</span>
+      <div className="flex items-center justify-between border-b border-border px-3.5 py-2.5"
+        style={{ background: 'linear-gradient(135deg, rgba(59,130,246,0.08), rgba(6,182,212,0.04))' }}>
+        <div className="flex items-center gap-1.5">
+          <span className="text-sm">🌤</span>
           <div>
-            <div style={{ fontSize: 11, fontWeight: 700 }}>{data.locNm}</div>
-            <div className="text-text-3 font-mono" style={{ fontSize: 8 }}>{data.obsDtm}</div>
+            <div className="text-[11px] font-bold">{data.locNm}</div>
+            <div className="text-text-3 font-mono text-[8px]">{data.obsDtm}</div>
           </div>
         </div>
-        <span onClick={onClose} className="cursor-pointer text-text-3" style={{ fontSize: 14, padding: 2 }}>✕</span>
+        <span onClick={onClose} className="cursor-pointer text-text-3 text-sm p-0.5">✕</span>
       </div>
 
       {/* Body */}
-      <div style={{ padding: '12px 14px' }}>
+      <div className="px-3.5 py-3">
         {/* Main weather */}
-        <div className="flex items-center" style={{ gap: 12, marginBottom: 10 }}>
-          <div style={{ fontSize: 28 }}>{data.icon}</div>
+        <div className="flex items-center gap-3 mb-2.5">
+          <div className="text-[28px]">{data.icon}</div>
           <div>
-            <div className="font-bold font-mono" style={{ fontSize: 20 }}>{data.temp}</div>
-            <div className="text-text-3" style={{ fontSize: 9 }}>{data.weatherDc}</div>
+            <div className="font-bold font-mono text-[20px]">{data.temp}</div>
+            <div className="text-text-3 text-[9px]">{data.weatherDc}</div>
           </div>
         </div>
 
         {/* Detail grid */}
-        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 6, fontSize: 9 }}>
+        <div className="grid grid-cols-2 gap-1.5 text-[9px]">
           <WxCell icon="💨" label="풍향/풍속" value={data.wind} />
           <WxCell icon="🌊" label="파고" value={data.wave} />
           <WxCell icon="💧" label="습도" value={data.humid} />
@@ -462,39 +458,33 @@ const WeatherPopup = forwardRef<HTMLDivElement, {
         </div>
 
         {/* Tide info */}
-        <div className="flex" style={{ marginTop: 8, gap: 6 }}>
-          <div className="flex-1 flex items-center"
-            style={{
-              padding: '6px 8px', background: 'rgba(59,130,246,0.06)',
-              border: '1px solid rgba(59,130,246,0.1)', borderRadius: 6, gap: 6,
-            }}>
-            <span style={{ fontSize: 12 }}>⬆</span>
+        <div className="flex gap-1.5 mt-2">
+          <div className="flex-1 flex items-center gap-1.5 px-2 py-1.5 rounded-md"
+            style={{ background: 'rgba(59,130,246,0.06)', border: '1px solid rgba(59,130,246,0.1)' }}>
+            <span className="text-xs">⬆</span>
             <div>
-              <div className="text-text-3" style={{ fontSize: 7 }}>고조 (만조)</div>
-              <div className="font-bold font-mono" style={{ color: '#60a5fa', fontSize: 10 }}>{data.highTide}</div>
+              <div className="text-text-3 text-[7px]">고조 (만조)</div>
+              <div className="font-bold font-mono text-[10px]" style={{ color: '#60a5fa' }}>{data.highTide}</div>
             </div>
           </div>
-          <div className="flex-1 flex items-center"
-            style={{
-              padding: '6px 8px', background: 'rgba(6,182,212,0.06)',
-              border: '1px solid rgba(6,182,212,0.1)', borderRadius: 6, gap: 6,
-            }}>
-            <span style={{ fontSize: 12 }}>⬇</span>
+          <div className="flex-1 flex items-center gap-1.5 px-2 py-1.5 rounded-md"
+            style={{ background: 'rgba(6,182,212,0.06)', border: '1px solid rgba(6,182,212,0.1)' }}>
+            <span className="text-xs">⬇</span>
             <div>
-              <div className="text-text-3" style={{ fontSize: 7 }}>저조 (간조)</div>
-              <div className="text-primary-cyan font-bold font-mono" style={{ fontSize: 10 }}>{data.lowTide}</div>
+              <div className="text-text-3 text-[7px]">저조 (간조)</div>
+              <div className="text-primary-cyan font-bold font-mono text-[10px]">{data.lowTide}</div>
             </div>
           </div>
         </div>
 
         {/* 24h Forecast */}
-        <div className="bg-bg-0" style={{ marginTop: 10, padding: '8px 10px', borderRadius: 6 }}>
-          <div className="font-bold text-text-3" style={{ fontSize: 8, marginBottom: 6 }}>24h 예보</div>
-          <div className="flex justify-between font-mono text-text-2" style={{ fontSize: 8 }}>
+        <div className="bg-bg-0 mt-2.5 px-2.5 py-2 rounded-md">
+          <div className="font-bold text-text-3 text-[8px] mb-1.5">24h 예보</div>
+          <div className="flex justify-between font-mono text-text-2 text-[8px]">
             {data.forecast.map((f, i) => (
               <div key={i} className="text-center">
                 <div>{f.hour}</div>
-                <div style={{ fontSize: 12, margin: '2px 0' }}>{f.icon}</div>
+                <div className="text-xs my-0.5">{f.icon}</div>
                 <div className="font-semibold">{f.temp}</div>
               </div>
             ))}
diff --git a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
index e486855..42a8a94 100755
--- a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
@@ -79,7 +79,7 @@ ${styles}
                 <span className="text-[11px] font-semibold">🔴 <span style={{ color: '#ef4444' }}>POSEIDON</span></span>
                 <span className="text-[11px] font-semibold">🔵 <span style={{ color: '#3b82f6' }}>OpenDrift</span></span>
                 <span className="text-[11px] font-semibold">⚡ <span style={{ color: '#a855f7' }}>앙상블</span></span>
-                <span className="text-[10px]" style={{ color: 'var(--t3)' }}>라그랑지안 입자추적 이론 기반</span>
+                <span className="text-[10px] text-text-3">라그랑지안 입자추적 이론 기반</span>
               </div>
             </div>
           </div>
@@ -92,8 +92,7 @@ ${styles}
         </div>
 
         {/* 내부 네비게이션 탭 */}
-        <div className="flex gap-0.5 rounded-lg p-1 mb-5"
-          style={{ background: 'var(--bg3)', border: '1px solid var(--bd)' }}>
+        <div className="flex gap-0.5 rounded-lg p-1 mb-5 bg-bg-3 border border-border">
           {theoryTabs.map(tab => (
             <button key={tab.id} onClick={() => setActivePanel(tab.id)}
               className="flex-1 py-2 px-1 text-[12px] font-semibold rounded-md transition-all duration-150 cursor-pointer"
@@ -220,7 +219,7 @@ function SystemOverviewPanel() {
       <div className={`${card} ${cardBg}`}>
         <div className="flex items-center justify-between mb-3.5">
           <div style={labelStyle('var(--t1)')}>🤖 WING 탑재 유출유 확산 모델 비교</div>
-          <span className="text-[10px]" style={{ color: 'var(--t3)' }}>3종 앙상블 운용 · 불확실성 정량화</span>
+          <span className="text-[10px] text-text-3">3종 앙상블 운용 · 불확실성 정량화</span>
         </div>
         <div className="grid grid-cols-3 gap-2.5 mb-3.5">
           {[
@@ -233,7 +232,7 @@ function SystemOverviewPanel() {
                 <div className="w-7 h-7 rounded-md flex items-center justify-center text-sm" style={{ background: `${m.color}25` }}>{m.icon}</div>
                 <div>
                   <div className="text-xs font-bold" style={{ color: m.color }}>{m.name}</div>
-                  <div className="text-[10px]" style={{ color: 'var(--t3)' }}>{m.sub}</div>
+                  <div className="text-[10px] text-text-3">{m.sub}</div>
                 </div>
               </div>
               <div className="text-[10px] mb-2" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>{m.desc}</div>
@@ -315,7 +314,7 @@ function KospsPanel() {
           <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'rgba(6,182,212,.15)', border: '1px solid rgba(6,182,212,.3)' }}>🔷</div>
           <div>
             <div className="text-[15px] font-bold" style={{ color: 'var(--cyan)' }}>KOSPS (Korea Oil Spill Prediction System)</div>
-            <div className="text-[11px] mt-0.5" style={{ color: 'var(--t3)' }}>한국해양연구원(KORDI) 개발 · 한국 해역 특화 유출유 확산 예측 상시 운용 시스템</div>
+            <div className="text-[11px] mt-0.5 text-text-3">한국해양연구원(KORDI) 개발 · 한국 해역 특화 유출유 확산 예측 상시 운용 시스템</div>
           </div>
         </div>
         <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
@@ -339,7 +338,7 @@ function KospsPanel() {
           {/* 특허 1 */}
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(6,182,212,.2)', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '12px' }}>
             <div className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap" style={{ background: 'rgba(6,182,212,.12)', border: '1px solid rgba(6,182,212,.25)', fontFamily: 'var(--fM)' }}>
-              <div className="text-[10px]" style={{ color: 'var(--t3)' }}>등록번호</div>
+              <div className="text-[10px] text-text-3">등록번호</div>
               <div className="text-[11px] font-bold" style={{ color: 'var(--cyan)' }}>10-1567431</div>
               <div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>2015.11.03</div>
             </div>
@@ -402,7 +401,7 @@ function KospsPanel() {
             ].map(d => (
               <div key={d.label} className="px-2.5 py-1.5 rounded-md flex justify-between items-center" style={{ background: d.bg, border: `1px solid ${d.bd}` }}>
                 <span className="font-semibold">{d.icon} {d.label}</span>
-                <span className="text-[10px]" style={{ color: 'var(--t3)' }}>{d.detail}</span>
+                <span className="text-[10px] text-text-3">{d.detail}</span>
               </div>
             ))}
           </div>
@@ -467,7 +466,7 @@ function KospsPanel() {
                 border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
                               }}>
                 <div className="font-bold" style={{ color: node.color }}>{node.label}</div>
-                <div className="text-[10px]" style={{ color: 'var(--t3)' }}>{node.sub}</div>
+                <div className="text-[10px] text-text-3">{node.sub}</div>
               </div>
               {i < 5 && <div className="w-[30px] h-px" style={{ background: 'var(--bdL)' }} />}
             </div>
@@ -587,7 +586,7 @@ function KospsPanel() {
               전자해도(ENC) 무작위 수심자료를 계산격자로 보간할 때 <b style={{ color: 'var(--green)' }}>Akima(1978) 2차원 5차다항식</b>(Bivariate Quintic Polynomial)을 사용합니다. 삼각망(TIN)을 구성하여 각 꼭지점의 편미분 연속성 조건으로 21개 계수를 결정합니다.
             </div>
             <div className="mt-1.5 p-1.5 rounded" style={{ ...codeBox, padding: '6px' }}>
-              z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ <span className="text-[10px]" style={{ color: 'var(--t3)' }}>(i≤5, i+j≤5)</span>
+              z(x,y) = Σ Σ qᵢⱼ xⁱ yʲ <span className="text-[10px] text-text-3">(i≤5, i+j≤5)</span>
             </div>
           </div>
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(6,182,212,.2)' }}>
@@ -644,7 +643,7 @@ function KospsPanel() {
                 <div className="flex items-center gap-1.5">
                   {paper.tags.map(t => <span key={t.label} style={{ padding: '2px 7px', background: `${t.color}1A`, border: `1px solid ${t.color}38`, borderRadius: '4px', fontSize: '10px', fontWeight: 700, color: t.color }}>{t.label}</span>)}
                 </div>
-                <span className="text-[10px]" style={{ color: 'var(--t3)' }}>{paper.year}</span>
+                <span className="text-[10px] text-text-3">{paper.year}</span>
               </div>
               <div className="text-[11px] font-bold mb-1">{paper.title}</div>
               <div className="text-[11px] mb-1.5" style={{ color: 'var(--t3)' }}>{paper.authors}</div>
@@ -733,7 +732,7 @@ function PoseidonPanel() {
           <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'rgba(59,130,246,.15)', border: '1px solid rgba(59,130,246,.3)' }}>🔵</div>
           <div>
             <div className="text-[15px] font-bold" style={{ color: 'var(--blue)' }}>POSEIDON (입자추적 최적화 예측 시스템)</div>
-            <div className="text-[11px] mt-0.5" style={{ color: 'var(--t3)' }}>한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델 기반 · 뜰개 관측 매개변수 자동 최적화</div>
+            <div className="text-[11px] mt-0.5 text-text-3">한국환경연구원 · (주)아라종합기술 · 한국해양기상기술 공동개발 · MOHID 해양순환모델 기반 · 뜰개 관측 매개변수 자동 최적화</div>
           </div>
         </div>
         <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
@@ -752,7 +751,7 @@ function PoseidonPanel() {
         </div>
         <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(59,130,246,.2)', display: 'grid', gridTemplateColumns: 'auto 1fr', gap: '12px' }}>
           <div className="px-2.5 py-1.5 rounded-md text-center whitespace-nowrap" style={{ background: 'rgba(59,130,246,.12)', border: '1px solid rgba(59,130,246,.25)', fontFamily: 'var(--fM)' }}>
-            <div className="text-[10px]" style={{ color: 'var(--t3)' }}>등록번호</div>
+            <div className="text-[10px] text-text-3">등록번호</div>
             <div className="text-[11px] font-bold" style={{ color: 'var(--blue)' }}>10-1868791</div>
             <div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>2018 등록</div>
           </div>
@@ -891,7 +890,7 @@ function PoseidonPanel() {
                 border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
                               }}>
                 <div className="font-bold" style={{ color: node.color }}>{node.label}</div>
-                <div className="text-[10px]" style={{ color: 'var(--t3)' }}>{node.sub}</div>
+                <div className="text-[10px] text-text-3">{node.sub}</div>
               </div>
               {i < 2 && <div className="w-[30px] h-px" style={{ background: 'var(--bdL)' }} />}
             </div>
@@ -934,7 +933,7 @@ function PoseidonPanel() {
                 <div className="flex items-center gap-1.5">
                   {paper.tags.map(t => <span key={t.label} style={{ padding: '2px 7px', background: `${t.color}1A`, border: `1px solid ${t.color}38`, borderRadius: '4px', fontSize: '10px', fontWeight: 700, color: t.color }}>{t.label}</span>)}
                 </div>
-                <span className="text-[10px]" style={{ color: 'var(--t3)' }}>{paper.year}</span>
+                <span className="text-[10px] text-text-3">{paper.year}</span>
               </div>
               <div className="text-[11px] font-bold mb-1">{paper.title}</div>
               <div className="text-[11px] mb-1.5" style={{ color: 'var(--t3)' }}>{paper.authors}</div>
@@ -958,7 +957,7 @@ function OpenDriftPanel() {
           <div className="w-[38px] h-[38px] rounded-[10px] flex items-center justify-center text-xl" style={{ background: 'rgba(34,197,94,.15)', border: '1px solid rgba(34,197,94,.3)' }}>🟢</div>
           <div>
             <div className="text-[15px] font-bold" style={{ color: 'var(--blue)' }}>OpenDrift (오픈소스 라그랑지안 확산 프레임워크)</div>
-            <div className="text-[11px] mt-0.5" style={{ color: 'var(--t3)' }}>노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증</div>
+            <div className="text-[11px] mt-0.5 text-text-3">노르웨이 MET Norway · OpenOil 공개 프레임워크 · Python 기반 · IMO/IPIECA 검증</div>
           </div>
         </div>
         <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
@@ -1037,7 +1036,7 @@ function OpenDriftPanel() {
                 border: node.strong ? `2px solid ${node.color}4D` : `1px solid ${node.color}33`,
                               }}>
                 <div className="font-bold" style={{ color: node.color }}>{node.label}</div>
-                <div className="text-[10px]" style={{ color: 'var(--t3)' }}>{node.sub}</div>
+                <div className="text-[10px] text-text-3">{node.sub}</div>
               </div>
               {i < 6 && <div className="w-[24px] h-px" style={{ background: 'var(--bdL)' }} />}
             </div>
@@ -1378,7 +1377,7 @@ function VerificationPanel() {
           ].map(s => (
             <div key={s.label} className="text-center p-2 rounded-md" style={{ background: 'var(--bg0)' }}>
               <div className="font-bold" style={{ fontSize: '14px', color: s.color, fontFamily: 'var(--fM)' }}>{s.value}</div>
-              <div className="text-[10px]" style={{ color: 'var(--t3)' }}>{s.label}</div>
+              <div className="text-[10px] text-text-3">{s.label}</div>
             </div>
           ))}
         </div>
@@ -1483,7 +1482,7 @@ function RoadmapPanel() {
             ].map(r => (
               <div key={r.title} className="rounded-md" style={{ padding: '8px 10px', background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}>
                 <div className="font-semibold mb-0.5">{r.title}</div>
-                <div className="text-[10px]" style={{ color: 'var(--t3)' }}>{r.desc}</div>
+                <div className="text-[10px] text-text-3">{r.desc}</div>
               </div>
             ))}
           </div>
diff --git a/frontend/src/tabs/rescue/components/RescueView.tsx b/frontend/src/tabs/rescue/components/RescueView.tsx
index 8ba59cd..1e14810 100755
--- a/frontend/src/tabs/rescue/components/RescueView.tsx
+++ b/frontend/src/tabs/rescue/components/RescueView.tsx
@@ -146,7 +146,7 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
   const at = accidentTypes.find(t => t.id === activeType)!
 
   return (
-    <div className="flex-1 relative overflow-hidden" style={{ background: '#0a1628' }}>
+    <div className="flex-1 relative overflow-hidden bg-[#0a1628]">
       {/* 해양 배경 그라데이션 */}
       <div className="absolute inset-0" style={{
         background: 'radial-gradient(ellipse at 30% 40%, rgba(6,90,130,.25) 0%, transparent 60%), radial-gradient(ellipse at 70% 60%, rgba(8,60,100,.2) 0%, transparent 50%), linear-gradient(180deg, #0a1628, #0d1f35 50%, #091520)'
@@ -183,7 +183,7 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
         }}>
           <div className="absolute" style={{ top: '-3px', left: '60%', width: '2px', height: '7px', background: '#888', borderRadius: '1px' }} />
         </div>
-        <div className="text-[7px] text-center mt-0.5 font-mono" style={{ color: 'rgba(255,200,150,.5)' }}>M/V SEA GUARDIAN</div>
+        <div className="text-[7px] text-center mt-0.5 font-mono text-[rgba(255,200,150,0.5)]">M/V SEA GUARDIAN</div>
       </div>
 
       {/* 예측 구역 원 */}
@@ -193,25 +193,24 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
         border: '1.5px dashed rgba(6,182,212,.2)'
       }} />
       {/* 구역 라벨 */}
-      <div className="absolute z-[6] text-[8px] font-korean font-semibold tracking-wider uppercase" style={{
-        top: '50%', left: '36%', color: 'rgba(6,182,212,.45)', whiteSpace: 'pre-line'
+      <div className="absolute z-[6] text-[8px] font-korean font-semibold tracking-wider uppercase whitespace-pre-line text-[rgba(6,182,212,0.45)]" style={{
+        top: '50%', left: '36%',
       }}>
         {d.zone.replace('\\n', '\n')}
       </div>
 
       {/* SAR 자산 */}
-      <div className="absolute z-10 text-[7px] font-mono" style={{ top: '10%', left: '42%', color: 'rgba(200,220,255,.35)' }}>ETA 5 MIN ─</div>
-      <div className="absolute z-10 text-[7px] font-mono" style={{ top: '14%', left: '56%', color: 'rgba(200,220,255,.35)' }}>ETA 15 MIN ─</div>
-      <div className="absolute z-[12] text-sm" style={{ top: '7%', left: '52%', opacity: 0.6, transform: 'rotate(-30deg)' }}>🚁</div>
-      <div className="absolute z-[12] text-[8px] font-mono" style={{ top: '20%', left: '60%', color: 'rgba(200,220,255,.45)' }}>6M</div>
-      <div className="absolute z-[12] text-[11px]" style={{ top: '28%', left: '54%', opacity: 0.45 }}>🚢</div>
+      <div className="absolute z-10 text-[7px] font-mono text-[rgba(200,220,255,0.35)]" style={{ top: '10%', left: '42%' }}>ETA 5 MIN ─</div>
+      <div className="absolute z-10 text-[7px] font-mono text-[rgba(200,220,255,0.35)]" style={{ top: '14%', left: '56%' }}>ETA 15 MIN ─</div>
+      <div className="absolute z-[12] text-sm opacity-60" style={{ top: '7%', left: '52%', transform: 'rotate(-30deg)' }}>🚁</div>
+      <div className="absolute z-[12] text-[8px] font-mono text-[rgba(200,220,255,0.45)]" style={{ top: '20%', left: '60%' }}>6M</div>
+      <div className="absolute z-[12] text-[11px] opacity-45" style={{ top: '28%', left: '54%' }}>🚢</div>
 
       {/* 환경 민감 구역 */}
-      <div className="absolute z-10 px-3.5 py-2 rounded" style={{
+      <div className="absolute z-10 px-3.5 py-2 rounded bg-[rgba(34,197,94,0.06)] border border-[rgba(34,197,94,0.2)]" style={{
         bottom: '6%', right: '6%',
-        background: 'rgba(34,197,94,.06)', border: '1px solid rgba(34,197,94,.2)'
       }}>
-        <div className="text-[9px] font-bold font-serif uppercase tracking-wider leading-snug" style={{ color: 'rgba(34,197,94,.55)' }}>
+        <div className="text-[9px] font-bold font-serif uppercase tracking-wider leading-snug text-[rgba(34,197,94,0.55)]">
           ENVIRONMENTALLY SENSITIVE<br />AREA: AQUACULTURE FARM
         </div>
       </div>
@@ -226,13 +225,14 @@ function CenterMap({ activeType }: { activeType: AccidentType }) {
       {/* 스케일 바 */}
       <div className="absolute bottom-2.5 left-2.5 z-20 bg-[rgba(13,17,23,0.8)] border border-border rounded px-2.5 py-1 text-[8px] text-text-3 font-mono">
         <div className="w-[70px] h-0.5 mb-0.5" style={{ background: 'linear-gradient(90deg, #e4e8f1 50%, var(--bd) 50%)' }} />
+
         5 km · Zoom: 100%
       </div>
 
       {/* 사고 유형 표시 */}
       <div className="absolute bottom-2.5 right-2.5 z-20 bg-[rgba(13,17,23,0.85)] border border-border rounded px-3 py-1.5">
         <div className="text-[8px] text-text-3 font-korean">현재 사고 유형</div>
-        <div className="text-[11px] font-bold font-korean" style={{ color: 'var(--cyan)' }}>{at.icon} {at.label} ({at.eng})</div>
+        <div className="text-[11px] font-bold font-korean text-primary-cyan">{at.icon} {at.label} ({at.eng})</div>
       </div>
     </div>
   )
@@ -687,14 +687,14 @@ function LongStrengthPanel(_props: { activeType: AccidentType }) {
           <div className="text-[8px] text-text-3 font-korean">SF 최대/허용 비율</div>
           <div className="text-lg font-bold text-status-yellow font-mono">88<span className="text-[9px]">%</span></div>
           <div className="h-[5px] bg-bg-hover rounded-sm mt-0.5">
-            <div className="h-full rounded-sm" style={{ width: '88%', background: 'var(--yellow)' }} />
+            <div className="h-full rounded-sm w-[88%] bg-status-yellow" />
           </div>
         </div>
         <div className="bg-bg-3 border border-border rounded-md p-2">
           <div className="text-[8px] text-text-3 font-korean">BM 최대/허용 비율</div>
           <div className="text-lg font-bold text-status-orange font-mono">92<span className="text-[9px]">%</span></div>
           <div className="h-[5px] bg-bg-hover rounded-sm mt-0.5">
-            <div className="h-full rounded-sm" style={{ width: '92%', background: 'var(--orange)' }} />
+            <div className="h-full rounded-sm w-[92%] bg-status-orange" />
           </div>
         </div>
       </div>
@@ -779,9 +779,9 @@ function BottomBar() {
           <span>[+24H]</span>
         </div>
         <div className="relative h-1.5 bg-bg-hover rounded-sm mx-1">
-          <div className="absolute rounded-full border-2 border-bg-0" style={{
+          <div className="absolute rounded-full border-2 border-bg-0 bg-primary-cyan" style={{
             left: '35%', top: '-3px', width: '12px', height: '12px',
-            background: 'var(--cyan)', boxShadow: '0 0 8px rgba(6,182,212,.4)'
+            boxShadow: '0 0 8px rgba(6,182,212,.4)'
           }} />
         </div>
         <div className="flex items-center justify-center gap-2 mt-0.5">
@@ -790,7 +790,7 @@ function BottomBar() {
           <button className="w-7 h-7 bg-bg-3 border border-border rounded-full text-text-3 text-[11px] flex items-center justify-center cursor-pointer hover:text-text-1">⏭</button>
         </div>
         <div className="text-center text-[8px] text-text-3 font-mono">
-          현재 시간: <b style={{ color: 'var(--cyan)' }}>10:45 KST</b>
+          현재 시간: <b className="text-primary-cyan">10:45 KST</b>
         </div>
       </div>
     </div>