diff --git a/frontend/src/common/components/map/MapView.tsx b/frontend/src/common/components/map/MapView.tsx
index e49e268..97a8479 100755
--- a/frontend/src/common/components/map/MapView.tsx
+++ b/frontend/src/common/components/map/MapView.tsx
@@ -390,7 +390,7 @@ export function MapView({
                 latitude: incidentCoord.lat,
                 content: (
                   <div className="text-xs">
-                    <strong style={{ color: 'var(--orange)' }}>{d.level}</strong>
+                    <strong className="text-status-orange">{d.level}</strong>
                     <br />
                     물질: {dispersionResult.substance}
                     <br />
diff --git a/frontend/src/tabs/aerial/components/CctvView.tsx b/frontend/src/tabs/aerial/components/CctvView.tsx
index 3a6987e..6ca7333 100644
--- a/frontend/src/tabs/aerial/components/CctvView.tsx
+++ b/frontend/src/tabs/aerial/components/CctvView.tsx
@@ -327,7 +327,7 @@ export function CctvView() {
               ))}
               <div className="flex items-center justify-between px-2 py-1 bg-bg-3 rounded-[5px]" style={{ border: '1px solid rgba(59,130,246,.2)' }}>
                 <span className="text-[9px] text-text-2 font-korean">갱신 주기</span>
-                <span className="text-[9px] font-bold font-mono" style={{ color: 'var(--blue)' }}>1 fps</span>
+                <span className="text-[9px] font-bold font-mono text-primary-blue">1 fps</span>
               </div>
               <div className="text-[9px] text-text-3 font-mono text-right mt-0.5">최종갱신: {new Date().toLocaleTimeString('ko-KR')}</div>
             </div>
diff --git a/frontend/src/tabs/assets/components/ShipInsurance.tsx b/frontend/src/tabs/assets/components/ShipInsurance.tsx
index f624288..38541f0 100644
--- a/frontend/src/tabs/assets/components/ShipInsurance.tsx
+++ b/frontend/src/tabs/assets/components/ShipInsurance.tsx
@@ -301,7 +301,7 @@ function ShipInsurance() {
                 <><span className="text-status-red font-bold">⛔ 만료 {expiredList.length}건:</span> {expiredList.map(r => r.shipName).join(', ')}<br /></>
               )}
               {soonList.length > 0 && (
-                <><span className="font-bold" style={{ color: 'var(--yellow)' }}>⚠ 만료임박(30일) {soonList.length}건:</span> {soonList.map(r => r.shipName).join(', ')}</>
+                <><span className="font-bold text-status-yellow">⚠ 만료임박(30일) {soonList.length}건:</span> {soonList.map(r => r.shipName).join(', ')}</>
               )}
             </div>
           )}
diff --git a/frontend/src/tabs/board/components/BoardView.tsx b/frontend/src/tabs/board/components/BoardView.tsx
index 6e8368d..cb13ff0 100755
--- a/frontend/src/tabs/board/components/BoardView.tsx
+++ b/frontend/src/tabs/board/components/BoardView.tsx
@@ -204,14 +204,14 @@ export function BoardView() {
     return (
       <div className="flex flex-1 overflow-hidden">
         <div className="flex-1 relative overflow-hidden">
-          <div className="flex flex-col h-full" style={{ background: 'var(--bg0)' }}>
+          <div className="flex flex-col h-full bg-bg-0">
             {/* 헤더 */}
             <div className="flex items-center justify-between px-8 py-4 border-b" style={{ borderColor: 'var(--bd)', background: 'var(--bg1)' }}>
               <div className="flex items-center gap-3">
                 <div className="flex items-center gap-2">
-                  <span style={{ fontSize: 18 }}>📘</span>
+                  <span className="text-lg">📘</span>
                   <span className="text-[15px] font-bold">해경매뉴얼</span>
-                  <span className="text-[10px] ml-1" style={{ color: 'var(--t3)' }}>총 {filteredManuals.length}건</span>
+                  <span className="text-[10px] ml-1 text-text-3">총 {filteredManuals.length}건</span>
                 </div>
                 <div className="flex gap-1 ml-4">
                   {manualCategories.map(cat => (
@@ -242,7 +242,7 @@ export function BoardView() {
             <div className="flex-1 overflow-auto px-8 py-6">
               {manualLoading ? (
                 <div className="text-center py-20">
-                  <p className="text-sm" style={{ color: 'var(--t3)' }}>로딩 중...</p>
+                  <p className="text-sm text-text-3">로딩 중...</p>
                 </div>
               ) : (
               <div className="grid gap-3" style={{ gridTemplateColumns: 'repeat(auto-fill, minmax(320px, 1fr))' }}>
@@ -310,7 +310,7 @@ export function BoardView() {
                         </button>
                       </div>
                       <div className="flex items-center justify-between pt-3" style={{ borderTop: '1px solid var(--bd)' }}>
-                        <div className="flex items-center gap-3 text-[10px]" style={{ color: 'var(--t3)' }}>
+                        <div className="flex items-center gap-3 text-[10px] text-text-3">
                           <span>{file.authorNm}</span>
                           <span>{new Date(file.regDtm).toLocaleDateString('ko-KR')}</span>
                         </div>
@@ -367,7 +367,7 @@ export function BoardView() {
               {!manualLoading && filteredManuals.length === 0 && (
                 <div className="text-center py-20">
                   <div style={{ fontSize: 32, opacity: 0.3, marginBottom: 8 }}>📘</div>
-                  <p className="text-sm" style={{ color: 'var(--t3)' }}>검색 결과가 없습니다.</p>
+                  <p className="text-sm text-text-3">검색 결과가 없습니다.</p>
                 </div>
               )}
             </div>
diff --git a/frontend/src/tabs/hns/components/HNSRecalcModal.tsx b/frontend/src/tabs/hns/components/HNSRecalcModal.tsx
index 922daab..41272fc 100755
--- a/frontend/src/tabs/hns/components/HNSRecalcModal.tsx
+++ b/frontend/src/tabs/hns/components/HNSRecalcModal.tsx
@@ -242,7 +242,7 @@ function FG({ label, children }: { label: string; children: React.ReactNode }) {
 function InfoRow({ label, value }: { label: string; value: string }) {
   return (
     <div style={{ display: 'flex', justifyContent: 'space-between', padding: '2px 0' }}>
-      <span style={{ color: 'var(--t3)' }}>{label}</span>
+      <span className="text-text-3">{label}</span>
       <span style={{ fontWeight: 600, fontFamily: 'var(--fM)' }}>{value}</span>
     </div>
   )
diff --git a/frontend/src/tabs/hns/components/HNSScenarioView.tsx b/frontend/src/tabs/hns/components/HNSScenarioView.tsx
index 91f40ac..e1b7f21 100755
--- a/frontend/src/tabs/hns/components/HNSScenarioView.tsx
+++ b/frontend/src/tabs/hns/components/HNSScenarioView.tsx
@@ -130,7 +130,7 @@ export function HNSScenarioView() {
   }
 
   return (
-    <div className="flex flex-col flex-1 w-full h-full overflow-hidden" style={{ background: 'var(--bg0)' }}>
+    <div className="flex flex-col flex-1 w-full h-full overflow-hidden bg-bg-0">
       {/* Header */}
       <div className="flex items-center justify-between shrink-0 border-b border-border" style={{ padding: '14px 20px', background: 'var(--bg1)' }}>
         <div className="flex items-center gap-2.5">
@@ -285,7 +285,7 @@ export function HNSScenarioView() {
         {/* ── Right: Detail Views ── */}
         <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
           {/* View Tabs */}
-          <div className="flex border-b border-border shrink-0 px-4" style={{ background: 'var(--bg1)' }}>
+          <div className="flex border-b border-border shrink-0 px-4 bg-bg-1">
             {['📋 시나리오 상세', '📊 비교 차트', '🗺 확산범위 오버레이'].map((label, i) => (
               <button
                 key={i}
@@ -425,7 +425,7 @@ function ScenarioDetail({ scenario }: { scenario: HnsScenario }) {
             { label: '습도', value: scenario.weather.humidity, icon: '💧' },
             { label: '혼합층', value: scenario.weather.mixHeight, icon: '📏' },
           ].map((w, i) => (
-            <div key={i} className="text-center p-2 rounded-sm" style={{ background: 'var(--bg0)' }}>
+            <div key={i} className="text-center p-2 rounded-sm bg-bg-0">
               <div className="text-sm mb-0.5">{w.icon}</div>
               <div className="text-[12px] font-bold font-mono">{w.value}</div>
               <div className="text-text-3 mt-0.5" style={{ fontSize: '8px' }}>{w.label}</div>
@@ -577,7 +577,7 @@ function ScenarioComparison() {
         </div>
         <table className="w-full text-[10px]" style={{ borderCollapse: 'collapse' }}>
           <thead>
-            <tr style={{ background: 'var(--bg0)' }}>
+            <tr className="bg-bg-0">
               {['지표', ...D.map(d => `${d.id} (${d.label})`)].map((h, i) => (
                 <th key={i} className="text-text-3 border-b border-border" style={{
                   padding: '8px 10px', textAlign: i === 0 ? 'left' : 'center',
diff --git a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
index 340594b..cee3c25 100755
--- a/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
+++ b/frontend/src/tabs/hns/components/HNSSubstanceView.tsx
@@ -796,11 +796,11 @@ function HmsDetailPanel({ substance: s, activeTab, onTabChange }: { substance: H
               <div className="p-3 flex flex-col gap-2">
                 <div className="rounded-sm" style={{ padding: 10, background: 'rgba(249,115,22,.04)', border: '1px solid rgba(249,115,22,.12)' }}>
                   <div className="text-[10px] font-bold text-status-orange mb-1">🔥 화재 시</div>
-                  <div className="text-[9px] text-text-2" style={{ lineHeight: 1.6 }}>격리거리: <b style={{ color: 'var(--red)' }}>{s.responseDistanceFire}</b> 이상</div>
+                  <div className="text-[9px] text-text-2" style={{ lineHeight: 1.6 }}>격리거리: <b className="text-status-red">{s.responseDistanceFire}</b> 이상</div>
                 </div>
                 <div className="rounded-sm" style={{ padding: 10, background: 'rgba(168,85,247,.04)', border: '1px solid rgba(168,85,247,.12)' }}>
                   <div className="text-[10px] font-bold text-primary-purple mb-1">💨 유출 시 (비화재)</div>
-                  <div className="text-[9px] text-text-2" style={{ lineHeight: 1.6 }}>주간 방호활동거리: <b style={{ color: 'var(--purple)' }}>{s.responseDistanceSpillDay}</b><br />야간 방호활동거리: <b style={{ color: 'var(--red)' }}>{s.responseDistanceSpillNight}</b></div>
+                  <div className="text-[9px] text-text-2" style={{ lineHeight: 1.6 }}>주간 방호활동거리: <b className="text-primary-purple">{s.responseDistanceSpillDay}</b><br />야간 방호활동거리: <b className="text-status-red">{s.responseDistanceSpillNight}</b></div>
                 </div>
                 <div className="rounded-sm" style={{ padding: 10, background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}>
                   <div className="text-[10px] font-bold text-primary-cyan mb-1">🌊 해상 유출 시</div>
diff --git a/frontend/src/tabs/hns/components/HNSView.tsx b/frontend/src/tabs/hns/components/HNSView.tsx
index c552bb4..5e5ce1e 100755
--- a/frontend/src/tabs/hns/components/HNSView.tsx
+++ b/frontend/src/tabs/hns/components/HNSView.tsx
@@ -49,7 +49,7 @@ function HNSManualViewer() {
         {/* SEBC 거동 분류 */}
         <div className={card} style={{ background: 'var(--bg3)', border: '1px solid var(--bd)' }}>
           <div className="text-[13px] font-bold mb-2.5">SEBC 거동 분류 (Standard European Behaviour Classification)</div>
-          <div className="text-[9px] text-text-3 mb-2.5" style={{ lineHeight: '1.5' }}>물질의 물리적·화학적 특성(용해도, 밀도, 증기압, 점도)에 따라 이론적 거동을 5가지 주요 범주 + 7가지 하위 범주로 분류</div>
+          <div className="text-[9px] text-text-3 mb-2.5" className="leading-normal">물질의 물리적·화학적 특성(용해도, 밀도, 증기압, 점도)에 따라 이론적 거동을 5가지 주요 범주 + 7가지 하위 범주로 분류</div>
           <div style={{ display: 'grid', gridTemplateColumns: 'repeat(5,1fr)', gap: '8px' }}>
             {[
               { icon: '💨', label: 'G — 가스', desc: '대기 중 확산\n증기압 > 101.3kPa\n예: 암모니아, 염소', color: 'rgba(139,92,246' },
diff --git a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
index f1d4b5a..267577e 100755
--- a/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsRightPanel.tsx
@@ -141,7 +141,7 @@ export function IncidentsRightPanel({
           🔬 통합분석 조회
         </div>
         <div className="text-[9px] text-text-3">
-          선택: <b style={{ color: 'var(--cyan)' }}>{incident.name}</b>
+          선택: <b className="text-primary-cyan">{incident.name}</b>
         </div>
       </div>
 
diff --git a/frontend/src/tabs/incidents/components/IncidentsView.tsx b/frontend/src/tabs/incidents/components/IncidentsView.tsx
index e94d440..40888df 100755
--- a/frontend/src/tabs/incidents/components/IncidentsView.tsx
+++ b/frontend/src/tabs/incidents/components/IncidentsView.tsx
@@ -455,7 +455,7 @@ export function IncidentsView() {
                 </div>
                 <div className="flex gap-2.5 text-[9px] font-mono">
                   <div className="text-text-2">
-                    선박 <b style={{ color: 'var(--cyan)' }}>20</b>
+                    선박 <b className="text-primary-cyan">20</b>
                   </div>
                   <div className="text-text-2">
                     사고 <b style={{ color: '#f87171' }}>6</b>
@@ -494,7 +494,7 @@ export function IncidentsView() {
                 <div className="text-[9px] font-bold text-text-2 mt-0.5">
                   AIS 선박
                 </div>
-                <div style={{ display: 'flex', flexWrap: 'wrap', gap: '6px 12px' }}>
+                <div className="flex flex-wrap gap-[6px_12px]">
                   {VESSEL_LEGEND.map(vl => (
                     <div key={vl.type} className="flex items-center gap-1">
                       <div
@@ -535,7 +535,7 @@ export function IncidentsView() {
 
           {/* ── 2분할 View ─────────────────────────────── */}
           {analysisActive && viewMode === 'split2' && (
-            <div style={{ display: 'flex', height: '100%' }}>
+            <div className="flex h-full">
               <div
                 style={{
                   flex: 1,
@@ -576,7 +576,7 @@ export function IncidentsView() {
                   <SplitPanelContent tag={analysisTags[0]} incident={selectedIncident} />
                 </div>
               </div>
-              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+              <div className="flex-1 flex flex-col overflow-hidden">
                 <div
                   style={{
                     height: 28,
@@ -613,7 +613,7 @@ export function IncidentsView() {
 
           {/* ── 3분할 View ─────────────────────────────── */}
           {analysisActive && viewMode === 'split3' && (
-            <div style={{ display: 'flex', height: '100%' }}>
+            <div className="flex h-full">
               <div
                 style={{
                   flex: 1,
@@ -696,7 +696,7 @@ export function IncidentsView() {
                   />
                 </div>
               </div>
-              <div style={{ flex: 1, display: 'flex', flexDirection: 'column', overflow: 'hidden' }}>
+              <div className="flex-1 flex flex-col overflow-hidden">
                 <div
                   style={{
                     height: 28,
@@ -749,7 +749,7 @@ export function IncidentsView() {
             <div style={{ fontSize: 9, color: 'var(--t3)' }}>
               📊 {selectedIncident?.name} · {analysisTags.map(t => t.label).join(' + ')} 분석 결과 비교
             </div>
-            <div style={{ display: 'flex', gap: 6 }}>
+            <div className="flex gap-[6px]">
               <button
                 style={{
                   padding: '4px 12px',
@@ -1258,8 +1258,8 @@ function VesselDetailModal({ vessel: v, onClose }: { vessel: Vessel; onClose: ()
             borderBottom: '1px solid #30363d',
           }}
         >
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <span style={{ fontSize: 18 }}>{v.flag}</span>
+          <div className="flex items-center gap-[10px]">
+            <span className="text-lg">{v.flag}</span>
             <div>
               <div style={{ fontSize: 14, fontWeight: 800, color: '#f0f6fc' }}>{v.name}</div>
               <div style={{ fontSize: 10, color: '#8b949e', fontFamily: 'var(--fM)' }}>
@@ -1538,7 +1538,7 @@ function TabNav(_props: { v: Vessel }) {
         </div>
       </Sec>
 
-      <div style={{ display: 'flex', gap: 8 }}>
+      <div className="flex gap-[8px]">
         <ActionBtn icon="🔍" label="전체 항적 조회" bg="rgba(168,85,247,0.1)" bd="rgba(168,85,247,0.25)" fg="#a78bfa" />
         <ActionBtn icon="📐" label="항로 예측" bg="rgba(6,182,212,0.1)" bd="rgba(6,182,212,0.25)" fg="#22d3ee" />
       </div>
diff --git a/frontend/src/tabs/incidents/components/MediaModal.tsx b/frontend/src/tabs/incidents/components/MediaModal.tsx
index 57c0305..9e1bfea 100755
--- a/frontend/src/tabs/incidents/components/MediaModal.tsx
+++ b/frontend/src/tabs/incidents/components/MediaModal.tsx
@@ -93,8 +93,8 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
           borderBottom: '1px solid #30363d',
           display: 'flex', alignItems: 'center', justifyContent: 'space-between',
         }}>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 10 }}>
-            <span style={{ fontSize: 18 }}>📋</span>
+          <div className="flex items-center gap-[10px]">
+            <span className="text-lg">📋</span>
             <div>
               <div style={{ fontSize: 14, fontWeight: 800, color: '#f0f6fc' }}>
                 현장정보 — {incident.name}
@@ -104,9 +104,9 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
               </div>
             </div>
           </div>
-          <div style={{ display: 'flex', alignItems: 'center', gap: 8 }}>
+          <div className="flex items-center gap-[8px]">
             {/* Tabs */}
-            <div style={{ display: 'flex', gap: 2 }}>
+            <div className="flex gap-[2px]">
               {MEDIA_TABS.map(t => (
                 <button key={t.id} onClick={() => setActiveTab(t.id)} style={{
                   padding: '5px 12px', borderRadius: 6, fontSize: 11, fontWeight: activeTab === t.id ? 700 : 400,
@@ -171,13 +171,13 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
                 flexShrink: 0, padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                 borderBottom: '1px solid #21262d',
               }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <div className="flex items-center gap-[6px]">
                   <span style={{ fontSize: 12 }}>📷</span>
                   <span style={{ fontSize: 12, fontWeight: 700, color: '#f0f6fc' }}>
                     현장사진 — {str(media.photoMeta, 'title', '현장 사진')}
                   </span>
                 </div>
-                <div style={{ display: 'flex', gap: 4 }}>
+                <div className="flex gap-[4px]">
                   <NavBtn label="◀" /> <NavBtn label="▶" /> <NavBtn label="↗" />
                 </div>
               </div>
@@ -221,7 +221,7 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
                 flexShrink: 0, padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                 borderBottom: '1px solid #21262d',
               }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <div className="flex items-center gap-[6px]">
                   <span style={{ fontSize: 12 }}>🎬</span>
                   <span style={{ fontSize: 12, fontWeight: 700, color: '#f0f6fc' }}>
                     드론 영상 — {str(media.droneMeta, 'title', '드론 영상')}
@@ -258,7 +258,7 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
                   <span style={{ fontSize: 8, color: '#8b949e' }}>
                     🎬 영상 {num(media.droneMeta, 'videoCount')}건 · {str(media.droneMeta, 'stage')}
                   </span>
-                  <div style={{ display: 'flex', gap: 8 }}>
+                  <div className="flex gap-[8px]">
                     <span style={{ fontSize: 8, color: '#58a6ff', cursor: 'pointer' }}>📂 전체보기</span>
                     <span style={{ fontSize: 8, color: '#a78bfa', cursor: 'pointer' }}>🔗 R&D 연계</span>
                   </div>
@@ -274,13 +274,13 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
                 flexShrink: 0, padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                 borderBottom: '1px solid #21262d',
               }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <div className="flex items-center gap-[6px]">
                   <span style={{ fontSize: 12 }}>🛰</span>
                   <span style={{ fontSize: 12, fontWeight: 700, color: '#f0f6fc' }}>
                     위성영상 — {str(media.satMeta, 'title', '위성영상')}
                   </span>
                 </div>
-                <div style={{ display: 'flex', gap: 4 }}>
+                <div className="flex gap-[4px]">
                   <NavBtn label="◀" /> <NavBtn label="▶" /> <NavBtn label="↗" />
                 </div>
               </div>
@@ -341,13 +341,13 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
                 flexShrink: 0, padding: '8px 16px', display: 'flex', alignItems: 'center', justifyContent: 'space-between',
                 borderBottom: '1px solid #21262d',
               }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <div className="flex items-center gap-[6px]">
                   <span style={{ fontSize: 12 }}>📹</span>
                   <span style={{ fontSize: 12, fontWeight: 700, color: '#f0f6fc' }}>
                     CCTV — {str(media.cctvMeta, 'title', 'CCTV')}
                   </span>
                 </div>
-                <div style={{ display: 'flex', alignItems: 'center', gap: 6 }}>
+                <div className="flex items-center gap-[6px]">
                   {bool(media.cctvMeta, 'live') && (
                     <span style={{
                       padding: '2px 8px', borderRadius: 4, fontSize: 9, fontWeight: 700,
@@ -373,7 +373,7 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
               </div>
               {/* CAM buttons */}
               <div style={{ flexShrink: 0, padding: '10px 16px', borderTop: '1px solid #21262d', display: 'flex', flexDirection: 'column', gap: 8 }}>
-                <div style={{ display: 'flex', gap: 6 }}>
+                <div className="flex gap-[6px]">
                   {Array.from({ length: num(media.cctvMeta, 'camCount') }).map((_, i) => (
                     <button key={i} onClick={() => setSelectedCam(i)} style={{
                       padding: '6px 16px', borderRadius: 4, fontSize: 10, fontWeight: 600,
@@ -388,7 +388,7 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
                   <span style={{ fontSize: 8, color: '#8b949e' }}>
                     📹 CCTV {num(media.cctvMeta, 'camCount')}채널 · {str(media.cctvMeta, 'location')}
                   </span>
-                  <div style={{ display: 'flex', gap: 8 }}>
+                  <div className="flex gap-[8px]">
                     <span style={{ fontSize: 8, color: '#ef4444', cursor: 'pointer' }}>🔴 녹화영상</span>
                     <span style={{ fontSize: 8, color: '#58a6ff', cursor: 'pointer' }}>🎥 PTZ</span>
                   </div>
@@ -411,7 +411,7 @@ export function MediaModal({ incident, onClose }: { incident: Incident; onClose:
             <span>📹 CCTV <b style={{ color: '#f0f6fc' }}>{media.cctvCnt}</b></span>
             <span>📎 총 <b style={{ color: '#c084fc' }}>{total}건</b></span>
           </div>
-          <div style={{ display: 'flex', gap: 8 }}>
+          <div className="flex gap-[8px]">
             <BottomBtn icon="📥" label="다운로드" bg="rgba(100,116,139,0.1)" bd="rgba(100,116,139,0.2)" fg="#8b949e" />
             <BottomBtn icon="📝" label="보고서" bg="rgba(59,130,246,0.1)" bd="rgba(59,130,246,0.2)" fg="#58a6ff" />
             <BottomBtn icon="🔗" label="R&D 분석 연계" bg="rgba(168,85,247,0.1)" bd="rgba(168,85,247,0.25)" fg="#c084fc" />
diff --git a/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx b/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
index 20adad2..aaae41d 100755
--- a/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
+++ b/frontend/src/tabs/prediction/components/BoomDeploymentTheoryView.tsx
@@ -84,7 +84,7 @@ function OverviewPanel() {
           <div>
             <div className="text-[13px] font-bold mb-2">🛡️ 오일펜스 배치 최적화란?</div>
             <div className="text-[11px] leading-[1.8] text-text-2">
-              해양 유류오염 발생 시 <b style={{ color: 'var(--orange)' }}>유출유 확산 예측 결과</b>와 실시간 해양환경(조류·풍향·파고)을 연동하여, 제한된 방제자원(오일펜스 길이·방제정 수)으로 <b style={{ color: 'var(--cyan)' }}>오염 확산 차단 효율을 최대화</b>하는 최적 배치 지점·형태·순서를 자동 산출하는 수치 알고리즘 체계입니다.
+              해양 유류오염 발생 시 <b className="text-status-orange">유출유 확산 예측 결과</b>와 실시간 해양환경(조류·풍향·파고)을 연동하여, 제한된 방제자원(오일펜스 길이·방제정 수)으로 <b className="text-primary-cyan">오염 확산 차단 효율을 최대화</b>하는 최적 배치 지점·형태·순서를 자동 산출하는 수치 알고리즘 체계입니다.
             </div>
           </div>
           <div>
@@ -197,7 +197,7 @@ function DeploymentTheoryPanel() {
           <div>
             <div className="text-[11px] font-bold mb-2 text-primary-cyan">② 최적 방향각 θ* 산정</div>
             <div className="text-[10px] leading-[1.8] mb-2 text-text-2">
-              오일펜스 방향각은 조류 방향에 따라 최적화됩니다. 차단 면적과 오일 수집 효율의 <b>트레이드오프</b>를 고려하여, 일반적으로 조류에 대해 <b style={{ color: 'var(--cyan)' }}>30°~45° 예각 배치</b>가 최적입니다.
+              오일펜스 방향각은 조류 방향에 따라 최적화됩니다. 차단 면적과 오일 수집 효율의 <b>트레이드오프</b>를 고려하여, 일반적으로 조류에 대해 <b className="text-primary-cyan">30°~45° 예각 배치</b>가 최적입니다.
             </div>
             <div className="rounded-md p-2.5 text-[10px] leading-[2.1] bg-bg-0 font-mono" style={{ border: '1px solid rgba(6,182,212,.2)' }}>
               θ* = arcsin(U<sub>c</sub> / U) <span className="text-[9px] text-text-3">(임계조건)</span><br />
@@ -319,7 +319,7 @@ function OptimizationPanel() {
         <div className="absolute top-0 left-0 right-0 h-[3px]" style={{ background: 'linear-gradient(90deg,var(--purple),var(--blue))' }} />
         <div className="text-[13px] font-bold mb-2">⚙️ 다목적 최적화 문제 (Multi-Objective Optimization)</div>
         <div className="text-[11px] leading-[1.8] text-text-2">
-          오일펜스 배치 최적화는 <b style={{ color: 'var(--purple)' }}>상충하는 복수 목적함수</b>를 동시에 만족해야 하는 전형적인 다목적 최적화 문제입니다. 차단 효율 최대화와 자원 사용 최소화는 서로 트레이드오프 관계를 가지며, <b style={{ color: 'var(--cyan)' }}>파레토 최적(Pareto Optimal) 해집합</b>에서 의사결정자가 선택합니다.
+          오일펜스 배치 최적화는 <b className="text-primary-purple">상충하는 복수 목적함수</b>를 동시에 만족해야 하는 전형적인 다목적 최적화 문제입니다. 차단 효율 최대화와 자원 사용 최소화는 서로 트레이드오프 관계를 가지며, <b className="text-primary-cyan">파레토 최적(Pareto Optimal) 해집합</b>에서 의사결정자가 선택합니다.
         </div>
       </div>
 
@@ -352,7 +352,7 @@ function OptimizationPanel() {
 
         {/* ESI 가중치 */}
         <div className="rounded-lg p-3 bg-bg-0" style={{ border: '1px solid rgba(234,179,8,.2)' }}>
-          <div className="text-[10px] font-bold mb-2" style={{ color: 'var(--yellow)' }}>🏖️ ESI 가중치 w<sub>ESI</sub> 설계</div>
+          <div className="text-[10px] font-bold mb-2 text-status-yellow">🏖️ ESI 가중치 w<sub>ESI</sub> 설계</div>
           <div className="grid grid-cols-5 gap-[5px] text-[9px] text-text-2">
             {[
               { grade: 'ESI 1~2', desc: '노출암반', w: 'w = 0.2', color: 'var(--green)', bg: 'rgba(34,197,94,.06)' },
@@ -377,7 +377,7 @@ function OptimizationPanel() {
         <div className="grid grid-cols-2 gap-3">
           <div>
             <div className="text-[10px] leading-[1.8] mb-2 text-text-2">
-              WING의 오일펜스 배치 최적화는 다목적 유전알고리즘 <b style={{ color: 'var(--purple)' }}>NSGA-II</b>(Deb et al., 2002)를 핵심 엔진으로 사용합니다. 파레토 전면(Pareto Front)을 탐색하여 차단 효율과 자원 효율의 최적 해집합을 제공합니다.
+              WING의 오일펜스 배치 최적화는 다목적 유전알고리즘 <b className="text-primary-purple">NSGA-II</b>(Deb et al., 2002)를 핵심 엔진으로 사용합니다. 파레토 전면(Pareto Front)을 탐색하여 차단 효율과 자원 효율의 최적 해집합을 제공합니다.
             </div>
             <div className="flex flex-col gap-1 text-[9px] text-text-2">
               {[
@@ -388,7 +388,7 @@ function OptimizationPanel() {
                 '선택 방식 : 비지배 정렬 + 혼잡도 거리(Crowding Distance)',
               ].map((item, i) => (
                 <div key={i} className="px-2 py-[5px] rounded text-text-2" style={{ background: 'rgba(168,85,247,.05)', border: '1px solid rgba(168,85,247,.12)' }}>
-                  <b style={{ color: 'var(--purple)' }}>{item.split(' : ')[0]}</b> : {item.split(' : ')[1]}
+                  <b className="text-primary-purple">{item.split(' : ')[0]}</b> : {item.split(' : ')[1]}
                 </div>
               ))}
             </div>
@@ -404,7 +404,7 @@ function OptimizationPanel() {
                 { step: '⑤', title: '엘리트 선택', desc: '부모+자식 2N 집단에서 비지배 정렬+혼잡도 기준으로 N개 선택 → 수렴까지 반복' },
               ].map((item, i) => (
                 <div key={i} className="flex gap-2 px-[9px] py-1.5 rounded-[5px]" style={{ background: i === 4 ? 'rgba(168,85,247,.05)' : 'rgba(168,85,247,.04)', border: i === 4 ? '1px solid rgba(168,85,247,.12)' : undefined }}>
-                  <span className="min-w-[20px] font-extrabold" style={{ color: 'var(--purple)' }}>{item.step}</span>
+                  <span className="min-w-[20px] font-extrabold text-primary-purple">{item.step}</span>
                   <div className="leading-[1.6] text-text-2"><b>{item.title}</b> : {item.desc}</div>
                 </div>
               ))}
diff --git a/frontend/src/tabs/prediction/components/OilBoomSection.tsx b/frontend/src/tabs/prediction/components/OilBoomSection.tsx
index 12876ac..1513887 100644
--- a/frontend/src/tabs/prediction/components/OilBoomSection.tsx
+++ b/frontend/src/tabs/prediction/components/OilBoomSection.tsx
@@ -149,7 +149,7 @@ const OilBoomSection = ({
                   확산 예측 기반 최적 배치안
                 </h4>
 
-                <p style={{ lineHeight: '1.5' }} className="text-[9px] text-text-3 mb-2.5">
+                <p className="leading-normal" className="text-[9px] text-text-3 mb-2.5">
                   {oilTrajectory.length > 0
                     ? '확산 궤적을 분석하여 해류 직교 방향 1차 방어선, U형 포위 2차 방어선, 연안 보호 3차 방어선을 자동 생성합니다.'
                     : '상단에서 확산 예측을 실행한 뒤 AI 배치를 적용할 수 있습니다.'
diff --git a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
index 42a8a94..1b640d1 100755
--- a/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillTheoryView.tsx
@@ -62,7 +62,7 @@ ${styles}
   }
 
   return (
-    <div className="flex flex-col h-full overflow-hidden" style={{ background: 'var(--bg0)' }}>
+    <div className="flex flex-col h-full overflow-hidden bg-bg-0">
       <div className="flex-1 overflow-y-auto scrollbar-thin p-5" ref={contentRef}>
 
         {/* 헤더 */}
@@ -150,7 +150,7 @@ function SystemOverviewPanel() {
               <span className="text-sm font-bold">유출유 확산 모델이란?</span>
             </div>
             <div style={{ ...bodyText, fontSize: '12px', lineHeight: '1.8' }}>
-              해상에서 유출된 <b style={{ color: 'var(--orange)' }}>원유 및 유류</b>가 해수면 위에서 이동·확산·풍화되는 과정을 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다. <b style={{ color: 'var(--cyan)' }}>라그랑지안 입자추적법</b>을 기반으로 해류·바람·조류의 복합 영향을 시뮬레이션합니다.
+              해상에서 유출된 <b className="text-status-orange">원유 및 유류</b>가 해수면 위에서 이동·확산·풍화되는 과정을 물리·화학적 이론에 기반해 전산으로 모의하는 프로그램입니다. <b className="text-primary-cyan">라그랑지안 입자추적법</b>을 기반으로 해류·바람·조류의 복합 영향을 시뮬레이션합니다.
             </div>
           </div>
           <div>
@@ -163,7 +163,7 @@ function SystemOverviewPanel() {
                 <span style={{ color: 'var(--red)', fontWeight: 700 }}>①</span> 유출 사고 시 <b>오염 확산 범위 신속 예측</b>
               </div>
               <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style={{ background: 'rgba(249,115,22,.04)', border: '1px solid rgba(249,115,22,.12)' }}>
-                <span style={{ color: 'var(--orange)', fontWeight: 700 }}>②</span> <b>방제 자원 배치</b> 및 오일펜스 전략 수립
+                <span className="text-status-orange font-bold">②</span> <b>방제 자원 배치</b> 및 오일펜스 전략 수립
               </div>
               <div className="flex items-center gap-1.5 px-2.5 py-1.5 rounded-md" style={{ background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}>
                 <span style={{ color: 'var(--green)', fontWeight: 700 }}>③</span> 해안선 도달 예측 및 <b>피해 최소화</b> 대응
@@ -180,7 +180,7 @@ function SystemOverviewPanel() {
           <div className="absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold"
             style={{ background: 'rgba(249,115,22,.15)', color: 'var(--orange)', fontFamily: 'var(--fM)' }}>1</div>
           <div style={labelStyle('var(--orange)')}>🛢️ 유류 물성 반영</div>
-          <div className="text-[11px] mb-2.5" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>유류 종류별 <b>물리·화학적 특성</b>을 모델에 반영하여 실제 거동을 재현합니다.</div>
+          <div className="text-[11px] mb-2.5 text-text-2 leading-[1.7]">유류 종류별 <b>물리·화학적 특성</b>을 모델에 반영하여 실제 거동을 재현합니다.</div>
           <div className="flex flex-wrap gap-1">
             {[
               { label: '비중(API)', color: 'var(--orange)' }, { label: '점도', color: 'var(--red)' },
@@ -194,8 +194,8 @@ function SystemOverviewPanel() {
           <div className="absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold"
             style={{ background: 'rgba(6,182,212,.15)', color: 'var(--cyan)', fontFamily: 'var(--fM)' }}>2</div>
           <div style={labelStyle('var(--cyan)')}>🌊 해양환경 데이터 수집</div>
-          <div className="text-[11px] mb-2.5" style={{ color: 'var(--t2)', lineHeight: '1.7' }}><b>실시간 해양·기상 관측 데이터</b>를 수집하여 모델 강제력으로 입력합니다.</div>
-          <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="text-[11px] mb-2.5 text-text-2 leading-[1.7]"><b>실시간 해양·기상 관측 데이터</b>를 수집하여 모델 강제력으로 입력합니다.</div>
+          <div className="flex flex-col gap-1 text-[10px] text-text-2">
             <div style={{ padding: '4px 8px', background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)', borderRadius: '4px' }}>🌬️ 표층 바람 (KMA·ECMWF)</div>
             <div style={{ padding: '4px 8px', background: 'rgba(59,130,246,.05)', border: '1px solid rgba(59,130,246,.12)', borderRadius: '4px' }}>🌊 해류·조류 (KHOA 조위표)</div>
             <div style={{ padding: '4px 8px', background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', borderRadius: '4px' }}>🌡️ 수온·파고 (NIFS 수치예보)</div>
@@ -206,8 +206,8 @@ function SystemOverviewPanel() {
           <div className="absolute top-2.5 right-3 w-7 h-7 rounded-full flex items-center justify-center text-xs font-extrabold"
             style={{ background: 'rgba(34,197,94,.15)', color: 'var(--green)', fontFamily: 'var(--fM)' }}>3</div>
           <div style={labelStyle('var(--green)')}>🧮 수치 시뮬레이션</div>
-          <div className="text-[11px] mb-2.5" style={{ color: 'var(--t2)', lineHeight: '1.7' }}><b>라그랑지안 입자 시뮬레이션</b>으로 유출유 이동·확산·풍화를 동시 계산합니다.</div>
-          <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="text-[11px] mb-2.5 text-text-2 leading-[1.7]"><b>라그랑지안 입자 시뮬레이션</b>으로 유출유 이동·확산·풍화를 동시 계산합니다.</div>
+          <div className="flex flex-col gap-1 text-[10px] text-text-2">
             <div style={{ padding: '4px 8px', background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', borderRadius: '4px' }}>📍 수만~수십만 가상 입자 추적</div>
             <div style={{ padding: '4px 8px', background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', borderRadius: '4px' }}>⏱️ 1시간 스텝 반복 계산</div>
             <div style={{ padding: '4px 8px', background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', borderRadius: '4px' }}>🗺️ 농도 분포·해안 도달 예측</div>
@@ -235,8 +235,8 @@ function SystemOverviewPanel() {
                   <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>
-              <div className="flex flex-col gap-0.5 text-[10px]" style={{ color: 'var(--t2)' }}>
+              <div className="text-[10px] mb-2 text-text-2 leading-[1.7]">{m.desc}</div>
+              <div className="flex flex-col gap-0.5 text-[10px] text-text-2">
                 <div className="px-1.5 py-0.5 rounded" style={{ background: `${m.color}0F`, color: 'var(--t2)' }}>📍 개발: {m.org}</div>
                 <div className="px-1.5 py-0.5 rounded" style={{ background: `${m.color}0F`, color: 'var(--t2)' }}>🗓️ {m.year}</div>
                 <div className="px-1.5 py-0.5 rounded" style={{ background: `${m.color}0F`, color: 'var(--t2)' }}>🎯 강점: {m.strength}</div>
@@ -291,8 +291,8 @@ function SystemOverviewPanel() {
         <div className="mt-3.5 px-3.5 py-3 rounded-lg flex items-start gap-2.5"
           style={{ background: 'rgba(168,85,247,.04)', border: '1px solid rgba(168,85,247,.15)' }}>
           <span className="text-lg flex-shrink-0">⚡</span>
-          <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
-            <b style={{ color: 'var(--purple)' }}>3종 앙상블 운용 방식</b> : WING 시스템은 KOSPS·POSEIDON·OpenDrift를 동시 구동하여 각 모델의 예측 결과를 중첩·비교합니다. 3종 결과의 공통 영역을 <b>고신뢰 오염 범위</b>로, 최외곽 범위를 <b style={{ color: 'var(--orange)' }}>불확실성 경계</b>로 표출하여 방제 의사결정의 위험도를 정량화합니다.
+          <div className="text-[10px] text-text-2 leading-[1.7]">
+            <b className="text-primary-purple">3종 앙상블 운용 방식</b> : WING 시스템은 KOSPS·POSEIDON·OpenDrift를 동시 구동하여 각 모델의 예측 결과를 중첩·비교합니다. 3종 결과의 공통 영역을 <b>고신뢰 오염 범위</b>로, 최외곽 범위를 <b className="text-status-orange">불확실성 경계</b>로 표출하여 방제 의사결정의 위험도를 정량화합니다.
           </div>
         </div>
       </div>
@@ -313,12 +313,12 @@ function KospsPanel() {
         <div className="flex items-center gap-3 mb-3">
           <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-[15px] font-bold text-primary-cyan">KOSPS (Korea Oil Spill Prediction System)</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' }}>
-          김혜진·이문진·오세웅·강준묵(2011)이 개발한 KOSPS는 유류오염사고 발생 즉시 신속하게 모델을 구동할 수 있도록 <b style={{ color: 'var(--cyan)' }}>상시 운용 체계</b>를 구축한 국내 유출유 확산 예측 시스템입니다. 정적자료(수심·해안선)와 동적자료(KMA 바람·HYCOM 해류·KORDI 조류)를 외부 FTP 연계로 자동 갱신하여 <b style={{ color: 'var(--green)' }}>실시간 예측 상시 활용</b>을 가능하게 합니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          김혜진·이문진·오세웅·강준묵(2011)이 개발한 KOSPS는 유류오염사고 발생 즉시 신속하게 모델을 구동할 수 있도록 <b className="text-primary-cyan">상시 운용 체계</b>를 구축한 국내 유출유 확산 예측 시스템입니다. 정적자료(수심·해안선)와 동적자료(KMA 바람·HYCOM 해류·KORDI 조류)를 외부 FTP 연계로 자동 갱신하여 <b className="text-status-green">실시간 예측 상시 활용</b>을 가능하게 합니다.
         </div>
         <div className="mt-2.5 px-3 py-2 rounded-md text-[10px]" style={{ background: 'rgba(6,182,212,.06)', border: '1px solid rgba(6,182,212,.15)', color: 'var(--t3)' }}>
           📚 참고문헌: 김혜진·이문진·오세웅·강준묵, &quot;유출유 확산 예측 모델의 상시 운용 체계 개발에 관한 연구&quot;, 해양환경안전학회지 17권 4호, pp.375-382, 2011.
@@ -339,20 +339,20 @@ function KospsPanel() {
           <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] 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 className="text-[11px] font-bold text-primary-cyan">10-1567431</div>
+              <div className="text-[10px] mt-0.5 text-text-3">2015.11.03</div>
             </div>
             <div>
               <div className="text-[11px] font-bold mb-1">해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법</div>
-              <div className="text-[10px]" style={{ color: 'var(--t2)' }}>
-                <span style={{ color: 'var(--cyan)' }}>발명자</span> : 이문진 · 김혜진 · 이승현 · 전태병 | <span style={{ color: 'var(--cyan)' }}>특허권자</span> : 한국해양과학기술원
+              <div className="text-[10px] text-text-2">
+                <span className="text-primary-cyan">발명자</span> : 이문진 · 김혜진 · 이승현 · 전태병 | <span className="text-primary-cyan">특허권자</span> : 한국해양과학기술원
               </div>
               <div className="flex flex-wrap gap-1 mt-1.5">
                 {['ESI 방제정보지도', 'CHARRY 실시간 조류모델', '취송류 경험식', 'Monte Carlo 입자추적', '풍화 5단계'].map(t =>
                   <span key={t} style={tag('var(--cyan)')}>{t}</span>
                 )}
               </div>
-              <div className="text-[10px] mt-1.5" style={{ color: 'var(--t3)' }}>
+              <div className="text-[10px] mt-1.5 text-text-3">
                 국가R&amp;D: ① 3차원 유출유 확산예측 기반 방제 지원기술 개발 (기여율 65%) ② HNS 유출 거동예측 및 대응정보 지원기술 개발 (기여율 35%) | 해양수산부
               </div>
             </div>
@@ -365,23 +365,23 @@ function KospsPanel() {
       {/* CHARRY 모델 */}
       <div className={card} style={{ background: 'var(--bg0)', border: '1px solid rgba(6,182,212,.2)' }}>
         <div style={labelStyle('var(--cyan)')}>🌀 CHARRY 모델 (실시간 조류예측 핵심 알고리즘)</div>
-        <div className="text-[11px] mb-2.5" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
+        <div className="text-[11px] mb-2.5 text-text-2 leading-[1.8]">
           <b>CHARRY</b>는 조화분석에 의한 검조소 실시간 조위와 조석 수치모델링에 의한 조류 공간분포를 변조조석(Modulated Tide)을 매개로 결합하여, 실제 시간대의 전 해역 조류를 실시간으로 재현하는 핵심 알고리즘입니다.
         </div>
         <div className="grid grid-cols-2 gap-2.5">
           <div className={codeBox}>
-            <span style={{ color: 'var(--t3)', fontSize: '10px' }}>/* 변조조석 수식 */</span><br />
+            <span className="text-text-3 text-[10px]">/* 변조조석 수식 */</span><br />
             ζ(t) = A(t) cos[σt − θ(t)]<br />
             A²(t) = Σ Yᵢ² + 2Σ YᵢYⱼ cos[(σᵢ−σⱼ)t−(φᵢ−φⱼ)]
           </div>
-          <div className="flex flex-col gap-1.5 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1.5 text-[10px] text-text-2">
             <div className="px-2 py-1.5 rounded" style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)' }}>
-              <span style={{ color: 'var(--cyan)', fontWeight: 700 }}>① 진폭 등비 증가</span><br />
-              <span style={{ color: 'var(--t2)' }}>검조소 조위 진폭 f배 → 전 격자 동일 f배 증가</span>
+              <span className="text-primary-cyan font-bold">① 진폭 등비 증가</span><br />
+              <span className="text-text-2">검조소 조위 진폭 f배 → 전 격자 동일 f배 증가</span>
             </div>
             <div className="px-2 py-1.5 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)' }}>
-              <span style={{ color: 'var(--orange)', fontWeight: 700 }}>② 위상차 일정</span><br />
-              <span style={{ color: 'var(--t2)' }}>기준점-격자점 간 위상차는 진폭에 무관하게 일정</span>
+              <span className="text-status-orange font-bold">② 위상차 일정</span><br />
+              <span className="text-text-2">기준점-격자점 간 위상차는 진폭에 무관하게 일정</span>
             </div>
           </div>
         </div>
@@ -391,7 +391,7 @@ function KospsPanel() {
       <div className="grid grid-cols-2 gap-3 mb-4">
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--cyan)', margin: 0 }}>
           <div style={labelStyle('var(--cyan)')}>📊 동적 입력자료 체계</div>
-          <div className="flex flex-col gap-1.5 text-[11px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1.5 text-[11px] text-text-2">
             {[
               { icon: '🌬️', label: '바람·기온', detail: 'KMA UM · ~12km · 2회/일', bg: 'rgba(6,182,212,.04)', bd: 'rgba(6,182,212,.12)' },
               { icon: '🌊', label: '해류(표층)', detail: 'HYCOM · ~9km · 1회/일', bg: 'rgba(59,130,246,.04)', bd: 'rgba(59,130,246,.12)' },
@@ -408,14 +408,14 @@ function KospsPanel() {
         </div>
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--green)', margin: 0 }}>
           <div style={labelStyle('var(--green)')}>🗂️ 정적 입력자료</div>
-          <div className="flex flex-col gap-1.5 text-[11px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1.5 text-[11px] text-text-2">
             <div className="px-2.5 py-1.5 rounded-md" style={{ background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}>
               <div className="font-semibold mb-0.5">📍 수심·해안선</div>
-              <div style={{ color: 'var(--t3)' }}>전자해도(ENC) → 500m 격자 보간</div>
+              <div className="text-text-3">전자해도(ENC) → 500m 격자 보간</div>
             </div>
             <div className="px-2.5 py-1.5 rounded-md" style={{ background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}>
               <div className="font-semibold mb-0.5">🗺️ 격자 구성</div>
-              <div style={{ color: 'var(--t3)' }}>좌표변환 → 영역추출 → 격자보간 표준화</div>
+              <div className="text-text-3">좌표변환 → 영역추출 → 격자보간 표준화</div>
             </div>
           </div>
         </div>
@@ -427,23 +427,23 @@ function KospsPanel() {
         <div className="grid grid-cols-2 gap-3">
           <div>
             <div className={`${codeBox} mb-2`}>
-              <span style={{ color: 'var(--t3)', fontSize: '10px' }}>/* 취송류 유속 (이·강, 2000) */</span><br />
-              V_WDC = <span style={{ color: 'var(--orange)' }}>0.029</span> × V_wind
+              <span className="text-text-3 text-[10px]">/* 취송류 유속 (이·강, 2000) */</span><br />
+              V_WDC = <span className="text-status-orange">0.029</span> × V_wind
             </div>
             <div className={codeBox}>
-              <span style={{ color: 'var(--t3)', fontSize: '10px' }}>/* 취송류 유향 */</span><br />
-              θ_WDC = θ_wind + <span style={{ color: 'var(--cyan)' }}>18.6°</span>
+              <span className="text-text-3 text-[10px]">/* 취송류 유향 */</span><br />
+              θ_WDC = θ_wind + <span className="text-primary-cyan">18.6°</span>
             </div>
           </div>
-          <div className="flex flex-col gap-1.5 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1.5 text-[10px] text-text-2">
             <div className="px-2 py-1.5 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.15)' }}>
-              <span style={{ color: 'var(--orange)', fontWeight: 700 }}>V_WDC</span> : 표면 취송류 유속 (m/s) — 바람의 약 2.9%
+              <span className="text-status-orange font-bold">V_WDC</span> : 표면 취송류 유속 (m/s) — 바람의 약 2.9%
             </div>
             <div className="px-2 py-1.5 rounded" style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.15)' }}>
-              <span style={{ color: 'var(--cyan)', fontWeight: 700 }}>18.6°</span> : Ekman 편향각 — 북반구 기준 풍향 우편향
+              <span className="text-primary-cyan font-bold">18.6°</span> : Ekman 편향각 — 북반구 기준 풍향 우편향
             </div>
             <div className="px-2 py-1.5 rounded" style={{ background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.15)' }}>
-              <b style={{ color: 'var(--green)' }}>출처</b> : 이문진·강용균(2000), 해양 표면취송류 라그랑지안 측류 및 모델링
+              <b className="text-status-green">출처</b> : 이문진·강용균(2000), 해양 표면취송류 라그랑지안 측류 및 모델링
             </div>
           </div>
         </div>
@@ -472,16 +472,16 @@ function KospsPanel() {
             </div>
           ))}
         </div>
-        <div className="text-[10px] text-center mt-1" style={{ color: 'var(--t3)' }}>
+        <div className="text-[10px] text-center mt-1 text-text-3">
           FTP 자동 갱신 → DB 정규화 → 격자 재구성 → 모델 구동 → 결과 표출
         </div>
         <div className="mt-2.5 p-2 rounded-md" style={{ background: 'rgba(234,179,8,.05)', border: '1px solid rgba(234,179,8,.15)' }}>
-          <div className="text-[10px] font-bold mb-1" style={{ color: 'var(--yellow)' }}>⚠️ 예측 신뢰도 한계</div>
-          <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.6' }}>
+          <div className="text-[10px] font-bold mb-1 text-status-yellow">⚠️ 예측 신뢰도 한계</div>
+          <div className="text-[10px] text-text-2 leading-[1.6]">
             조류: 무한 예보 가능<br />
             해류(HYCOM): <b>5일치</b> 제한<br />
-            기온·취송류: <b style={{ color: 'var(--orange)' }}>3일치</b> 제한<br />
-            → <b style={{ color: 'var(--red)' }}>72h 초과 예측 시 신뢰도 저하</b>
+            기온·취송류: <b className="text-status-orange">3일치</b> 제한<br />
+            → <b className="text-status-red">72h 초과 예측 시 신뢰도 저하</b>
           </div>
         </div>
       </div>
@@ -494,22 +494,22 @@ function KospsPanel() {
         <div className="flex items-center gap-2.5 mb-3.5">
           <div className="w-[34px] h-[34px] rounded-lg flex items-center justify-center text-[17px]" style={{ background: 'rgba(6,182,212,.15)', border: '1px solid rgba(6,182,212,.3)' }}>📜</div>
           <div>
-            <div className="text-[13px] font-bold" style={{ color: 'var(--cyan)' }}>이문진 박사 특허 기반 핵심 기술 (등록특허 10-1567431)</div>
-            <div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법 · 한국해양과학기술원 · 2015년 등록</div>
+            <div className="text-[13px] font-bold text-primary-cyan">이문진 박사 특허 기반 핵심 기술 (등록특허 10-1567431)</div>
+            <div className="text-[10px] mt-0.5 text-text-3">해양 유류오염사고 발생시 효율적인 방제방안 수립을 위한 유출유 확산 예측 방법 · 한국해양과학기술원 · 2015년 등록</div>
           </div>
         </div>
 
         {/* 특허 개요 */}
         <div className="rounded-lg p-3 mb-3.5 text-[11px]" style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)', color: 'var(--t2)', lineHeight: '1.8' }}>
-          본 특허는 <b style={{ color: 'var(--cyan)' }}>방제정보지도(ESI, Environmental Sensitivity Index Map)</b>를 기반으로 실시간 조류·취송류·해수유동을 산출하고, 이를 유출유 확산 예측에 직결하는 통합 방법론을 특허화한 것입니다. 기상예측시스템·위성영상수신시스템·검조소를 인터넷으로 연결하여 실시간 기상·수온·조석 정보를 자동 수신하고, <b style={{ color: 'var(--orange)' }}>CHARRY 모델</b>로 실시간 조류를 예측하여 유출유 확산에 적용합니다.
+          본 특허는 <b className="text-primary-cyan">방제정보지도(ESI, Environmental Sensitivity Index Map)</b>를 기반으로 실시간 조류·취송류·해수유동을 산출하고, 이를 유출유 확산 예측에 직결하는 통합 방법론을 특허화한 것입니다. 기상예측시스템·위성영상수신시스템·검조소를 인터넷으로 연결하여 실시간 기상·수온·조석 정보를 자동 수신하고, <b className="text-status-orange">CHARRY 모델</b>로 실시간 조류를 예측하여 유출유 확산에 적용합니다.
         </div>
 
         {/* 3단계 처리 프로세스 */}
         <div className="text-[11px] font-bold mb-2.5">⚙️ 특허 청구항 3단계 처리 프로세스</div>
         <div className="grid grid-cols-3 gap-2 mb-3.5">
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(249,115,22,.2)', borderTop: '3px solid var(--orange)' }}>
-            <div className="text-[11px] font-bold mb-1.5" style={{ color: 'var(--orange)' }}>① 실시간 자료 수신 (S10)</div>
-            <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+            <div className="text-[11px] font-bold mb-1.5 text-status-orange">① 실시간 자료 수신 (S10)</div>
+            <div className="text-[10px] text-text-2 leading-[1.7]">
               • <b>기상자료</b> : 바람·기온·기압 분포<br />
               • <b>수온자료</b> : NGSST 위성 원격탐사 (일본 토호쿠대학, 5km 해상도)<br />
               • <b>조석정보</b> : 검조소 실시간 조위
@@ -517,9 +517,9 @@ function KospsPanel() {
             <div className="mt-1 p-1 rounded text-[10px]" style={{ background: 'rgba(249,115,22,.06)', color: 'var(--t3)' }}>FTP 자동 접속·수신·좌표변환·DB구축까지 자동화</div>
           </div>
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(6,182,212,.2)', borderTop: '3px solid var(--cyan)' }}>
-            <div className="text-[11px] font-bold mb-1.5" style={{ color: 'var(--cyan)' }}>② 조류·취송류 예측 (S20)</div>
-            <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
-              • <b style={{ color: 'var(--cyan)' }}>CHARRY 모델</b>로 실시간 조류 예측<br />
+            <div className="text-[11px] font-bold mb-1.5 text-primary-cyan">② 조류·취송류 예측 (S20)</div>
+            <div className="text-[10px] text-text-2 leading-[1.7]">
+              • <b className="text-primary-cyan">CHARRY 모델</b>로 실시간 조류 예측<br />
               • 2D 해수유동 방정식 기반 조화상수 DB 구축<br />
               • 취송류 경험식 : V_WDC=0.029×V_wind, θ_WDC=θ_wind+18.6°<br />
               • M2·S2·K1·O1 주요 4대 분조 조화분해
@@ -527,8 +527,8 @@ function KospsPanel() {
             <div className="mt-1 p-1 rounded text-[10px]" style={{ background: 'rgba(6,182,212,.06)', color: 'var(--t3)' }}>계산격자 : 15초(약 463m) 등간격 · 총 3,225,600격자</div>
           </div>
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(34,197,94,.2)', borderTop: '3px solid var(--green)' }}>
-            <div className="text-[11px] font-bold mb-1.5" style={{ color: 'var(--green)' }}>③ 유출유 확산 예측 (S30)</div>
-            <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+            <div className="text-[11px] font-bold mb-1.5 text-status-green">③ 유출유 확산 예측 (S30)</div>
+            <div className="text-[10px] text-text-2 leading-[1.7]">
               • 클라이언트로부터 <b>유출유량·유출지점</b> 입력 수신<br />
               • 몬테카를로(Monte Carlo) 입자추적 기법<br />
               • fBm 기반 난류확산 : σ²=Atᵐ (m≈2H)<br />
@@ -541,9 +541,9 @@ function KospsPanel() {
         {/* 해수유동 방정식 & 풍화 5단계 */}
         <div className="grid grid-cols-2 gap-2.5 mb-3">
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(59,130,246,.2)' }}>
-            <div className="text-[11px] font-bold mb-2" style={{ color: 'var(--blue)' }}>📐 2차원 해수유동 방정식</div>
-            <div className="text-[10px] mb-2" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>극좌표계(Polar Coordinate) 적용 · 지구 구면효과 반영</div>
-            <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+            <div className="text-[11px] font-bold mb-2 text-primary-blue">📐 2차원 해수유동 방정식</div>
+            <div className="text-[10px] mb-2 text-text-2 leading-[1.7]">극좌표계(Polar Coordinate) 적용 · 지구 구면효과 반영</div>
+            <div className="flex flex-col gap-1 text-[10px] text-text-2">
               {[
                 { label: '기조력', desc: '제1(Love Number 0.69) + 제2(α=0.9) 포함' },
                 { label: '4대 분조', desc: 'M2(1.405×10⁻⁴/s) · S2 · K1 · O1' },
@@ -551,28 +551,28 @@ function KospsPanel() {
                 { label: '조간대', desc: 'Flather & Heaps(1975) 처리기법' },
               ].map(r => (
                 <div key={r.label} className="px-2 py-1 rounded" style={{ background: 'rgba(59,130,246,.05)' }}>
-                  <span className="font-bold" style={{ color: 'var(--blue)' }}>{r.label}</span> : {r.desc}
+                  <span className="font-bold text-primary-blue">{r.label}</span> : {r.desc}
                 </div>
               ))}
             </div>
           </div>
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(249,115,22,.2)' }}>
-            <div className="text-[11px] font-bold mb-2" style={{ color: 'var(--orange)' }}>🔁 유출유 풍화(Weathering) 5단계</div>
-            <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+            <div className="text-[11px] font-bold mb-2 text-status-orange">🔁 유출유 풍화(Weathering) 5단계</div>
+            <div className="flex flex-col gap-1 text-[10px] text-text-2">
               <div className="px-2 py-1 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.1)' }}>
-                <span className="font-bold" style={{ color: 'var(--orange)' }}>① 퍼짐</span> : Fay(1969) + Mackay et al.(1980) · 두께별 3단계 모델
+                <span className="font-bold text-status-orange">① 퍼짐</span> : Fay(1969) + Mackay et al.(1980) · 두께별 3단계 모델
               </div>
               <div className="px-2 py-1 rounded" style={{ background: 'rgba(239,68,68,.05)', border: '1px solid rgba(239,68,68,.1)' }}>
-                <span className="font-bold" style={{ color: 'var(--red)' }}>② 증발</span> : Stiver &amp; Mackay(1984) · 증류데이터 기반 해석 (1~10일, 25%)
+                <span className="font-bold text-status-red">② 증발</span> : Stiver &amp; Mackay(1984) · 증류데이터 기반 해석 (1~10일, 25%)
               </div>
               <div className="px-2 py-1 rounded" style={{ background: 'rgba(168,85,247,.05)', border: '1px solid rgba(168,85,247,.1)' }}>
-                <span className="font-bold" style={{ color: 'var(--purple)' }}>③ 소산</span> : 쇄파에너지·풍속 함수 · 수면하 수직 분산 (15%)
+                <span className="font-bold text-primary-purple">③ 소산</span> : 쇄파에너지·풍속 함수 · 수면하 수직 분산 (15%)
               </div>
               <div className="px-2 py-1 rounded" style={{ background: 'rgba(234,179,8,.05)', border: '1px solid rgba(234,179,8,.1)' }}>
-                <span className="font-bold" style={{ color: 'var(--yellow)' }}>④ 유상화</span> : Mackay et al.(1980) + Mooney(1951) · water-in-oil
+                <span className="font-bold text-status-yellow">④ 유상화</span> : Mackay et al.(1980) + Mooney(1951) · water-in-oil
               </div>
               <div className="px-2 py-1 rounded" style={{ background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.1)' }}>
-                <span className="font-bold" style={{ color: 'var(--green)' }}>⑤ 침강</span> : 용해·생물분해 포함 · 초기유출량 선형 감소율 적용
+                <span className="font-bold text-status-green">⑤ 침강</span> : 용해·생물분해 포함 · 초기유출량 선형 감소율 적용
               </div>
             </div>
           </div>
@@ -581,38 +581,38 @@ function KospsPanel() {
         {/* Akima 수심 보간 & NGSST 수온 */}
         <div className="grid grid-cols-2 gap-2.5 mb-3">
           <div className="rounded-lg p-3" style={{ background: 'var(--bg0)', border: '1px solid rgba(34,197,94,.2)' }}>
-            <div className="text-[11px] font-bold mb-2" style={{ color: 'var(--green)' }}>🗺️ Akima 수심 보간 기법</div>
-            <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
-              전자해도(ENC) 무작위 수심자료를 계산격자로 보간할 때 <b style={{ color: 'var(--green)' }}>Akima(1978) 2차원 5차다항식</b>(Bivariate Quintic Polynomial)을 사용합니다. 삼각망(TIN)을 구성하여 각 꼭지점의 편미분 연속성 조건으로 21개 계수를 결정합니다.
+            <div className="text-[11px] font-bold mb-2 text-status-green">🗺️ Akima 수심 보간 기법</div>
+            <div className="text-[10px] text-text-2 leading-[1.7]">
+              전자해도(ENC) 무작위 수심자료를 계산격자로 보간할 때 <b className="text-status-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] 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)' }}>
-            <div className="text-[11px] font-bold mb-2" style={{ color: 'var(--cyan)' }}>🌡️ NGSST 실시간 수온자료</div>
-            <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
-              일본 토호쿠대학 Kawamura 교수팀의 <b style={{ color: 'var(--cyan)' }}>New Generation SST(NGSST)</b>를 FTP 자동수신합니다. 열적외선(AVHRR·MODIS) + 마이크로파(AMSR-E) 융합으로 구름 무관 일별 수온 제공.
+            <div className="text-[11px] font-bold mb-2 text-primary-cyan">🌡️ NGSST 실시간 수온자료</div>
+            <div className="text-[10px] text-text-2 leading-[1.7]">
+              일본 토호쿠대학 Kawamura 교수팀의 <b className="text-primary-cyan">New Generation SST(NGSST)</b>를 FTP 자동수신합니다. 열적외선(AVHRR·MODIS) + 마이크로파(AMSR-E) 융합으로 구름 무관 일별 수온 제공.
             </div>
-            <div className="flex flex-col gap-1 mt-1.5 text-[10px]" style={{ color: 'var(--t2)' }}>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}><span className="font-bold" style={{ color: 'var(--cyan)' }}>영역</span> : 116~166°E, 13~63°N (북서태평양)</div>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}><span className="font-bold" style={{ color: 'var(--cyan)' }}>해상도</span> : 3분(약 5km) · 일 1회 갱신</div>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}><span className="font-bold" style={{ color: 'var(--cyan)' }}>변환식</span> : SST(℃) = 0.15 × DN − 3.0</div>
+            <div className="flex flex-col gap-1 mt-1.5 text-[10px] text-text-2">
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}><span className="font-bold text-primary-cyan">영역</span> : 116~166°E, 13~63°N (북서태평양)</div>
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}><span className="font-bold text-primary-cyan">해상도</span> : 3분(약 5km) · 일 1회 갱신</div>
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)' }}><span className="font-bold text-primary-cyan">변환식</span> : SST(℃) = 0.15 × DN − 3.0</div>
             </div>
           </div>
         </div>
 
         {/* 특허 기여율 */}
         <div className="rounded-lg p-3" style={{ background: 'rgba(234,179,8,.04)', border: '1px solid rgba(234,179,8,.2)' }}>
-          <div className="text-[11px] font-bold mb-2" style={{ color: 'var(--yellow)' }}>📋 특허 지원 국가연구개발사업 및 기여율</div>
-          <div className="grid grid-cols-2 gap-2 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="text-[11px] font-bold mb-2 text-status-yellow">📋 특허 지원 국가연구개발사업 및 기여율</div>
+          <div className="grid grid-cols-2 gap-2 text-[10px] text-text-2">
             <div className="p-2 rounded-md" style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)' }}>
-              <div className="font-bold mb-1" style={{ color: 'var(--cyan)' }}>🔷 과제① (기여율 65%)</div>
-              <div style={{ color: 'var(--t2)', lineHeight: '1.6' }}>3차원 유출유 확산예측 기반 해양유류오염 방제 지원기술 개발<br /><span style={{ color: 'var(--t3)' }}>해양수산부 | 2013.01~2013.12</span></div>
+              <div className="font-bold mb-1 text-primary-cyan">🔷 과제① (기여율 65%)</div>
+              <div className="text-text-2 leading-[1.6]">3차원 유출유 확산예측 기반 해양유류오염 방제 지원기술 개발<br /><span className="text-text-3">해양수산부 | 2013.01~2013.12</span></div>
             </div>
             <div className="p-2 rounded-md" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)' }}>
-              <div className="font-bold mb-1" style={{ color: 'var(--orange)' }}>🔶 과제② (기여율 35%)</div>
-              <div style={{ color: 'var(--t2)', lineHeight: '1.6' }}>주요 위험유해물질(HNS) 유출 거동예측 및 대응정보 지원기술 개발<br /><span style={{ color: 'var(--t3)' }}>해양수산부 | 2013.01~2013.12</span></div>
+              <div className="font-bold mb-1 text-status-orange">🔶 과제② (기여율 35%)</div>
+              <div className="text-text-2 leading-[1.6]">주요 위험유해물질(HNS) 유출 거동예측 및 대응정보 지원기술 개발<br /><span className="text-text-3">해양수산부 | 2013.01~2013.12</span></div>
             </div>
           </div>
           <div className="mt-2 p-1.5 rounded text-[10px]" style={{ background: 'rgba(255,255,255,.02)', border: '1px solid var(--bd)', color: 'var(--t3)' }}>
@@ -628,7 +628,7 @@ function KospsPanel() {
           <div className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-sm shrink-0" style={{ background: 'rgba(6,182,212,.12)', border: '1px solid rgba(6,182,212,.25)' }}>📄</div>
           <div className="flex-1">
             <div className="text-xs font-bold">KOSPS관련 유출유 확산예측 논문 <span className="text-[11px] ml-1" style={{ color: 'var(--t3)', transition: 'transform .2s', display: 'inline-block', transform: kospsPapersOpen ? 'rotate(180deg)' : 'rotate(0)' }}>▼</span></div>
-            <div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>KOSPS 개발 · 허베이스피리트 검증 · 3D 확산예측 시스템 · 방제효과 모델링 — 한국해양환경·에너지학회</div>
+            <div className="text-[10px] mt-0.5 text-text-3">KOSPS 개발 · 허베이스피리트 검증 · 3D 확산예측 시스템 · 방제효과 모델링 — 한국해양환경·에너지학회</div>
           </div>
         </div>
         {kospsPapersOpen && <div className="flex flex-col gap-2 mt-3.5">
@@ -646,8 +646,8 @@ function KospsPanel() {
                 <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>
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>{paper.desc}</div>
+              <div className="text-[11px] mb-1.5 text-text-3">{paper.authors}</div>
+              <div className="text-[11px] text-text-2 leading-[1.7]">{paper.desc}</div>
             </div>
           ))}
         </div>}
@@ -659,7 +659,7 @@ function KospsPanel() {
           <span style={{ ...tag('var(--cyan)'), fontWeight: 700, fontSize: '12px' }}>📄 국내 학술논문</span>
           <span className="text-[11px] ml-1" style={{ color: 'var(--t3)', transition: 'transform .2s', display: 'inline-block', transform: papersOpen ? 'rotate(180deg)' : 'rotate(0)' }}>▼</span>
         </div>
-        {papersOpen && <div className="flex flex-col gap-1.5 mb-3.5 text-[10px]" style={{ color: 'var(--t2)' }}>
+        {papersOpen && <div className="flex flex-col gap-1.5 mb-3.5 text-[10px] text-text-2">
           {[
             { num: '①', title: '유출유 확산 예측 모델의 상시 운용 체계 개발에 관한 연구', authors: '김혜진 · 이문진 · 오세웅 · 강준묵', journal: '해양환경안전학회지', detail: '제17권 4호, pp.375-382 | 2011', desc: 'KOSPS 상시 운용 체계 구축 · 정적/동적 자료 FTP 자동 연계 · 서해·남해 시범 운용 성능 평가', color: 'var(--cyan)' },
             { num: '②', title: '해양오염 방제지원시스템 구축을 위한 실시간 조류 예측 기술 개발', authors: '이문진 · 강용균 외', journal: '해양환경안전학회 춘계학술발표회', detail: '| 2008', desc: 'CHARRY 모델 인천·서해 적용 검증 · 창조/낙조 실시간 조류 재현 결과', color: 'var(--cyan)' },
@@ -676,8 +676,8 @@ function KospsPanel() {
               <div className="w-6 h-6 rounded-[5px] flex items-center justify-center text-[11px] shrink-0" style={{ background: `${paper.color}1F` }}>{paper.num}</div>
               <div>
                 <div className="font-bold mb-0.5">{paper.title}</div>
-                <div style={{ color: 'var(--t3)', lineHeight: '1.6' }}>{paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b> {paper.detail}</div>
-                <div className="mt-1" style={{ color: 'var(--t2)' }}>{paper.desc}</div>
+                <div className="text-text-3 leading-[1.6]">{paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b> {paper.detail}</div>
+                <div className="mt-1 text-text-2">{paper.desc}</div>
                 {paper.tags && (
                   <div className="flex flex-wrap gap-1 mt-1">
                     {paper.tags.map(t => <span key={t} style={tag(paper.color)}>{t}</span>)}
@@ -695,7 +695,7 @@ function KospsPanel() {
           <span style={{ ...tag('var(--green)'), fontWeight: 700, fontSize: '12px' }}>🌐 국외 핵심 논문</span>
           <span className="text-[11px] ml-1" style={{ color: 'var(--t3)', transition: 'transform .2s', display: 'inline-block', transform: intlPapersOpen ? 'rotate(180deg)' : 'rotate(0)' }}>▼</span>
         </div>
-        {intlPapersOpen && <div className="flex flex-col gap-1.5 text-[10px]" style={{ color: 'var(--t2)' }}>
+        {intlPapersOpen && <div className="flex flex-col gap-1.5 text-[10px] text-text-2">
           {[
             { num: '①', title: 'OpenDrift v1.0: a generic framework for trajectory modelling', authors: 'Dagestad et al.', journal: 'Geoscientific Model Development', detail: 'Vol.11, pp.1405-1420 | 2018', desc: 'OpenDrift 프레임워크 전체 설계·구현·검증 · Python 모듈화 구조 · OpenOil 유출유 모듈 포함', color: 'var(--green)' },
             { num: '②', title: 'Observation-based evaluation of surface wave effects on oil spill trajectories', authors: 'Röhrs et al.', journal: 'J. Geophys. Res. Oceans', detail: '| 2013', desc: 'Stokes drift 파랑 기여 효과 · OpenOil 유출유 확산 현장 검증', color: 'var(--green)' },
@@ -709,8 +709,8 @@ function KospsPanel() {
               <div className="w-6 h-6 rounded-[5px] flex items-center justify-center text-[11px] shrink-0" style={{ background: `${paper.color}1F` }}>{paper.num}</div>
               <div>
                 <div className="font-bold mb-0.5">{paper.title}</div>
-                <div style={{ color: 'var(--t3)', lineHeight: '1.6' }}>{paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b> {paper.detail}</div>
-                <div className="mt-1" style={{ color: 'var(--t2)' }}>{paper.desc}</div>
+                <div className="text-text-3 leading-[1.6]">{paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b> {paper.detail}</div>
+                <div className="mt-1 text-text-2">{paper.desc}</div>
               </div>
             </div>
           ))}
@@ -731,12 +731,12 @@ function PoseidonPanel() {
         <div className="flex items-center gap-3 mb-3">
           <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-[15px] font-bold text-primary-blue">POSEIDON (입자추적 최적화 예측 시스템)</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' }}>
-          김충기·김도연 외(등록특허 10-1868791, 2018)가 개발한 POSEIDON은 실제 해양에 투하한 <b style={{ color: 'var(--blue)' }}>뜰개(Drifter) 관측 경로</b>와 수치모델 예측값을 비교하여, 입자추적 모델의 매개변수를 <b style={{ color: 'var(--purple)' }}>GA·DE·HS·PSO 알고리즘으로 자동 최적화</b>하는 핵심 기술을 보유합니다. 해양순환 기반 모델은 포르투갈 IST/MARETEC이 개발한 <b style={{ color: 'var(--cyan)' }}>MOHID 3D 순환모델</b>을 사용합니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          김충기·김도연 외(등록특허 10-1868791, 2018)가 개발한 POSEIDON은 실제 해양에 투하한 <b className="text-primary-blue">뜰개(Drifter) 관측 경로</b>와 수치모델 예측값을 비교하여, 입자추적 모델의 매개변수를 <b className="text-primary-purple">GA·DE·HS·PSO 알고리즘으로 자동 최적화</b>하는 핵심 기술을 보유합니다. 해양순환 기반 모델은 포르투갈 IST/MARETEC이 개발한 <b className="text-primary-cyan">MOHID 3D 순환모델</b>을 사용합니다.
         </div>
         <div className="mt-2.5 px-3 py-2 rounded-md text-[10px]" style={{ background: 'rgba(59,130,246,.06)', border: '1px solid rgba(59,130,246,.15)', color: 'var(--t3)' }}>
           📚 참고문헌 ①: 김도연·김용혁, &quot;유출유 확산 예측을 위한 입자 추적 모듈 최적화 방법 및 이를 이용한 예측 시스템&quot;, 등록특허 10-1868791, 2018.<br />
@@ -752,13 +752,13 @@ function PoseidonPanel() {
         <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] 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 className="text-[11px] font-bold text-primary-blue">10-1868791</div>
+            <div className="text-[10px] mt-0.5 text-text-3">2018 등록</div>
           </div>
           <div>
             <div className="text-[11px] font-bold mb-1">유출유 확산 예측을 위한 입자 추적 모듈 최적화 방법 및 이를 이용한 예측 시스템 (POSEIDON)</div>
-            <div className="text-[10px]" style={{ color: 'var(--t2)' }}>
-              <span style={{ color: 'var(--blue)' }}>발명자</span> : 김도연 · 김용혁 · 김충기 외 | <span style={{ color: 'var(--blue)' }}>출원인</span> : (주)아라종합기술
+            <div className="text-[10px] text-text-2">
+              <span className="text-primary-blue">발명자</span> : 김도연 · 김용혁 · 김충기 외 | <span className="text-primary-blue">출원인</span> : (주)아라종합기술
             </div>
             <div className="flex flex-wrap gap-1 mt-1.5">
               {['GA(유전알고리즘)', 'DE(차분진화)', 'HS(화음탐색)', 'PSO(입자군집최적화)', '뜰개 자동 동화'].map(t =>
@@ -773,21 +773,21 @@ function PoseidonPanel() {
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--cyan)', margin: 0 }}>
           <div style={labelStyle('var(--cyan)')}>🌊 MOHID 해양순환모델 (기반 모델)</div>
           <div className={`${bodyText} mb-2.5`}>포르투갈 IST/MARETEC에서 1985년부터 개발한 3D 수치 해양순환모델. 60여 개 모듈을 보유하며 조류·폭풍해일·수온·염분·난류·유출유 확산 등을 통합 모의합니다.</div>
-          <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1 text-[10px] text-text-2">
             {[
               { label: '격자 구성', desc: '동아시아 9km + 한반도 3km (Nesting)' },
               { label: '수직 좌표', desc: 'σ + Z-level 혼합 (GVC)' },
               { label: '검증 결과', desc: 'SST RMSE 0.42~0.78°C, SLA RMSE 0.11~0.17m' },
               { label: '경계조건', desc: 'HYCOM 재분석 (MYOCEAN 대비 우수)' },
             ].map(t =>
-              <div key={t.label} className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)', color: 'var(--t2)' }}><span style={{ color: 'var(--cyan)', fontWeight: 700 }}>{t.label}</span> : {t.desc}</div>
+              <div key={t.label} className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)', color: 'var(--t2)' }}><span className="text-primary-cyan font-bold">{t.label}</span> : {t.desc}</div>
             )}
           </div>
         </div>
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--purple)', margin: 0 }}>
           <div style={labelStyle('var(--purple)')}>⚙️ 입자추적 매개변수 자동 최적화</div>
           <div className={`${bodyText} mb-2.5`}>뜰개 관측 경로와 제1 모델 예측값의 단위시간별 변화량을 비교하여 제2 모델의 매개변수를 반복 최적화합니다.</div>
-          <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1 text-[10px] text-text-2">
             {[
               { label: '최적화 알고리즘', desc: 'GA · DE · HS · PSO 중 선택' },
               { label: '입력 데이터', desc: '유속·풍속 벡터 + 제1모델 변화량' },
@@ -805,21 +805,21 @@ function PoseidonPanel() {
         <div style={labelStyle('var(--blue)')}>📐 POSEIDON 입자추적 핵심 수식</div>
         <div className="grid grid-cols-2 gap-3">
           <div>
-            <div className="text-[11px] font-semibold mb-1.5" style={{ color: 'var(--t3)' }}>제1 입자추적 모델 (기본)</div>
+            <div className="text-[11px] font-semibold mb-1.5 text-text-3">제1 입자추적 모델 (기본)</div>
             <div className={codeBox}>
               Model_x = Δt × current_u + Δt × c × wind_u<br />
               Model_y = Δt × current_v + Δt × c × wind_v
             </div>
-            <div className="text-[10px] mt-1.5" style={{ color: 'var(--t3)' }}>c : 풍속 가중치 (예: c=0.3 → 바람의 30% 반영)</div>
+            <div className="text-[10px] mt-1.5 text-text-3">c : 풍속 가중치 (예: c=0.3 → 바람의 30% 반영)</div>
           </div>
           <div>
-            <div className="text-[11px] font-semibold mb-1.5" style={{ color: 'var(--t3)' }}>제2 입자추적 모델 (최적화 후)</div>
+            <div className="text-[11px] font-semibold mb-1.5 text-text-3">제2 입자추적 모델 (최적화 후)</div>
             <div className={codeBox}>
               Revised_x = a1·current_u + a2·current_v<br />
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ a3·wind_u + a4·wind_v<br />
               &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;+ a5·Model_x + a6·Model_y + a7
             </div>
-            <div className="text-[10px] mt-1.5" style={{ color: 'var(--t3)' }}>a1~a7 : GA·DE·PSO로 최적화된 매개변수</div>
+            <div className="text-[10px] mt-1.5 text-text-3">a1~a7 : GA·DE·PSO로 최적화된 매개변수</div>
           </div>
         </div>
       </div>
@@ -828,7 +828,7 @@ function PoseidonPanel() {
         <div style={labelStyle('var(--t1)')}>🔄 POSEIDON_V2 상시 운용 체계</div>
 
         {/* 외부 입력 자료 */}
-        <div className="text-[10px] font-bold mb-1.5 mt-1" style={{ color: 'var(--t3)' }}>외부 입력 자료</div>
+        <div className="text-[10px] font-bold mb-1.5 mt-1 text-text-3">외부 입력 자료</div>
         <div className="flex items-center justify-center gap-0 mb-3">
           {[
             { label: 'HYCOM', sub: '해류·수온·염분', detail: 'YYYYMMDD.nc', color: 'var(--blue)' },
@@ -841,7 +841,7 @@ function PoseidonPanel() {
                 background: `${node.color}14`, border: `1px solid ${node.color}33`
               }}>
                 <div className="font-bold text-[11px]" style={{ color: node.color }}>{node.label}</div>
-                <div style={{ color: 'var(--t2)' }}>{node.sub}</div>
+                <div className="text-text-2">{node.sub}</div>
                 <div className="mt-0.5" style={{ color: 'var(--t3)', fontSize: '9px' }}>{node.detail}</div>
               </div>
               {i < 3 && <div className="w-[20px] h-px" style={{ background: 'var(--bdL)' }} />}
@@ -850,10 +850,10 @@ function PoseidonPanel() {
         </div>
 
         {/* 중앙 화살표 */}
-        <div className="text-center text-[10px] mb-2" style={{ color: 'var(--t3)' }}>▼ DATA → PREP → 격자 보간/좌표 변환 ▼</div>
+        <div className="text-center text-[10px] mb-2 text-text-3">▼ DATA → PREP → 격자 보간/좌표 변환 ▼</div>
 
         {/* 4대 도메인 실행 모듈 */}
-        <div className="text-[10px] font-bold mb-1.5" style={{ color: 'var(--t3)' }}>POSEIDON 4대 실행 모듈 (EA012 대격자 → KO108 연안 상세격자)</div>
+        <div className="text-[10px] font-bold mb-1.5 text-text-3">POSEIDON 4대 실행 모듈 (EA012 대격자 → KO108 연안 상세격자)</div>
         <div className="grid grid-cols-4 gap-2 mb-3">
           {[
             { label: 'HYDR', script: 'RUN-HYDR.sh', engine: 'MOHID 3D', desc: '해류·수온·염분·수위', color: 'var(--cyan)', icon: '🌊' },
@@ -867,15 +867,15 @@ function PoseidonPanel() {
             }}>
               <div className="text-base mb-1">{m.icon}</div>
               <div className="text-[12px] font-bold" style={{ color: m.color }}>{m.label}</div>
-              <div className="text-[9px] mt-0.5" style={{ color: 'var(--t2)' }}>{m.engine}</div>
+              <div className="text-[9px] mt-0.5 text-text-2">{m.engine}</div>
               <div className="text-[9px] mt-0.5 px-1 py-0.5 rounded" style={{ background: `${m.color}14`, color: 'var(--t3)' }}>{m.script}</div>
-              <div className="text-[9px] mt-1" style={{ color: 'var(--t2)' }}>{m.desc}</div>
+              <div className="text-[9px] mt-1 text-text-2">{m.desc}</div>
             </div>
           ))}
         </div>
 
         {/* 화살표 + 최적화 */}
-        <div className="text-center text-[10px] mb-2" style={{ color: 'var(--t3)' }}>▼ HYDR + WAVE + TIDE → OILS 강제력 입력 ▼ 뜰개 관측 → GA/DE/PSO 매개변수 자동 최적화 ▼</div>
+        <div className="text-center text-[10px] mb-2 text-text-3">▼ HYDR + WAVE + TIDE → OILS 강제력 입력 ▼ 뜰개 관측 → GA/DE/PSO 매개변수 자동 최적화 ▼</div>
 
         {/* 출력·활용 */}
         <div className="flex items-center justify-center gap-0">
@@ -901,12 +901,12 @@ function PoseidonPanel() {
           HYCOM(.nc) + GDAPS(.grib2) → 격자 보간(EA012/KO108) → MOHID(해류) + SWAN(파랑) + 조석 → OILS 입자추적 → 뜰개 동화 최적화 → HDF5 결과 → 방제 의사결정
         </div>
         <div className="mt-2.5 p-2 rounded-md" style={{ background: 'rgba(234,179,8,.05)', border: '1px solid rgba(234,179,8,.15)' }}>
-          <div className="text-[10px] font-bold mb-1" style={{ color: 'var(--yellow)' }}>⚠️ 예측 신뢰도 한계</div>
-          <div className="text-[10px]" style={{ color: 'var(--t2)', lineHeight: '1.6' }}>
+          <div className="text-[10px] font-bold mb-1 text-status-yellow">⚠️ 예측 신뢰도 한계</div>
+          <div className="text-[10px] text-text-2 leading-[1.6]">
             조류: 무한 예보 가능<br />
             해류(HYCOM): <b>5일치</b> 제한<br />
-            기온·취송류: <b style={{ color: 'var(--orange)' }}>3일치</b> 제한<br />
-            → <b style={{ color: 'var(--red)' }}>72h 초과 예측 시 신뢰도 저하</b>
+            기온·취송류: <b className="text-status-orange">3일치</b> 제한<br />
+            → <b className="text-status-red">72h 초과 예측 시 신뢰도 저하</b>
           </div>
         </div>
       </div>
@@ -918,7 +918,7 @@ function PoseidonPanel() {
           <div className="w-[30px] h-[30px] rounded-[7px] flex items-center justify-center text-sm shrink-0" style={{ background: 'rgba(59,130,246,.12)', border: '1px solid rgba(59,130,246,.25)' }}>📄</div>
           <div>
             <div className="text-xs font-bold">POSEIDON관련 유출유 확산예측 논문</div>
-            <div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>포세이돈 시스템 소개·활용 · 최적 방제전략 · 원격탐사 연동 · MOHID 검증 — 한국해양환경·에너지학회 외</div>
+            <div className="text-[10px] mt-0.5 text-text-3">포세이돈 시스템 소개·활용 · 최적 방제전략 · 원격탐사 연동 · MOHID 검증 — 한국해양환경·에너지학회 외</div>
           </div>
         </div>
         <div className="flex flex-col gap-2">
@@ -936,8 +936,8 @@ function PoseidonPanel() {
                 <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>
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>{paper.desc}</div>
+              <div className="text-[11px] mb-1.5 text-text-3">{paper.authors}</div>
+              <div className="text-[11px] text-text-2 leading-[1.7]">{paper.desc}</div>
             </div>
           ))}
         </div>
@@ -956,12 +956,12 @@ function OpenDriftPanel() {
         <div className="flex items-center gap-3 mb-3">
           <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-[15px] font-bold text-primary-blue">OpenDrift (오픈소스 라그랑지안 확산 프레임워크)</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' }}>
-          Dagestad et al.(2018)이 개발한 OpenDrift는 유출유·SAR·표류물·부유입자 등 다양한 해양 확산 현상을 모의하는 <b style={{ color: 'var(--blue)' }}>Python 기반 오픈소스 라그랑지안 프레임워크</b>입니다. NEMO·ROMS·HYCOM 등 다양한 해양모델 출력값을 강제력으로 사용하며, <b style={{ color: 'var(--cyan)' }}>OpenOil 모듈</b>을 통해 유출유 거동을 상세 모의합니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          Dagestad et al.(2018)이 개발한 OpenDrift는 유출유·SAR·표류물·부유입자 등 다양한 해양 확산 현상을 모의하는 <b className="text-primary-blue">Python 기반 오픈소스 라그랑지안 프레임워크</b>입니다. NEMO·ROMS·HYCOM 등 다양한 해양모델 출력값을 강제력으로 사용하며, <b className="text-primary-cyan">OpenOil 모듈</b>을 통해 유출유 거동을 상세 모의합니다.
         </div>
         <div className="flex gap-2 flex-wrap mt-2.5">
           <span className="px-3.5 py-1.5 rounded-md text-[11px] font-semibold" style={{ border: '1px solid rgba(34,197,94,.3)', background: 'rgba(34,197,94,.08)', color: 'var(--green)' }}>🔗 공식 문서 (opendrift.github.io)</span>
@@ -988,7 +988,7 @@ function OpenDriftPanel() {
         ].map(s => (
           <div key={s.title} className={`${card} ${cardBg}`} style={{ borderTop: `3px solid ${s.color}`, margin: 0 }}>
             <div style={labelStyle(s.color)}>{s.title}</div>
-            <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+            <div className="flex flex-col gap-1 text-[10px] text-text-2">
               {s.items.map((item, idx) => (
                 'html' in item
                   ? <div key={idx} className="px-2 py-1 rounded" style={{ background: `${s.color}0A`, border: `1px solid ${s.color}1F`, color: 'var(--t2)' }} dangerouslySetInnerHTML={{ __html: sanitizeHtml(item.html) }} />
@@ -1042,7 +1042,7 @@ function OpenDriftPanel() {
             </div>
           ))}
         </div>
-        <div className="text-[10px] text-center mt-1" style={{ color: 'var(--t3)' }}>
+        <div className="text-[10px] text-center mt-1 text-text-3">
           해양모델(NEMO·ROMS·HYCOM) + 기상자료(ECMWF·GFS) → NOAA Oil Library 유종 매칭 → OpenDrift/OpenOil 모듈 구동 → NetCDF 결과 출력·시각화
         </div>
       </div>
@@ -1054,7 +1054,7 @@ function OpenDriftPanel() {
           <div className="w-8 h-8 rounded-lg flex items-center justify-center text-base shrink-0" style={{ background: 'rgba(59,130,246,.12)', border: '1px solid rgba(59,130,246,.25)' }}>📄</div>
           <div>
             <div className="text-xs font-bold">OpenDrift / OpenOil 국내 해역 적용 연구 논문</div>
-            <div className="text-[10px] mt-0.5" style={{ color: 'var(--t3)' }}>한국 연안 유출유 확산 수치모의 관련 핵심 논문 3편 — WING 모델 이론 근거</div>
+            <div className="text-[10px] mt-0.5 text-text-3">한국 연안 유출유 확산 수치모의 관련 핵심 논문 3편 — WING 모델 이론 근거</div>
           </div>
         </div>
         <div className="flex flex-col gap-2.5">
@@ -1067,26 +1067,26 @@ function OpenDriftPanel() {
                   <span key={t.label} className="whitespace-nowrap" style={{ padding: '2px 8px', background: `${t.color}1F`, border: `1px solid ${t.color}40`, borderRadius: '4px', fontSize: '10px', fontWeight: 700, color: t.color }}>{t.label}</span>
                 )}
               </div>
-              <span className="text-[10px] whitespace-nowrap" style={{ color: 'var(--t3)' }}>2024</span>
+              <span className="text-[10px] whitespace-nowrap text-text-3">2024</span>
             </div>
-            <div className="text-[11px] font-bold mb-1" style={{ lineHeight: '1.5' }}>Numerical Model Test of Spilled Oil Transport Near the Korean Coasts Using Various Input Parametric Models</div>
-            <div className="text-[11px] mb-2" style={{ color: 'var(--t3)' }}>Hai Van Dang, Suchan Joo, Junhyeok Lim, Jinhwan Hur, Sungwon Shin | Hanyang University ERICA | Journal of Ocean Engineering and Technology, 2024</div>
+            <div className="text-[11px] font-bold mb-1" className="leading-normal">Numerical Model Test of Spilled Oil Transport Near the Korean Coasts Using Various Input Parametric Models</div>
+            <div className="text-[11px] mb-2 text-text-3">Hai Van Dang, Suchan Joo, Junhyeok Lim, Jinhwan Hur, Sungwon Shin | Hanyang University ERICA | Journal of Ocean Engineering and Technology, 2024</div>
             <div className="grid grid-cols-2 gap-2 mb-2">
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+              <div className="text-[11px] text-text-2 leading-[1.7]">
                 <b>연구 목적</b><br />
                 OpenOil 모델에 다양한 해양-기상 강제력(Met-Ocean) 조합을 적용하여 한국 연안 유출유 이동 예측 정확도를 비교 평가. 허베이 스피리트(2007) 사고를 대상으로 6개 조합 검증.
               </div>
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+              <div className="text-[11px] text-text-2 leading-[1.7]">
                 <b>주요 결과</b><br />
                 CMEMS 해류모델 + ECMWF 기상 조합이 최고 성능. 동황해 조석 특성(수심 &lt;60m 천해) 고려 시 정확도 향상. Envisat ASAR 위성 실측과 수치 비교 검증 완료.
               </div>
             </div>
             <div className="mb-2">
-              <div className="text-[11px] mb-1" style={{ color: 'var(--t2)' }}><b>적용 강제력 모델 6종 조합</b></div>
-              <div className="grid grid-cols-3 gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
+              <div className="text-[11px] mb-1 text-text-2"><b>적용 강제력 모델 6종 조합</b></div>
+              <div className="grid grid-cols-3 gap-1 text-[10px] text-text-2">
                 <div className="px-2 py-1 rounded" style={{ background: 'rgba(59,130,246,.05)', border: '1px solid rgba(59,130,246,.12)', color: 'var(--t2)' }}><b style={{ color: '#3b82f6' }}>해류</b> HYCOM / CMEMS</div>
-                <div className="px-2 py-1 rounded" style={{ background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', color: 'var(--t2)' }}><b style={{ color: 'var(--green)' }}>파랑</b> CMEMS / ECMWF-ERA5</div>
-                <div className="px-2 py-1 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)', color: 'var(--t2)' }}><b style={{ color: 'var(--orange)' }}>기상</b> NCEP-GFS / ECMWF</div>
+                <div className="px-2 py-1 rounded" style={{ background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', color: 'var(--t2)' }}><b className="text-status-green">파랑</b> CMEMS / ECMWF-ERA5</div>
+                <div className="px-2 py-1 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)', color: 'var(--t2)' }}><b className="text-status-orange">기상</b> NCEP-GFS / ECMWF</div>
               </div>
             </div>
             <div className="p-2 rounded-md text-[10px]" style={{ background: 'rgba(59,130,246,.04)', border: '1px solid rgba(59,130,246,.1)', color: 'var(--t2)', lineHeight: '1.7' }}>
@@ -1102,24 +1102,24 @@ function OpenDriftPanel() {
                   <span key={t.label} className="whitespace-nowrap" style={{ padding: '2px 8px', background: `${t.color}1F`, border: `1px solid ${t.color}40`, borderRadius: '4px', fontSize: '10px', fontWeight: 700, color: t.color }}>{t.label}</span>
                 )}
               </div>
-              <span className="text-[10px] whitespace-nowrap" style={{ color: 'var(--t3)' }}>1998</span>
+              <span className="text-[10px] whitespace-nowrap text-text-3">1998</span>
             </div>
-            <div className="text-[11px] font-bold mb-1" style={{ lineHeight: '1.5' }}>한국 동남해역에서의 유출유 확산예측모델 (Oil Spill Behavior Forecasting Model in South-eastern Coastal Area of Korea)</div>
-            <div className="text-[11px] mb-2" style={{ color: 'var(--t3)' }}>류청로, 김종규, 설동관, 강동욱 | 부경대학교 해양공학과 | 한국해양환경공학회지 Vol.1 No.2, pp.52–59, 1998</div>
+            <div className="text-[11px] font-bold mb-1" className="leading-normal">한국 동남해역에서의 유출유 확산예측모델 (Oil Spill Behavior Forecasting Model in South-eastern Coastal Area of Korea)</div>
+            <div className="text-[11px] mb-2 text-text-3">류청로, 김종규, 설동관, 강동욱 | 부경대학교 해양공학과 | 한국해양환경공학회지 Vol.1 No.2, pp.52–59, 1998</div>
             <div className="grid grid-cols-2 gap-2 mb-2">
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+              <div className="text-[11px] text-text-2 leading-[1.7]">
                 <b>연구 목적</b><br />
                 한국 동남해역(부산-울산) 긴급방제용 실시간 유출유 확산예측모델 OILSPILLFM 개발. 알렉산드리아호(1995) 실제 사고 힌드캐스팅으로 모델 검증.
               </div>
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+              <div className="text-[11px] text-text-2 leading-[1.7]">
                 <b>핵심 수식</b><br />
                 라그랑지안 입자추적 + 2D 해수유동 모델(ADI법). 취송류 Vw = 0.03×V10. 난류확산 Random Walk. 증발 1차 반응식.
               </div>
             </div>
-            <div className="grid grid-cols-3 gap-1 text-[10px] mb-2" style={{ color: 'var(--t2)' }}>
+            <div className="grid grid-cols-3 gap-1 text-[10px] mb-2 text-text-2">
               <div className="px-2 py-1 rounded" style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.12)', color: 'var(--t2)' }}><b style={{ color: '#06b6d4' }}>해수유동</b> Navier-Stokes 2D 연속·운동방정식</div>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(168,85,247,.05)', border: '1px solid rgba(168,85,247,.12)', color: 'var(--t2)' }}><b style={{ color: 'var(--purple)' }}>조류</b> 조화분석 실시간 조류 DB 구축</div>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)', color: 'var(--t2)' }}><b style={{ color: 'var(--orange)' }}>풍화</b> 퍼짐·증발·유상화·생분해 5단계</div>
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(168,85,247,.05)', border: '1px solid rgba(168,85,247,.12)', color: 'var(--t2)' }}><b className="text-primary-purple">조류</b> 조화분석 실시간 조류 DB 구축</div>
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)', color: 'var(--t2)' }}><b className="text-status-orange">풍화</b> 퍼짐·증발·유상화·생분해 5단계</div>
             </div>
             <div className="p-2 rounded-md text-[10px]" style={{ background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.1)', color: 'var(--t2)', lineHeight: '1.7' }}>
               <b style={{ color: '#06b6d4' }}>WING 적용 의의</b> : OpenDrift·KOSPS의 라그랑지안 입자추적 이론적 원전. 조류 영향 미약 해역에서 취송류·해류 성분이 확산에 결정적 역할 — OpenDrift 한국 해역 적용 정당성 근거.
@@ -1134,37 +1134,37 @@ function OpenDriftPanel() {
                   <span key={t.label} className="whitespace-nowrap" style={{ padding: '2px 8px', background: `${t.color}1F`, border: `1px solid ${t.color}40`, borderRadius: '4px', fontSize: '10px', fontWeight: 700, color: t.color }}>{t.label}</span>
                 )}
               </div>
-              <span className="text-[10px] whitespace-nowrap" style={{ color: 'var(--t3)' }}>2008</span>
+              <span className="text-[10px] whitespace-nowrap text-text-3">2008</span>
             </div>
-            <div className="text-[11px] font-bold mb-1" style={{ lineHeight: '1.5' }}>태안 기름유출사고의 유출유 확산특성 분석 (Analysis of Oil Spill Dispersion in Taean Coastal Zone)</div>
-            <div className="text-[11px] mb-2" style={{ color: 'var(--t3)' }}>정태성, 조형진 | 한남대학교 토목환경공학과 | 한국해안·해양공학회 학술발표논문집 제17권 pp.60–63, 2008</div>
+            <div className="text-[11px] font-bold mb-1" className="leading-normal">태안 기름유출사고의 유출유 확산특성 분석 (Analysis of Oil Spill Dispersion in Taean Coastal Zone)</div>
+            <div className="text-[11px] mb-2 text-text-3">정태성, 조형진 | 한남대학교 토목환경공학과 | 한국해안·해양공학회 학술발표논문집 제17권 pp.60–63, 2008</div>
             <div className="grid grid-cols-2 gap-2 mb-2">
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+              <div className="text-[11px] text-text-2 leading-[1.7]">
                 <b>연구 목적</b><br />
                 2007년 12월 태안 허베이 스피리트 기름유출 사고 후 15일간 조류·취송류에 의한 유출유 확산패턴을 2D 수치모형으로 재현. 조류·취송류 기여도 분리 분석.
               </div>
-              <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.7' }}>
+              <div className="text-[11px] text-text-2 leading-[1.7]">
                 <b>핵심 발견</b><br />
                 취송류 풍속 비율 α = 2%가 실제 관측 확산과 가장 유사(3% 과대, 2.5% 다소 빠름). 취송류 편향각 θ = 20° 최적. 조류는 남북 확산거리, 취송류는 해안 부착에 기여.
               </div>
             </div>
-            <div className="grid grid-cols-3 gap-1 text-[10px] mb-2" style={{ color: 'var(--t2)' }}>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)', color: 'var(--t2)' }}><b style={{ color: 'var(--orange)' }}>해역</b> 군산~영흥도(서해 중부)</div>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(239,68,68,.05)', border: '1px solid rgba(239,68,68,.12)', color: 'var(--t2)' }}><b style={{ color: 'var(--red)' }}>격자</b> 유한요소 삼각형, 최소 150m</div>
-              <div className="px-2 py-1 rounded" style={{ background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', color: 'var(--t2)' }}><b style={{ color: 'var(--green)' }}>방출</b> 50입자/9시간 · 총 5일 모의</div>
+            <div className="grid grid-cols-3 gap-1 text-[10px] mb-2 text-text-2">
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.12)', color: 'var(--t2)' }}><b className="text-status-orange">해역</b> 군산~영흥도(서해 중부)</div>
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(239,68,68,.05)', border: '1px solid rgba(239,68,68,.12)', color: 'var(--t2)' }}><b className="text-status-red">격자</b> 유한요소 삼각형, 최소 150m</div>
+              <div className="px-2 py-1 rounded" style={{ background: 'rgba(34,197,94,.05)', border: '1px solid rgba(34,197,94,.12)', color: 'var(--t2)' }}><b className="text-status-green">방출</b> 50입자/9시간 · 총 5일 모의</div>
             </div>
             {/* 취송류 파라미터 비교 */}
             <div className="p-2.5 rounded-[7px] mb-2" style={{ background: 'var(--bg0)', border: '1px solid var(--bd)' }}>
-              <div className="text-[10px] font-bold mb-1.5" style={{ color: 'var(--t2)' }}>취송류 매개변수 비교 (태안 사고 수치실험)</div>
-              <div className="grid grid-cols-4 gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
-                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.12)' }}><div className="font-bold" style={{ color: 'var(--red)' }}>α = 3%</div><div style={{ color: 'var(--t3)' }}>과대 확산</div></div>
-                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(234,179,8,.06)', border: '1px solid rgba(234,179,8,.12)' }}><div className="font-bold" style={{ color: 'var(--yellow)' }}>α = 2.5%</div><div style={{ color: 'var(--t3)' }}>다소 빠름</div></div>
-                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(34,197,94,.08)', border: '1px solid rgba(34,197,94,.2)' }}><div className="font-bold" style={{ color: 'var(--green)' }}>α = 2% ✓</div><div style={{ color: 'var(--t3)' }}>최적 일치</div></div>
-                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(6,182,212,.06)', border: '1px solid rgba(6,182,212,.12)' }}><div className="font-bold" style={{ color: '#06b6d4' }}>θ = 20° ✓</div><div style={{ color: 'var(--t3)' }}>최적 편향각</div></div>
+              <div className="text-[10px] font-bold mb-1.5 text-text-2">취송류 매개변수 비교 (태안 사고 수치실험)</div>
+              <div className="grid grid-cols-4 gap-1 text-[10px] text-text-2">
+                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(239,68,68,.06)', border: '1px solid rgba(239,68,68,.12)' }}><div className="font-bold text-status-red">α = 3%</div><div className="text-text-3">과대 확산</div></div>
+                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(234,179,8,.06)', border: '1px solid rgba(234,179,8,.12)' }}><div className="font-bold text-status-yellow">α = 2.5%</div><div className="text-text-3">다소 빠름</div></div>
+                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(34,197,94,.08)', border: '1px solid rgba(34,197,94,.2)' }}><div className="font-bold text-status-green">α = 2% ✓</div><div className="text-text-3">최적 일치</div></div>
+                <div className="px-2 py-1 rounded text-center" style={{ background: 'rgba(6,182,212,.06)', border: '1px solid rgba(6,182,212,.12)' }}><div className="font-bold" style={{ color: '#06b6d4' }}>θ = 20° ✓</div><div className="text-text-3">최적 편향각</div></div>
               </div>
             </div>
             <div className="p-2 rounded-md text-[10px]" style={{ background: 'rgba(249,115,22,.04)', border: '1px solid rgba(249,115,22,.1)', color: 'var(--t2)', lineHeight: '1.7' }}>
-              <b style={{ color: 'var(--orange)' }}>WING 적용 의의</b> : 서해(조류 강한 해역) 취송류 매개변수 α = 2%·θ = 20° 최적값은 OpenDrift 서해 운용 시 wind drift factor 설정의 직접 근거. 허베이 스피리트 사고는 POSEIDON(특허 10-1868791)의 검증 데이터로도 활용.
+              <b className="text-status-orange">WING 적용 의의</b> : 서해(조류 강한 해역) 취송류 매개변수 α = 2%·θ = 20° 최적값은 OpenDrift 서해 운용 시 wind drift factor 설정의 직접 근거. 허베이 스피리트 사고는 POSEIDON(특허 10-1868791)의 검증 데이터로도 활용.
             </div>
           </div>
         </div>
@@ -1181,8 +1181,8 @@ function LagrangianPanel() {
         style={{ background: 'linear-gradient(135deg,rgba(6,182,212,.05),rgba(59,130,246,.04))', border: '1px solid rgba(6,182,212,.2)' }}>
         <div className="absolute top-0 left-0 right-0 h-[3px]" style={{ background: 'linear-gradient(90deg,var(--cyan),var(--blue))' }} />
         <div style={labelStyle('var(--t1)')}>🧭 라그랑지안 입자추적법(Lagrangian Particle Tracking)</div>
-        <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
-          유출유를 수많은 <b style={{ color: 'var(--cyan)' }}>가상 입자(Virtual Particle)</b>로 표현하여, 각 입자의 이동 경로를 시간 단계마다 추적하는 방법입니다. KOSPS·POSEIDON·OpenDrift 3종 모두 이 방식을 채택합니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          유출유를 수많은 <b className="text-primary-cyan">가상 입자(Virtual Particle)</b>로 표현하여, 각 입자의 이동 경로를 시간 단계마다 추적하는 방법입니다. KOSPS·POSEIDON·OpenDrift 3종 모두 이 방식을 채택합니다.
         </div>
       </div>
 
@@ -1193,11 +1193,11 @@ function LagrangianPanel() {
             dx/dt = U_c + α·U_w + U_stokes + U&apos;<br />
             dy/dt = V_c + α·V_w + V_stokes + V&apos;
           </div>
-          <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
-            <div className="flex gap-2"><span style={{ color: 'var(--orange)', fontWeight: 700, width: '60px' }}>U_c, V_c</span><span style={{ color: 'var(--t2)' }}>표층 해류·조류 속도 (m/s)</span></div>
-            <div className="flex gap-2"><span style={{ color: 'var(--blue)', fontWeight: 700, width: '60px' }}>α·U_w</span><span style={{ color: 'var(--t2)' }}>풍류 기여 (α ≈ 0.03)</span></div>
-            <div className="flex gap-2"><span style={{ color: 'var(--green)', fontWeight: 700, width: '60px' }}>U_stokes</span><span style={{ color: 'var(--t2)' }}>스토크스 표류 (파랑 영향)</span></div>
-            <div className="flex gap-2"><span style={{ color: 'var(--purple)', fontWeight: 700, width: '60px' }}>U&apos;</span><span style={{ color: 'var(--t2)' }}>난류 확산 (랜덤워크)</span></div>
+          <div className="flex flex-col gap-1 text-[10px] text-text-2">
+            <div className="flex gap-2"><span style={{ color: 'var(--orange)', fontWeight: 700, width: '60px' }}>U_c, V_c</span><span className="text-text-2">표층 해류·조류 속도 (m/s)</span></div>
+            <div className="flex gap-2"><span style={{ color: 'var(--blue)', fontWeight: 700, width: '60px' }}>α·U_w</span><span className="text-text-2">풍류 기여 (α ≈ 0.03)</span></div>
+            <div className="flex gap-2"><span style={{ color: 'var(--green)', fontWeight: 700, width: '60px' }}>U_stokes</span><span className="text-text-2">스토크스 표류 (파랑 영향)</span></div>
+            <div className="flex gap-2"><span style={{ color: 'var(--purple)', fontWeight: 700, width: '60px' }}>U&apos;</span><span className="text-text-2">난류 확산 (랜덤워크)</span></div>
           </div>
         </div>
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--blue)', margin: 0 }}>
@@ -1206,10 +1206,10 @@ function LagrangianPanel() {
             U&apos; = R · √(2K_h / Δt)<br />
             V&apos; = R · √(2K_h / Δt)
           </div>
-          <div className="flex flex-col gap-1 text-[10px]" style={{ color: 'var(--t2)' }}>
-            <div className="flex gap-2"><span style={{ color: 'var(--purple)', fontWeight: 700, width: '60px' }}>R</span><span style={{ color: 'var(--t2)' }}>[-1, 1] 균등분포 난수</span></div>
-            <div className="flex gap-2"><span style={{ color: 'var(--blue)', fontWeight: 700, width: '60px' }}>K_h</span><span style={{ color: 'var(--t2)' }}>수평 확산 계수 (m²/s)</span></div>
-            <div className="flex gap-2"><span style={{ color: 'var(--t2)', fontWeight: 700, width: '60px' }}>Δt</span><span style={{ color: 'var(--t2)' }}>시간 스텝 (일반 1시간)</span></div>
+          <div className="flex flex-col gap-1 text-[10px] text-text-2">
+            <div className="flex gap-2"><span style={{ color: 'var(--purple)', fontWeight: 700, width: '60px' }}>R</span><span className="text-text-2">[-1, 1] 균등분포 난수</span></div>
+            <div className="flex gap-2"><span style={{ color: 'var(--blue)', fontWeight: 700, width: '60px' }}>K_h</span><span className="text-text-2">수평 확산 계수 (m²/s)</span></div>
+            <div className="flex gap-2"><span style={{ color: 'var(--t2)', fontWeight: 700, width: '60px' }}>Δt</span><span className="text-text-2">시간 스텝 (일반 1시간)</span></div>
           </div>
         </div>
       </div>
@@ -1220,20 +1220,20 @@ function LagrangianPanel() {
         <div className="grid grid-cols-2 gap-3">
           <div>
             <div className={`${codeBox} mb-2`}>
-              <span style={{ color: 'var(--t3)', fontSize: '10px' }}>/* 중력-관성 체제 (초기) */</span><br />
-              R(t) = <span style={{ color: 'var(--orange)' }}>K₁</span> · (<span style={{ color: 'var(--cyan)' }}>ΔρgV²</span> / <span style={{ color: 'var(--blue)' }}>ρw</span>)<sup>¼</sup> · t<sup>½</sup>
+              <span className="text-text-3 text-[10px]">/* 중력-관성 체제 (초기) */</span><br />
+              R(t) = <span className="text-status-orange">K₁</span> · (<span className="text-primary-cyan">ΔρgV²</span> / <span className="text-primary-blue">ρw</span>)<sup>¼</sup> · t<sup>½</sup>
             </div>
             <div className={codeBox}>
-              <span style={{ color: 'var(--t3)', fontSize: '10px' }}>/* 중력-점성 체제 (후기) */</span><br />
-              R(t) = <span style={{ color: 'var(--orange)' }}>K₂</span> · (<span style={{ color: 'var(--cyan)' }}>ΔρgV²</span> / <span style={{ color: 'var(--purple)' }}>νw</span>)<sup>⅙</sup> · t<sup>¾</sup>
+              <span className="text-text-3 text-[10px]">/* 중력-점성 체제 (후기) */</span><br />
+              R(t) = <span className="text-status-orange">K₂</span> · (<span className="text-primary-cyan">ΔρgV²</span> / <span className="text-primary-purple">νw</span>)<sup>⅙</sup> · t<sup>¾</sup>
             </div>
           </div>
-          <div className="flex flex-col gap-1.5 text-[10px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1.5 text-[10px] text-text-2">
             <div className="px-2.5 py-1.5 rounded-md" style={{ background: 'rgba(249,115,22,.05)', border: '1px solid rgba(249,115,22,.15)' }}>
-              <span style={{ color: 'var(--orange)', fontWeight: 700 }}>Δρ</span> : 유류-해수 밀도차 (kg/m³)
+              <span className="text-status-orange font-bold">Δρ</span> : 유류-해수 밀도차 (kg/m³)
             </div>
             <div className="px-2.5 py-1.5 rounded-md" style={{ background: 'rgba(6,182,212,.05)', border: '1px solid rgba(6,182,212,.15)' }}>
-              <span style={{ color: 'var(--cyan)', fontWeight: 700 }}>g</span> : 중력가속도 9.81 m/s²
+              <span className="text-primary-cyan font-bold">g</span> : 중력가속도 9.81 m/s²
             </div>
             <div className="px-2.5 py-1.5 rounded-md" style={{ background: 'rgba(59,130,246,.05)', border: '1px solid rgba(59,130,246,.15)' }}>
               <span style={{ color: 'var(--blue)', fontWeight: 700 }}>V</span> : 유출 체적 (m³)
@@ -1256,8 +1256,8 @@ function WeatheringPanel() {
         style={{ background: 'linear-gradient(135deg,rgba(249,115,22,.05),rgba(239,68,68,.04))', border: '1px solid rgba(249,115,22,.2)' }}>
         <div className="absolute top-0 left-0 right-0 h-[3px]" style={{ background: 'linear-gradient(90deg,var(--orange),var(--red),var(--yellow))' }} />
         <div style={labelStyle('var(--t1)')}>🔁 유출유 풍화(Weathering) 프로세스</div>
-        <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
-          유출유는 해면에 유출된 직후부터 <b style={{ color: 'var(--orange)' }}>물리·화학·생물학적 풍화 과정</b>을 거쳐 지속적으로 특성이 변화합니다. WING 시스템은 주요 풍화 프로세스를 통합 모의하여 시간 경과에 따른 유류 상태 변화를 추적합니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          유출유는 해면에 유출된 직후부터 <b className="text-status-orange">물리·화학·생물학적 풍화 과정</b>을 거쳐 지속적으로 특성이 변화합니다. WING 시스템은 주요 풍화 프로세스를 통합 모의하여 시간 경과에 따른 유류 상태 변화를 추적합니다.
         </div>
       </div>
 
@@ -1271,7 +1271,7 @@ function WeatheringPanel() {
             <div style={labelStyle(w.color)}>{w.title}</div>
             <div className={`${bodyText} mb-2`}>{w.desc}</div>
             <div className={codeBox}>{w.formula}</div>
-            <div className="mt-2 text-[10px]" style={{ color: 'var(--t3)' }}>{w.note}</div>
+            <div className="mt-2 text-[10px] text-text-3">{w.note}</div>
           </div>
         ))}
       </div>
@@ -1309,14 +1309,14 @@ function OceanInputPanel() {
         style={{ background: 'linear-gradient(135deg,rgba(34,197,94,.05),rgba(6,182,212,.04))', border: '1px solid rgba(34,197,94,.2)' }}>
         <div className="absolute top-0 left-0 right-0 h-[3px]" style={{ background: 'linear-gradient(90deg,var(--green),var(--cyan))' }} />
         <div style={labelStyle('var(--t1)')}>🌊 해양환경 입력 데이터 체계</div>
-        <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
-          유출유 확산 예측의 정확도는 <b style={{ color: 'var(--cyan)' }}>입력 해양·기상 데이터의 품질</b>에 크게 좌우됩니다. WING 시스템은 국내외 수치예보 모델과 실시간 관측 데이터를 연동하여 모델 정확도를 향상시킵니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          유출유 확산 예측의 정확도는 <b className="text-primary-cyan">입력 해양·기상 데이터의 품질</b>에 크게 좌우됩니다. WING 시스템은 국내외 수치예보 모델과 실시간 관측 데이터를 연동하여 모델 정확도를 향상시킵니다.
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--green)', margin: 0 }}>
           <div style={labelStyle('var(--green)')}>🌬️ 기상 입력</div>
-          <div className="flex flex-col gap-1.5 text-[11px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1.5 text-[11px] text-text-2">
             {[
               { label: 'KMA RDAPS', desc: '동아시아 12km 해상도 · 24h 예보' },
               { label: 'ECMWF ERA5', desc: '전지구 0.25° 재분석 데이터' },
@@ -1324,14 +1324,14 @@ function OceanInputPanel() {
             ].map(t =>
               <div key={t.label} className="rounded-md" style={{ padding: '7px 10px', background: 'rgba(34,197,94,.04)', border: '1px solid rgba(34,197,94,.12)' }}>
                 <div className="font-semibold mb-0.5">{t.label}</div>
-                <div style={{ color: 'var(--t3)' }}>{t.desc}</div>
+                <div className="text-text-3">{t.desc}</div>
               </div>
             )}
           </div>
         </div>
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--cyan)', margin: 0 }}>
           <div style={labelStyle('var(--cyan)')}>🌊 해양 입력</div>
-          <div className="flex flex-col gap-1.5 text-[11px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-1.5 text-[11px] text-text-2">
             {[
               { label: 'NIFS ROMS', desc: '한국 근해 1km 해류·수온 예보' },
               { label: 'HYCOM', desc: '전지구 1/12° 해양 순환 모델' },
@@ -1339,7 +1339,7 @@ function OceanInputPanel() {
             ].map(t =>
               <div key={t.label} className="rounded-md" style={{ padding: '7px 10px', background: 'rgba(6,182,212,.04)', border: '1px solid rgba(6,182,212,.12)' }}>
                 <div className="font-semibold mb-0.5">{t.label}</div>
-                <div style={{ color: 'var(--t3)' }}>{t.desc}</div>
+                <div className="text-text-3">{t.desc}</div>
               </div>
             )}
           </div>
@@ -1358,8 +1358,8 @@ function VerificationPanel() {
         style={{ background: 'linear-gradient(135deg,rgba(59,130,246,.05),rgba(34,197,94,.04))', border: '1px solid rgba(59,130,246,.2)' }}>
         <div className="absolute top-0 left-0 right-0 h-[3px]" style={{ background: 'linear-gradient(90deg,var(--blue),var(--green))' }} />
         <div style={labelStyle('var(--t1)')}>✅ 모델 검증 사례</div>
-        <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
-          WING 시스템의 유출유 확산 모델은 <b style={{ color: 'var(--blue)' }}>과거 실제 사고 재현 시뮬레이션</b>을 통해 정확도가 검증되었습니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          WING 시스템의 유출유 확산 모델은 <b className="text-primary-blue">과거 실제 사고 재현 시뮬레이션</b>을 통해 정확도가 검증되었습니다.
         </div>
       </div>
 
@@ -1375,7 +1375,7 @@ function VerificationPanel() {
             { value: '±8h', label: '해안 도달 시간 오차', color: 'var(--orange)' },
             { value: '3종', label: '비교 검증 모델 수', color: 'var(--purple)' },
           ].map(s => (
-            <div key={s.label} className="text-center p-2 rounded-md" style={{ background: 'var(--bg0)' }}>
+            <div key={s.label} className="text-center p-2 rounded-md bg-bg-0">
               <div className="font-bold" style={{ fontSize: '14px', color: s.color, fontFamily: 'var(--fM)' }}>{s.value}</div>
               <div className="text-[10px] text-text-3">{s.label}</div>
             </div>
@@ -1388,8 +1388,8 @@ function VerificationPanel() {
           <div style={labelStyle('var(--t1)')}>2014년 우이산 충돌 사고 재현</div>
           <span className="text-[10px] px-2 py-0.5 rounded" style={{ background: 'rgba(6,182,212,.12)', color: 'var(--cyan)', fontWeight: 600 }}>검증완료</span>
         </div>
-        <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.6' }}>
-          여수 오동도 인근 원유 유출 사고를 KOSPS 모델로 재현한 결과, 실제 위성 SAR 영상과 비교 시 <b style={{ color: 'var(--cyan)' }}>유막 중심 이동 경로 일치율 82.1%</b> 확인. 남해 특유의 복잡한 조류 패턴 반영이 관건.
+        <div className="text-[11px] text-text-2 leading-[1.6]">
+          여수 오동도 인근 원유 유출 사고를 KOSPS 모델로 재현한 결과, 실제 위성 SAR 영상과 비교 시 <b className="text-primary-cyan">유막 중심 이동 경로 일치율 82.1%</b> 확인. 남해 특유의 복잡한 조류 패턴 반영이 관건.
         </div>
       </div>
 
@@ -1399,7 +1399,7 @@ function VerificationPanel() {
           <span style={{ ...tag('var(--blue)'), fontWeight: 700, fontSize: '12px' }}>📄 모델 검증 관련 논문</span>
           <span className="text-[11px] ml-1" style={{ color: 'var(--t3)', transition: 'transform .2s', display: 'inline-block', transform: papersOpen ? 'rotate(180deg)' : 'rotate(0)' }}>▼</span>
         </div>
-        {papersOpen && <div className="flex flex-col gap-1.5 text-[10px]" style={{ color: 'var(--t2)' }}>
+        {papersOpen && <div className="flex flex-col gap-1.5 text-[10px] text-text-2">
           {[
             { num: '①', title: '허베이스피리트호 유출유 확산예측 검증 분석', authors: '이문진 · 김선동 · 김혜진 · 오세웅', journal: '한국해양과학기술협의회 공동학술대회', detail: 'pp.3154 | 2010', desc: 'Radarsat 인공위성영상 비교 분석 · NOAA GNOME과 동일 입력조건 하 비교 검증', color: 'var(--red)', system: 'KOSPS' },
             { num: '②', title: '3차원 유출유 확산예측 시스템 연구', authors: '이문진 · 김혜진 · 강관근', journal: '한국해양과학기술협의회 공동학술대회', detail: 'pp.17-18 | 2013', desc: 'Monte Carlo Simulation 기반 3D 확산모델 · 허베이 스피리트호 720시간 적용 검증', color: 'var(--purple)', system: 'KOSPS' },
@@ -1419,8 +1419,8 @@ function VerificationPanel() {
                   <div className="font-bold">{paper.title}</div>
                   <span style={{ ...tag(paper.color), fontSize: '9px', padding: '1px 5px' }}>{paper.system}</span>
                 </div>
-                <div style={{ color: 'var(--t3)', lineHeight: '1.6' }}>{paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b> {paper.detail}</div>
-                <div className="mt-1" style={{ color: 'var(--t2)' }}>{paper.desc}</div>
+                <div className="text-text-3 leading-[1.6]">{paper.authors} | <b style={{ color: paper.color }}>{paper.journal}</b> {paper.detail}</div>
+                <div className="mt-1 text-text-2">{paper.desc}</div>
               </div>
             </div>
           ))}
@@ -1438,8 +1438,8 @@ function EnsemblePanel() {
         style={{ background: 'linear-gradient(135deg,rgba(168,85,247,.05),rgba(6,182,212,.04))', border: '1px solid rgba(168,85,247,.2)' }}>
         <div className="absolute top-0 left-0 right-0 h-[3px]" style={{ background: 'linear-gradient(90deg,var(--purple),var(--cyan))' }} />
         <div style={labelStyle('var(--t1)')}>⚡ 앙상블 예측(Ensemble Prediction)</div>
-        <div className="text-[11px]" style={{ color: 'var(--t2)', lineHeight: '1.8' }}>
-          WING 시스템은 3종의 유출유 확산 모델(KOSPS·POSEIDON·OpenDrift)을 동시 운용하여 <b style={{ color: 'var(--purple)' }}>앙상블 결과</b>를 생산합니다. 단일 모델 대비 불확실성을 정량화하고 신뢰 구간을 제공합니다.
+        <div className="text-[11px] text-text-2 leading-[1.8]">
+          WING 시스템은 3종의 유출유 확산 모델(KOSPS·POSEIDON·OpenDrift)을 동시 운용하여 <b className="text-primary-purple">앙상블 결과</b>를 생산합니다. 단일 모델 대비 불확실성을 정량화하고 신뢰 구간을 제공합니다.
         </div>
       </div>
       <div className="grid grid-cols-2 gap-3">
@@ -1452,7 +1452,7 @@ function EnsemblePanel() {
         </div>
         <div className={`${card} ${cardBg}`} style={{ borderLeft: '3px solid var(--orange)', margin: 0 }}>
           <div style={labelStyle('var(--orange)')}>🎯 최악 시나리오(Worst Case)</div>
-          <div className={bodyText}>방제 전략 수립을 위해 3종 모델 중 <b style={{ color: 'var(--orange)' }}>가장 넓은 오염 범위</b>를 예측한 결과를 최악 시나리오로 별도 표시합니다. 의사결정자에게 보수적 방제 계획 수립 근거를 제공합니다.</div>
+          <div className={bodyText}>방제 전략 수립을 위해 3종 모델 중 <b className="text-status-orange">가장 넓은 오염 범위</b>를 예측한 결과를 최악 시나리오로 별도 표시합니다. 의사결정자에게 보수적 방제 계획 수립 근거를 제공합니다.</div>
         </div>
       </div>
     </div>
@@ -1466,7 +1466,7 @@ function RoadmapPanel() {
       <div className="grid grid-cols-2 gap-3 mb-4">
         <div className={`${card} ${cardBg}`} style={{ borderTop: '3px solid var(--red)', margin: 0 }}>
           <div style={labelStyle('var(--red)')}>⚠️ 현재 모델 한계</div>
-          <div className="flex flex-col gap-2 text-[11px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-2 text-[11px] text-text-2">
             <div className="rounded-md" style={{ padding: '8px 10px', background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.12)', color: 'var(--t2)' }}>2D 표층 확산 모의 위주 → <b>3D 수직 구조 반영 미흡</b></div>
             <div className="rounded-md" style={{ padding: '8px 10px', background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.12)', color: 'var(--t2)' }}>기상·해양 결합 피드백 미적용 → <b>대규모 유출 시 정확도 저하</b></div>
             <div className="rounded-md" style={{ padding: '8px 10px', background: 'rgba(239,68,68,.04)', border: '1px solid rgba(239,68,68,.12)', color: 'var(--t2)' }}>조류 조화상수 분해능 한계 → <b>항만·연안 세부 예측 오차</b></div>
@@ -1474,7 +1474,7 @@ function RoadmapPanel() {
         </div>
         <div className={`${card} ${cardBg}`} style={{ borderTop: '3px solid var(--green)', margin: 0 }}>
           <div style={labelStyle('var(--green)')}>🚀 발전 방향</div>
-          <div className="flex flex-col gap-2 text-[11px]" style={{ color: 'var(--t2)' }}>
+          <div className="flex flex-col gap-2 text-[11px] text-text-2">
             {[
               { title: 'ROMS 3D 해양모델 결합', desc: '광역→상세역 Nesting 200m급 고해상도 구현' },
               { title: 'AI/ML 서로게이트 모델', desc: '수치모델 학습 기반 수초 내 근사 예측' },
diff --git a/frontend/src/tabs/prediction/components/OilSpillView.tsx b/frontend/src/tabs/prediction/components/OilSpillView.tsx
index d5fd526..0cc91ea 100755
--- a/frontend/src/tabs/prediction/components/OilSpillView.tsx
+++ b/frontend/src/tabs/prediction/components/OilSpillView.tsx
@@ -607,7 +607,7 @@ export function OilSpillView() {
                   { label: '차단율', value: boomLines.length > 0 ? `${Math.min(95, 70 + Math.round(timelinePosition * 0.2))}%` : '—', color: 'var(--boom)' },
                 ].map((s, i) => (
                   <div key={i} style={{ display: 'flex', alignItems: 'center', gap: '5px', fontSize: '11px' }}>
-                    <span style={{ color: 'var(--t3)' }}>{s.label}</span>
+                    <span className="text-text-3">{s.label}</span>
                     <span style={{ color: s.color, fontWeight: 600, fontFamily: 'var(--fM)' }}>{s.value}</span>
                   </div>
                 ))}
diff --git a/frontend/src/tabs/prediction/components/PredictionInputSection.tsx b/frontend/src/tabs/prediction/components/PredictionInputSection.tsx
index fea7b72..c17d37d 100644
--- a/frontend/src/tabs/prediction/components/PredictionInputSection.tsx
+++ b/frontend/src/tabs/prediction/components/PredictionInputSection.tsx
@@ -189,7 +189,7 @@ const PredictionInputSection = ({
                   fontSize: '10px',
                   fontFamily: 'var(--fM)'
                 }}>
-                  <span style={{ color: 'var(--t2)' }}>📄 {uploadedFileName || 'example_plot_0.gif'}</span>
+                  <span className="text-text-2">📄 {uploadedFileName || 'example_plot_0.gif'}</span>
                   <button
                     onClick={removeUploadedImage}
                     style={{
diff --git a/frontend/src/tabs/reports/components/ReportGenerator.tsx b/frontend/src/tabs/reports/components/ReportGenerator.tsx
index 2d46ce4..114e360 100644
--- a/frontend/src/tabs/reports/components/ReportGenerator.tsx
+++ b/frontend/src/tabs/reports/components/ReportGenerator.tsx
@@ -211,7 +211,7 @@ function ReportGenerator({ onSave }: ReportGeneratorProps) {
           {/* Preview Content */}
           <div className="flex-1 overflow-y-auto px-6 py-5">
             {/* Report Header */}
-            <div className="rounded-lg border border-border p-8 mb-6" style={{ background: 'var(--bg2)' }}>
+            <div className="rounded-lg border border-border p-8 mb-6 bg-bg-2">
               <div className="text-center">
                 <p className="text-[10px] text-text-3 font-korean mb-2">해양환경 위기대응 통합지원시스템</p>
                 <h2 className="text-[20px] font-bold text-text-1 font-korean mb-2">{cat.reportName}</h2>
@@ -221,7 +221,7 @@ function ReportGenerator({ onSave }: ReportGeneratorProps) {
 
             {/* Dynamic Sections */}
             {activeSections.map(sec => (
-              <div key={sec.id} className="rounded-lg border border-border mb-4 overflow-hidden" style={{ background: 'var(--bg2)' }}>
+              <div key={sec.id} className="rounded-lg border border-border mb-4 overflow-hidden bg-bg-2">
                 <div className="px-5 py-3 border-b border-border">
                   <h4 className="text-[13px] font-bold text-text-1 font-korean flex items-center gap-2">
                     {sec.icon} {sec.title}
diff --git a/frontend/src/tabs/scat/components/ScatMap.tsx b/frontend/src/tabs/scat/components/ScatMap.tsx
index 2bbc86b..b988cd5 100644
--- a/frontend/src/tabs/scat/components/ScatMap.tsx
+++ b/frontend/src/tabs/scat/components/ScatMap.tsx
@@ -320,8 +320,8 @@ function ScatMap({ segments, selectedSeg, onSelectSeg, onOpenPopup }: ScatMapPro
             <div className="h-full transition-all duration-500" style={{ width: `${notPct}%`, background: 'var(--bd)' }} />
           </div>
           <div className="flex justify-between mt-1">
-            <span className="text-[9px] font-mono" style={{ color: 'var(--green)' }}>완료 {donePct}%</span>
-            <span className="text-[9px] font-mono" style={{ color: 'var(--orange)' }}>진행 {progPct}%</span>
+            <span className="text-[9px] font-mono text-status-green">완료 {donePct}%</span>
+            <span className="text-[9px] font-mono text-status-orange">진행 {progPct}%</span>
             <span className="text-[9px] font-mono text-text-3">미조사 {notPct}%</span>
           </div>
           <div className="mt-2.5">
diff --git a/frontend/src/tabs/scat/components/ScatTimeline.tsx b/frontend/src/tabs/scat/components/ScatTimeline.tsx
index 94efad3..192dd0c 100644
--- a/frontend/src/tabs/scat/components/ScatTimeline.tsx
+++ b/frontend/src/tabs/scat/components/ScatTimeline.tsx
@@ -125,11 +125,11 @@ function ScatTimeline({
         <div className="flex gap-3.5">
           <span className="flex items-center gap-1.5 text-[11px]">
             <span className="text-text-2 font-korean">완료</span>
-            <span className="text-text-1 font-semibold font-mono" style={{ color: 'var(--green)' }}>{doneCount}/{segments.length}</span>
+            <span className="text-text-1 font-semibold font-mono text-status-green">{doneCount}/{segments.length}</span>
           </span>
           <span className="flex items-center gap-1.5 text-[11px]">
             <span className="text-text-2 font-korean">진행중</span>
-            <span className="text-text-1 font-semibold font-mono" style={{ color: 'var(--orange)' }}>{progCount}/{segments.length}</span>
+            <span className="text-text-1 font-semibold font-mono text-status-orange">{progCount}/{segments.length}</span>
           </span>
           <span className="flex items-center gap-1.5 text-[11px]">
             <span className="text-text-2 font-korean">총 해안선</span>