Merge pull request #6 from FabAgentGroup/feat/streamlit-ui

app.py

@@ -34,6 +34,27 @@ def inject_css():
     )
 
 
+def handle_query_params():
+    # 사이드바 FabAgent 로고 클릭 -> ?reset=1로 진입 -> 세션 초기화
+    if "reset" in st.query_params:
+        for key in list(st.session_state.keys()):
+            del st.session_state[key]
+        del st.query_params["reset"]
+        return
+
+    # 알람 카드 클릭 -> ?alarm=X로 진입 -> 선택 알람 변경
+    if "alarm" in st.query_params:
+        alarm_id = st.query_params["alarm"]
+        ss = st.session_state
+        if alarm_id != ss.get("selected_alarm_id"):
+            ss.selected_alarm_id = alarm_id
+            ss.stage = 0
+            ss.completed_tiers = set()
+            ss.approved = False
+            ss.animation_pending = True
+        del st.query_params["alarm"]
+
+
 def init_state():
     ss = st.session_state
     ss.setdefault("selected_alarm_id", "A1")
@@ -45,13 +66,36 @@ def init_state():
     ss.setdefault("speed", "normal")  # "fast" | "normal" | "real"
 
 
+def _current_alarm():
+    ss = st.session_state
+    for a in ss.alarms:
+        if a["id"] == ss.selected_alarm_id:
+            return a
+    return None
+
+
 def render_main():
     render_header()
 
+    alarm = _current_alarm()
+    title_text = alarm["title"] if alarm else "알람을 선택하세요"
+    lot_id = alarm["lot_id"] if alarm else "-"
+
     col_title, col_progress = st.columns([5, 4])
     with col_title:
-        # TODO(M1) 메인 타이틀 + 4-Tier 워크플로우 서브텍스트
-        st.markdown("<!-- TODO(M1): 메인 타이틀 -->", unsafe_allow_html=True)
+        st.markdown(
+            f"""
+            <h1 class="fab-main-title">
+              {title_text} — <span style="font-family:var(--mono); font-weight:700;">{lot_id}</span>
+            </h1>
+            <div class="fab-main-sub">
+              <span>4-Tier 분석 워크플로우</span>
+              <span class="sep">·</span>
+              <span>이상 탐지 → 원인 분석 → 영향 평가 → 대응 권고</span>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
     with col_progress:
         render_progress_strip()
 
@@ -63,6 +107,7 @@ def render_main():
 
 
 inject_css()
+handle_query_params()
 init_state()
 render_alarm_inbox()
 render_main()

components/alarm_inbox.py

@@ -1,13 +1,97 @@
 """사이드바 알람 인박스 (개발 가이드 6장)
 
-TODO(M1): 가이드 6장 '권장 대안', HTML 카드 + 바로 아래 st.button 분리 방식
-on_alarm_click()에서 stage / completed_tiers / approved 리셋 후
-animation_pending=True 로 두고 st.rerun()
+HTML 카드 + 바로 아래 작은 선택 버튼 분리 방식 (가이드 권장안)
+on_alarm_click()에서 stage/completed_tiers/approved 리셋 후
+animation_pending=True로 두고 st.rerun()
 """
 import streamlit as st
 
+from data.demo import STATUS_LABELS
+
 
 def render_alarm_inbox():
+    ss = st.session_state
     with st.sidebar:
-        # TODO(M1) st.session_state.alarms 순회하며 알람 카드 + 선택 버튼 렌더
-        st.markdown("<!-- TODO(M1): 알람 인박스 -->", unsafe_allow_html=True)
+        _render_logo()
+
+        critical_count = sum(1 for a in ss.alarms if a["status"] == "critical")
+        total = len(ss.alarms)
+        badge = f'<span class="badge">긴급 {critical_count}</span>' if critical_count else ""
+        st.markdown(
+            f"""
+            <div class="fab-sidebar-head">
+              <div class="fab-sidebar-title">알람 인박스</div>
+              <div class="fab-sidebar-count">
+                {badge}
+                <span>전체 {total}건</span>
+              </div>
+            </div>
+            """,
+            unsafe_allow_html=True,
+        )
+
+        for alarm in ss.alarms:
+            _render_alarm_card(alarm)
+
+
+def _render_logo():
+    # 클릭 시 ?reset=1 쿼리로 진입 -> app.maybe_handle_home이 세션 초기화
+    st.markdown(
+        """
+        <a href="?reset=1" class="fab-sidebar-logo-link" target="_self">
+          <div class="fab-sidebar-logo">
+            <div class="fab-logo-mark">
+              <svg width="16" height="16" viewBox="0 0 160 160" fill="none">
+                <circle cx="80" cy="80" r="60" stroke="#fff" stroke-width="10"/>
+                <path d="M70 22 L90 22 L86 32 L74 32 Z" fill="#fff"/>
+                <rect x="46" y="58" width="68" height="8" rx="4" fill="#fff"/>
+                <rect x="46" y="76" width="52" height="8" rx="4" fill="#fff" opacity="0.7"/>
+                <rect x="46" y="94" width="36" height="8" rx="4" fill="#fff" opacity="0.4"/>
+              </svg>
+            </div>
+            <span>FabAgent</span>
+          </div>
+        </a>
+        """,
+        unsafe_allow_html=True,
+    )
+
+
+def _render_alarm_card(alarm):
+    ss = st.session_state
+    is_selected = alarm["id"] == ss.selected_alarm_id
+    is_done = alarm["status"] == "done"
+
+    classes = f'alarm-card {alarm["status"]}'
+    if is_selected:
+        classes += " selected"
+    if is_done:
+        classes += " completed"
+
+    selected_tag = '<span class="alarm-selected-tag">★ 선택됨</span>' if is_selected else ""
+    feat_html = ""
+    if alarm.get("feature"):
+        arrow = alarm.get("feature_arrow") or ""
+        feat_html = (
+            f'<span class="feat">{alarm["feature"]} '
+            f'<span class="alarm-feat-arrow">{arrow}</span></span>'
+        )
+
+    # 카드 전체를 클릭 영역으로, ?alarm=X 쿼리로 진입하면 app.handle_query_params가 처리
+    # markdown 파서가 <a> 안의 <div>를 reparse하는 문제를 피하려고 st.html 사용
+    st.html(
+        f'<a href="?alarm={alarm["id"]}" class="alarm-card-link" target="_self">'
+        f'<div class="{classes}">'
+        f'<div class="alarm-head">'
+        f'<span class="chip chip-{alarm["status"]}"><span class="dot"></span>{STATUS_LABELS[alarm["status"]]}</span>'
+        f'{selected_tag}'
+        f'</div>'
+        f'<div class="alarm-title">{alarm["title"]}</div>'
+        f'<div class="alarm-meta">'
+        f'<span style="font-family: var(--mono); font-size: 11px;">{alarm["lot_id"]}</span>'
+        f'{feat_html}'
+        f'</div>'
+        f'<div class="alarm-time">{alarm["time"]}</div>'
+        f'</div>'
+        f'</a>'
+    )

components/header.py

@@ -1,11 +1,36 @@
 """상단 헤더 (개발 가이드 부록 A)
 
-TODO(M1): 가이드 부록 A의 render_header() 구현, 디자인 시안 헤더와 1:1
-헤더는 st.columns 밖, .block-container 최상단에 둠
+로고 + 공정/라인 컨텍스트 + LIVE 시계 + 시스템 상태 + 사용자 영역
 """
+from datetime import datetime
+
 import streamlit as st
 
 
 def render_header():
-    # TODO(M1) 로고 + 공정/라인 컨텍스트 + LIVE 시계 + 사용자 영역
-    st.markdown("<!-- TODO(M1): FabAgent 헤더 -->", unsafe_allow_html=True)
+    now = datetime.now().strftime("%H:%M:%S")
+    # 로고는 사이드바 최상단으로 옮김 (components/alarm_inbox.py)
+    st.markdown(
+        f"""
+        <header class="fab-header">
+          <div class="fab-context">
+            <span class="ctx-label">공정</span><span>Photo · Lithography</span>
+            <span class="ctx-sep"></span>
+            <span class="ctx-label">라인</span>
+            <span style="font-family: var(--mono); font-weight: 600;">L20240511-N-03</span>
+          </div>
+          <span class="live-tick">
+            <span class="dot"></span> LIVE · {now}
+          </span>
+          <div class="fab-header-spacer"></div>
+          <div class="fab-status">
+            <span class="fab-status-dot"></span> 시스템 정상
+          </div>
+          <div class="fab-user">
+            <span>박○○ 운영자 · 야간 교대</span>
+            <span class="avatar">박</span>
+          </div>
+        </header>
+        """,
+        unsafe_allow_html=True,
+    )

components/progress.py

@@ -1,11 +1,34 @@
 """4단계 진행 스트립 (개발 가이드 부록 C)
 
-TODO(M1): 가이드 부록 C의 render_progress_strip() 구현
-st.session_state.stage 기준으로 각 단계를 idle / active / done 으로 렌더
+st.session_state.stage 기준으로 각 단계를 idle / active / done으로 렌더
+- stage > num: done (✓)
+- stage == num: active (현재 분석 중)
+- stage < num: idle
 """
 import streamlit as st
 
 
+STEPS = [(1, "이상 탐지"), (2, "원인 분석"), (3, "영향 평가"), (4, "권고서")]
+
+
 def render_progress_strip():
-    # TODO(M1) 이상 탐지 -> 원인 분석 -> 영향 평가 -> 권고서 진행 표시
-    st.markdown("<!-- TODO(M1): 진행 스트립 -->", unsafe_allow_html=True)
+    stage = st.session_state.stage
+
+    pieces = []
+    for i, (num, label) in enumerate(STEPS):
+        if stage > num:
+            state, mark = "done", "✓"
+        elif stage == num:
+            state, mark = "active", str(num)
+        else:
+            state, mark = "idle", str(num)
+        pieces.append(
+            f'<div class="fab-progress-step {state}"><span class="num">{mark}</span>{label}</div>'
+        )
+        if i < len(STEPS) - 1:
+            pieces.append('<span class="conn"></span>')
+
+    st.markdown(
+        f'<div class="fab-progress">{"".join(pieces)}</div>',
+        unsafe_allow_html=True,
+    )

components/skeleton.py

@@ -1,12 +1,27 @@
 """로딩 스켈레톤 (개발 가이드 12장)
 
-TODO(M1): 가이드 12장 render_skeleton() 구현
-스켈레톤 CSS(.skel, .skel-row, .skel-block, @keyframes shimmer)는
-디자인 프로토타입에서 styles/main.css로 복사
+tier_num별 스켈레톤 레이아웃을 HTML 문자열로 반환
+tiers.py가 tier-body 안에 그대로 삽입
 """
-import streamlit as st
 
 
-def render_skeleton(tier_num: int):
-    # TODO(M1) tier_num별 스켈레톤 레이아웃
-    st.markdown("<!-- TODO(M1): 스켈레톤 -->", unsafe_allow_html=True)
+def skeleton_html(tier_num: int) -> str:
+    if tier_num in (1, 3):
+        return """
+            <div class="t1-grid">
+              <div class="skel skel-block" style="height: 148px;"></div>
+              <div class="skel-row">
+                <div class="skel" style="height: 18px; width: 40%;"></div>
+                <div class="skel" style="height: 24px;"></div>
+                <div class="skel" style="height: 24px; width: 85%;"></div>
+                <div class="skel" style="height: 24px; width: 60%;"></div>
+              </div>
+            </div>
+        """
+    rows = 3 if tier_num == 2 else 4
+    h = 88 if tier_num == 2 else 48
+    blocks = "".join(
+        f'<div class="skel" style="height: {h}px; border-radius: 8px; opacity: {1 - i*0.18:.2f};"></div>'
+        for i in range(rows)
+    )
+    return f'<div class="skel-row">{blocks}</div>'

components/tiers.py

@@ -1,28 +1,147 @@
-"""Tier 1~4 순차 등장 렌더러 (개발 가이드 8·9장)
+"""Tier 1~4 순차 등장 렌더러 (개발 가이드 8·9·10장)
 
-TODO(M1): 가이드 8장 '접근법 A', st.empty() placeholder 4개 + time.sleep으로
-스켈레톤 -> 콘텐츠 순차 교체, stage>=5면 즉시 정적 렌더(새로고침 대응)
+st.empty() placeholder 4개 + time.sleep으로 스켈레톤 → 콘텐츠 순차 교체
+이미 완료된 상태(stage>=5)거나 animation_pending이 아닐 때는 즉시 정적 렌더
 
-중요: Tier 데이터는 반드시 core.pipeline.get_tier_data() 한 함수로만 받음
-data.demo.TIER_DATA 를 직접 import 하지 말 것, 실제 에이전트 교체가 막힘
+★ Tier 데이터는 반드시 core.pipeline.get_tier_data() 한 함수로만 받음
+data.demo.TIER_DATA를 직접 import 하지 말 것 (실제 에이전트 교체가 막힘)
 """
+import time
+from datetime import datetime
+
 import streamlit as st
 
+from components.skeleton import skeleton_html
+from components.tiers_body import (
+    tier_1_body_html,
+    tier_2_body_html,
+    tier_3_body_html,
+    tier_4_body_html,
+)
 from core.pipeline import get_tier_data
 
+SPEED_PRESETS = {
+    "fast":   {"skel": 0.6, "hold": 0.4},
+    "normal": {"skel": 1.4, "hold": 0.7},
+    "real":   {"skel": 3.0, "hold": 1.5},
+}
+
+TIER_NAMES = {1: "이상 탐지", 2: "원인 분석", 3: "공정 간 영향 평가", 4: "대응 권고"}
+
+BODY_BUILDERS = {
+    1: tier_1_body_html,
+    2: tier_2_body_html,
+    3: tier_3_body_html,
+    4: tier_4_body_html,
+}
+
 
 def render_tier_cascade():
-    data = get_tier_data(st.session_state.selected_alarm_id)
+    ss = st.session_state
+    data = get_tier_data(ss.selected_alarm_id)
+
     if data is None:
         st.markdown(
-            '<div class="fab-empty">선택한 알람의 분석 데이터가 없습니다.</div>',
+            """
+            <div class="fab-empty">
+              <div class="fab-empty-inner">
+                <div class="fab-empty-icon" style="font-size: 24px;">∅</div>
+                <h3>분석 데이터가 없습니다</h3>
+                <p>선택한 알람에 매핑된 분석 결과가 없습니다</p>
+              </div>
+            </div>
+            """,
             unsafe_allow_html=True,
         )
         return
-    # TODO(M1) 가이드 8장 run_sequence(), 스켈레톤 -> 콘텐츠 순차 등장
-    st.markdown("<!-- TODO(M1): Tier 1~4 cascade -->", unsafe_allow_html=True)
+
+    if ss.animation_pending:
+        ss.animation_pending = False
+        _run_sequence(data)
+        return
+
+    # 정적 렌더 (재실행/새로고침 대응)
+    for t in range(1, 5):
+        render_tier(t, data[f"tier{t}"], loading=False, with_actions=(t == 4))
+
+
+def _run_sequence(data):
+    ss = st.session_state
+    timing = SPEED_PRESETS[ss.speed]
+    slots = [st.empty() for _ in range(4)]
+
+    for tier_idx in range(1, 5):
+        ss.stage = tier_idx
+        with slots[tier_idx - 1].container():
+            render_tier(tier_idx, None, loading=True)
+        time.sleep(timing["skel"])
+        with slots[tier_idx - 1].container():
+            render_tier(
+                tier_idx,
+                data[f"tier{tier_idx}"],
+                loading=False,
+                with_actions=(tier_idx == 4),
+            )
+        ss.completed_tiers.add(tier_idx)
+        if tier_idx < 4:
+            time.sleep(timing["hold"])
+
+    ss.stage = 5
 
 
 def render_tier(tier_num: int, data, loading: bool, with_actions: bool = False):
-    # TODO(M1) 가이드 9장 render_tier(), Tier 프레임 + 본문/스켈레톤 분기
-    raise NotImplementedError("M1: Tier 프레임 렌더러 구현 예정")
+    """Tier 카드 한 덩어리를 단일 markdown으로 렌더, Tier 4 액션 바만 별도 위젯"""
+    status_html = (
+        '<div class="tier-status"><span class="spinner"></span>분석 중…</div>'
+        if loading
+        else '<div class="tier-status"><span class="check">✓</span>방금</div>'
+    )
+    body_html = skeleton_html(tier_num) if loading else BODY_BUILDERS[tier_num](data)
+
+    # st.html을 쓰면 markdown 파서를 거치지 않아 들여쓰기 4칸 짜리 라인이 코드블록으로 변하지 않음
+    st.html(
+        f'<section class="tier-card tier-{tier_num}">'
+        f'<div class="tier-head">'
+        f'<div class="tier-head-left">'
+        f'<span class="chip chip-t{tier_num}">Tier {tier_num}</span>'
+        f'<span class="tier-name">{TIER_NAMES[tier_num]}</span>'
+        f'</div>'
+        f'{status_html}'
+        f'</div>'
+        f'<div class="tier-body">{body_html}</div>'
+        f'</section>'
+    )
+
+    if tier_num == 4 and with_actions and not loading:
+        _render_action_bar()
+
+
+def _render_action_bar():
+    ss = st.session_state
+    c1, c2, c3, _ = st.columns([1, 1, 2.2, 4])
+    with c1:
+        if st.button("✗ 거절", key="btn-reject", disabled=ss.approved):
+            st.toast("권고 거절됨, 사유 수집 모달(MVP 범위 외)", icon="✗")
+    with c2:
+        if st.button("⏸ 보류", key="btn-hold", disabled=ss.approved):
+            st.toast("권고 보류됨, 5분 후 재발생 예정", icon="⏸")
+    with c3:
+        label = "✓ 작업지시서 생성됨" if ss.approved else "✓ 승인 및 작업지시서 생성"
+        if st.button(label, key="btn-approve", disabled=ss.approved, type="primary"):
+            _on_approve()
+
+
+def _on_approve():
+    ss = st.session_state
+    ss.approved = True
+    for a in ss.alarms:
+        if a["id"] == ss.selected_alarm_id:
+            a["status"] = "done"
+            a["time"] = "방금 전"
+            break
+    work_order = f"W-{datetime.now():%Y%m%d}-001"
+    st.toast(
+        f"✓ 작업 지시서 {work_order} 생성 완료 · 인시던트 DB 자동 기록",
+        icon="✅",
+    )
+    st.rerun()

components/tiers_body.py

@@ -1,25 +1,166 @@
-"""Tier 1~4 본문 렌더러 (개발 가이드 9·10장)
+"""Tier 1~4 본문 HTML 빌더 (개발 가이드 9·10장)
 
-TODO(M1): 상호작용 없는 본문은 f-string HTML + st.markdown 한 번에 렌더
-Streamlit 위젯을 본문에 쓰지 말 것(레이아웃 깨짐), Tier 4 액션 바만 st.button
-디자인 프로토타입의 tiers.jsx 구조를 1:1로 옮길 것
+각 함수는 본문 HTML 문자열을 반환, tiers.py가 tier-card 안에 합성
+Tier 4 액션 바(거절/보류/승인 버튼)는 Streamlit 위젯이라 tiers.py에서 별도 렌더
 """
 from core.schema import Tier1, Tier2, Tier3, Tier4
 
 
-def render_tier_1_body(data: Tier1):
-    raise NotImplementedError("M1: Tier 1 본문 구현 예정 (가이드 9장 참고)")
+def tier_1_body_html(data: Tier1) -> str:
+    features = data["features"]
+    max_val = features[0]["value"] if features else 1.0
+    score = data["score"]
 
+    feature_rows = "".join(
+        f"""
+        <div class="feat-row">
+          <span class="name">{f['name']}</span>
+          <div class="bar-track">
+            <div class="bar-fill" style="width: {(f['value']/max_val)*100:.0f}%; opacity: {1 - i*0.15:.2f};"></div>
+          </div>
+          <span class="val">{f['value']:.2f}</span>
+        </div>
+        """
+        for i, f in enumerate(features)
+    )
 
-def render_tier_2_body(data: Tier2):
-    raise NotImplementedError("M1: Tier 2 본문 구현 예정")
+    return f"""
+        <div class="t1-grid">
+          <div class="score-tile">
+            <div class="score-tile-label">이상 점수</div>
+            <div class="score-tile-value">{score:.2f}</div>
+            <div class="score-tile-meta">임계 0.50 · 모델 IsolationForest</div>
+            <div class="score-tile-bar"><span style="width: {score*100:.0f}%;"></span></div>
+          </div>
+          <div class="feat-block">
+            <div class="feat-block-title">기여 피처 (Top {len(features)}) <span class="hint">|z-score| 기준</span></div>
+            {feature_rows}
+          </div>
+        </div>
+        <div class="lot-strip">
+          <div>
+            <span class="lab">영향 lot · </span>
+            <span class="lot">{data['lot']['id']}</span>
+          </div>
+          <span class="count">{data['lot']['wafers']}장</span>
+        </div>
+    """
 
 
-def render_tier_3_body(data: Tier3):
-    raise NotImplementedError("M1: Tier 3 본문 구현 예정")
+def tier_2_body_html(data: Tier2) -> str:
+    causes = data["causes"]
 
+    def row(i, c):
+        primary = " primary" if i == 0 else ""
+        citations_html = "".join(
+            f'<span class="cite-tag">📄 {cid}</span>' for cid in c["citations"]
+        )
+        return f"""
+        <div class="cause-row{primary}">
+          <div class="cause-rank">{i+1}</div>
+          <div class="cause-body">
+            <div class="cause-top">
+              <span class="cause-name">{c['name']}</span>
+              <span class="cause-pct">{c['pct']}%</span>
+            </div>
+            <div class="cause-bar"><span style="width: {c['pct']}%;"></span></div>
+            <div class="cause-evidence">{c['evidence']}</div>
+            <div class="cause-cite">{citations_html}</div>
+          </div>
+          <div></div>
+        </div>
+        """
 
-def render_tier_4_body(data: Tier4, with_actions: bool):
-    # TODO(M1) 본문 HTML + with_actions면 거절/보류/승인 액션 바
-    # 승인 시 on_approve, approved=True, 알람 status="done", st.toast, st.rerun
-    raise NotImplementedError("M1: Tier 4 본문 + 액션 바 구현 예정 (가이드 10장)")
+    rows = "".join(row(i, c) for i, c in enumerate(causes))
+    return f'<div class="cause-list">{rows}</div>'
+
+
+def tier_3_body_html(data: Tier3) -> str:
+    yield_loss = data["yield_loss"]
+    # dep-graph CSS는 3노드(1fr 24px 1fr 24px 1fr) 기준이라 처음 3개만 렌더
+    deps = data["dependencies"][:3]
+    impact_lots = data["impact_lots"]
+
+    dep_nodes = []
+    for i, d in enumerate(deps):
+        dep_nodes.append(
+            f"""
+            <div class="dep-node {d['kind']}">
+              <div class="dep-stage-name">{d['stage']}</div>
+              <div class="dep-delta">{d['delta']}</div>
+              <div class="dep-tag">{d['tag']}</div>
+            </div>
+            """
+        )
+        if i < len(deps) - 1:
+            dep_nodes.append('<div class="dep-arrow">→</div>')
+
+    impact_lots_html = "".join(
+        f"""
+        <div class="impact-lot">
+          <span class="impact-lot-label">{l['label']}</span>
+          <span class="impact-lot-value">
+            <span class="lots-num">{l['lots']} lot</span>
+            <span class="wafer">/ {l['wafers']}장</span>
+          </span>
+        </div>
+        """
+        for l in impact_lots
+    )
+
+    return f"""
+        <div class="t3-grid">
+          <div class="loss-tile">
+            <div class="loss-tile-label">예상 수율 손실</div>
+            <div class="loss-tile-value">{yield_loss}<span class="unit">%p</span></div>
+            <div class="loss-tile-meta">동일 스캐너 처리 lot 전체 기준</div>
+          </div>
+          <div class="dep-block">
+            <div class="feat-block-title">공정 의존성 그래프</div>
+            <div class="dep-graph">{"".join(dep_nodes)}</div>
+          </div>
+        </div>
+        <div class="impact-lots">{impact_lots_html}</div>
+    """
+
+
+def tier_4_body_html(data: Tier4) -> str:
+    def item(i, a):
+        meta_html = (
+            f'<span class="action-meta">{a["meta"]}</span>'
+            if a.get("meta") else "<span></span>"
+        )
+        return f"""
+        <div class="action-item">
+          <span class="action-num">{i+1}</span>
+          <span class="action-text">{a['text']}</span>
+          {meta_html}
+        </div>
+        """
+
+    imm_items = "".join(item(i, a) for i, a in enumerate(data["immediate"]))
+    lng_items = "".join(item(i, a) for i, a in enumerate(data["longterm"]))
+    refs_html = "".join(
+        f'<li><code>{r["id"]}</code> — {r["desc"]}</li>' for r in data["refs"]
+    )
+
+    return f"""
+        <div class="action-section">
+          <div class="action-section-head">
+            <span class="badge imm">즉시 조치</span>
+            <span>응급 대응</span>
+          </div>
+          <div class="action-box urgent">{imm_items}</div>
+        </div>
+        <div class="action-section">
+          <div class="action-section-head">
+            <span class="badge lng">중장기</span>
+            <span>재발 방지</span>
+          </div>
+          <div class="action-box">{lng_items}</div>
+        </div>
+        <div class="refs">
+          <div class="refs-title">📚 근거 자료</div>
+          <ul>{refs_html}</ul>
+        </div>
+    """

styles/main.css

@@ -1,42 +1,1184 @@
-/* FabAgent 전체 스타일
-   TODO(M1 / feat/css-port): 디자인 프로토타입의 styles.css 전체를 여기에 그대로 복사
-   토큰/간격/애니메이션이 모두 그 안에 검증돼 있으므로 다시 작성하지 말 것
-   아래는 디자인 토큰 :root + Streamlit 기본 요소 숨김만 미리 둔 시작점 */
+/* ============================================================
+   FabAgent — Operator Dashboard
+   Light, low-saturation, info-dense operations tool aesthetic
+   ============================================================ */
 
-:root {
-  --text-primary: #1F2A3A;
-  --text-secondary: #6B7788;
-  --text-tertiary: #9AA3B2;
-  --bg-page: #FAFBFC;
-  --bg-card: #FFFFFF;
-  --bg-subtle: #F4F6F9;
-  --border: #E3E6EC;
-  --brand: #2C5AB8;     /* Tier 1 파랑 */
-  --t2-text: #6E46A8;   /* Tier 2 보라 */
-  --t3-text: #2A8A55;   /* Tier 3 초록 */
-  --t4-text: #B07718;   /* Tier 4 앰버 */
-  --crit-text: #C04A6E; /* 긴급 핑크 */
-}
+/* ============== Streamlit chrome 숨김 + 레이아웃 보정 ============== */
 
-/* Streamlit 기본 요소 숨기기 */
 #MainMenu { visibility: hidden; }
 footer { visibility: hidden; }
 header[data-testid="stHeader"] { display: none; }
 
-/* 상단 여백 제거 + 폭 제한 해제 */
 .block-container {
-  padding-top: 1rem;
+  padding-top: 0 !important;
   padding-bottom: 4rem;
-  max-width: none;
+  max-width: none !important;
 }
 
-/* 사이드바 너비 320px 고정 */
 section[data-testid="stSidebar"] {
   width: 320px !important;
   min-width: 320px !important;
+  max-width: 320px !important;
   background: var(--bg-card);
   border-right: 1px solid var(--border);
+  transform: translateX(0) !important;
+  visibility: visible !important;
+  display: block !important;
 }
 section[data-testid="stSidebar"] > div {
   padding-top: 0;
 }
+section[data-testid="stSidebar"] [data-testid="stSidebarContent"] {
+  padding: 0;
+}
+/* 사이드바 상단 빈 헤더(collapse 버튼 자리) 자체를 제거해 로고가 최상단에 붙도록 */
+section[data-testid="stSidebar"] [data-testid="stSidebarHeader"],
+[data-testid="stSidebarCollapseButton"],
+[data-testid="stSidebarCollapsedControl"],
+[data-testid="collapsedControl"] {
+  display: none !important;
+}
+
+/* Streamlit이 위젯 사이에 자동으로 끼우는 간격 축소 */
+[data-testid="stVerticalBlock"] { gap: 0.4rem; }
+
+/* 알람 카드 전체를 클릭 영역으로, <a> 래퍼는 시각적으로 투명 */
+section[data-testid="stSidebar"] [data-testid="stVerticalBlock"] {
+  gap: 0 !important;
+}
+a.alarm-card-link {
+  display: block;
+  text-decoration: none;
+  color: inherit;
+  margin-top: 12px;
+}
+a.alarm-card-link:last-of-type {
+  margin-bottom: 16px;
+}
+a.alarm-card-link:focus,
+a.alarm-card-link:focus-visible {
+  outline: none;
+}
+
+:root {
+  /* Neutrals */
+  --text-primary: #1F2A3A;
+  --text-secondary: #6B7788;
+  --text-tertiary: #9AA3B2;
+  --bg-page: #FAFBFC;
+  --bg-card: #FFFFFF;
+  --bg-subtle: #F4F6F9;
+  --border: #E3E6EC;
+  --border-strong: #CFD4DC;
+
+  /* Tier 1 - 파랑 (이상 탐지) */
+  --t1-bg: #E8F1FD;
+  --t1-border: #A4C2F1;
+  --t1-text: #2C5AB8;
+  --t1-bg-soft: #F4F8FE;
+
+  /* Tier 2 - 보라 (원인 분석) */
+  --t2-bg: #F1ECF8;
+  --t2-border: #C3AEDF;
+  --t2-text: #6E46A8;
+  --t2-bg-soft: #F8F5FC;
+
+  /* Tier 3 - 초록 (공정 간 영향) */
+  --t3-bg: #E8F5EE;
+  --t3-border: #9DCFB3;
+  --t3-text: #2A8A55;
+  --t3-bg-soft: #F4FAF6;
+
+  /* Tier 4 - 앰버 (대응 권고) */
+  --t4-bg: #FDF2DE;
+  --t4-border: #E5C280;
+  --t4-text: #B07718;
+  --t4-bg-soft: #FEF9EE;
+
+  /* Critical / 긴급 - 핑크 */
+  --crit-bg: #FDECF1;
+  --crit-border: #F0A8BC;
+  --crit-text: #C04A6E;
+
+  /* Brand */
+  --brand: #2C5AB8;
+  --brand-deep: #1F4290;
+
+  /* Status */
+  --ok: #2A8A55;
+  --ok-bg: #E8F5EE;
+  --warn: #B07718;
+  --danger: #C04A6E;
+
+  /* Layout */
+  --header-h: 64px;
+  --sidebar-w: 320px;
+  --radius: 8px;
+  --radius-sm: 6px;
+  --shadow-card: 0 1px 2px rgba(31,42,58,0.04), 0 1px 0 rgba(31,42,58,0.02);
+  --shadow-pop: 0 8px 24px rgba(31,42,58,0.12), 0 2px 6px rgba(31,42,58,0.06);
+
+  /* Type */
+  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+  --mono: "JetBrains Mono", "SF Mono", ui-monospace, Menlo, monospace;
+}
+
+html, body {
+  font-family: var(--font);
+  color: var(--text-primary);
+  background: var(--bg-page);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-feature-settings: "ss01", "ss02", "tnum";
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+/* ============== Header ============== */
+
+.fab-header {
+  display: flex;
+  align-items: center;
+  padding: 12px 8px 16px;
+  background: var(--bg-card);
+  gap: 24px;
+  border-bottom: 1px solid var(--border);
+  margin-bottom: 18px;
+}
+
+.fab-logo {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-weight: 800;
+  font-size: 17px;
+  letter-spacing: -0.02em;
+  color: var(--brand);
+}
+
+.fab-logo-mark {
+  width: 28px;
+  height: 28px;
+  border-radius: 7px;
+  background: linear-gradient(135deg, var(--brand) 0%, #4A7FD9 100%);
+  display: grid;
+  place-items: center;
+  color: white;
+  font-size: 14px;
+  font-weight: 800;
+  box-shadow: 0 1px 2px rgba(44,90,184,0.3);
+}
+
+.fab-context {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 12px;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  font-size: 12px;
+  color: var(--text-primary);
+}
+
+.fab-context .ctx-label {
+  color: var(--text-tertiary);
+  font-size: 11px;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+
+.fab-context .ctx-sep {
+  width: 1px;
+  height: 12px;
+  background: var(--border-strong);
+}
+
+.fab-header-spacer { flex: 1; }
+
+.fab-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  color: var(--text-secondary);
+}
+
+.fab-status-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background: var(--ok);
+  box-shadow: 0 0 0 3px rgba(42,138,85,0.15);
+  animation: pulse-ok 2.4s ease-in-out infinite;
+}
+
+@keyframes pulse-ok {
+  0%, 100% { box-shadow: 0 0 0 3px rgba(42,138,85,0.15); }
+  50%      { box-shadow: 0 0 0 5px rgba(42,138,85,0.05); }
+}
+
+.fab-user {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 4px 4px 4px 12px;
+  background: var(--bg-subtle);
+  border-radius: 999px;
+  font-size: 12px;
+}
+
+.fab-user .avatar {
+  width: 26px;
+  height: 26px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #6E46A8, #C04A6E);
+  color: white;
+  font-weight: 700;
+  font-size: 11px;
+  display: grid;
+  place-items: center;
+}
+
+/* ============== Sidebar — Logo (home) ============== */
+
+a.fab-sidebar-logo-link {
+  text-decoration: none;
+  color: inherit;
+  display: block;
+}
+.fab-sidebar-logo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 22px 20px;
+  font-weight: 800;
+  font-size: 22px;
+  letter-spacing: -0.02em;
+  color: var(--brand);
+  cursor: pointer;
+  transition: background 0.15s;
+  border-bottom: 1px solid var(--border);
+}
+.fab-sidebar-logo .fab-logo-mark {
+  width: 38px;
+  height: 38px;
+  border-radius: 9px;
+}
+.fab-sidebar-logo .fab-logo-mark svg {
+  width: 22px;
+  height: 22px;
+}
+.fab-sidebar-logo:hover {
+  background: var(--bg-subtle);
+}
+
+/* ============== Sidebar — Alarm Inbox ============== */
+
+.fab-sidebar-head {
+  padding: 18px 20px 12px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.fab-sidebar-title {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.fab-sidebar-count {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.fab-sidebar-count .badge {
+  background: var(--crit-bg);
+  color: var(--crit-text);
+  padding: 2px 7px;
+  border-radius: 999px;
+  font-weight: 700;
+  font-size: 10px;
+}
+
+.alarm-card {
+  position: relative;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 8px;
+  padding: 14px 14px 14px 16px;
+  cursor: pointer;
+  transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
+  overflow: hidden;
+  margin: 0 12px;
+}
+a.alarm-card-link:hover .alarm-card {
+  border-color: var(--border-strong);
+  box-shadow: var(--shadow-card);
+}
+
+.alarm-card:hover {
+  background: var(--bg-subtle);
+  border-color: var(--border-strong);
+}
+
+.alarm-card.selected {
+  background: var(--t1-bg-soft);
+  border-color: var(--t1-border);
+}
+
+.alarm-card.selected::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 4px;
+  background: var(--brand);
+}
+
+.alarm-card.completed {
+  opacity: 0.62;
+}
+
+.alarm-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 8px;
+}
+
+.alarm-title {
+  font-size: 13px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  margin: 2px 0 4px;
+}
+
+.alarm-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 3px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.alarm-meta .feat {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  color: var(--text-primary);
+  font-weight: 500;
+}
+
+.alarm-feat-arrow {
+  display: inline-block;
+  color: var(--danger);
+  font-weight: 800;
+}
+
+.alarm-time {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  margin-top: 8px;
+  padding-top: 8px;
+  border-top: 1px dashed var(--border);
+}
+
+.alarm-selected-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 3px;
+  font-size: 10px;
+  color: var(--brand);
+  font-weight: 700;
+}
+
+.alarm-card.critical:not(.completed):not(.selected) {
+  border-color: var(--crit-border);
+  background: linear-gradient(180deg, #FFF8FA 0%, #FFFFFF 100%);
+}
+
+/* ============== Chip ============== */
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 10px;
+  font-weight: 700;
+  padding: 3px 8px;
+  border-radius: 999px;
+  border: 1px solid transparent;
+  letter-spacing: 0.02em;
+  white-space: nowrap;
+}
+.chip-critical { background: var(--crit-bg); color: var(--crit-text); border-color: var(--crit-border); }
+.chip-warn     { background: var(--t4-bg); color: var(--t4-text); border-color: var(--t4-border); }
+.chip-done     { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
+.chip-t1       { background: var(--t1-bg); color: var(--t1-text); border-color: var(--t1-border); }
+.chip-t2       { background: var(--t2-bg); color: var(--t2-text); border-color: var(--t2-border); }
+.chip-t3       { background: var(--t3-bg); color: var(--t3-text); border-color: var(--t3-border); }
+.chip-t4       { background: var(--t4-bg); color: var(--t4-text); border-color: var(--t4-border); }
+.chip-neutral  { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border); }
+.chip-ok       { background: var(--ok-bg); color: var(--ok); border-color: #9DCFB3; }
+
+.chip .dot {
+  width: 6px; height: 6px; border-radius: 50%; background: currentColor;
+}
+
+.chip-critical .dot { animation: pulse-crit 1.2s ease-in-out infinite; }
+@keyframes pulse-crit {
+  0%, 100% { transform: scale(1); opacity: 1; }
+  50%      { transform: scale(1.4); opacity: 0.6; }
+}
+
+/* ============== Main title + progress ============== */
+
+.fab-main-title {
+  font-size: 19px;
+  font-weight: 800;
+  letter-spacing: -0.025em;
+  margin: 0 0 4px;
+}
+
+.fab-main-sub {
+  font-size: 12px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+}
+
+.fab-main-sub .sep {
+  color: var(--text-tertiary);
+}
+
+.fab-progress {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  justify-content: flex-end;
+}
+
+.fab-progress-step {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 10px;
+  border-radius: 6px;
+  font-size: 11px;
+  font-weight: 600;
+  background: var(--bg-subtle);
+  color: var(--text-tertiary);
+  border: 1px solid transparent;
+  transition: all 0.3s;
+}
+
+.fab-progress-step.active {
+  background: var(--bg-card);
+  color: var(--text-primary);
+  border-color: var(--border);
+}
+
+.fab-progress-step.done {
+  color: var(--ok);
+  background: var(--ok-bg);
+}
+
+.fab-progress-step .num {
+  width: 16px; height: 16px;
+  border-radius: 50%;
+  background: var(--border);
+  color: var(--bg-card);
+  display: inline-grid;
+  place-items: center;
+  font-size: 9px;
+  font-weight: 800;
+}
+
+.fab-progress-step.active .num { background: var(--brand); color: white; }
+.fab-progress-step.done .num   { background: var(--ok); color: white; }
+
+.fab-progress .conn {
+  width: 12px; height: 1px; background: var(--border);
+}
+
+/* ============== Empty state ============== */
+
+.fab-empty {
+  height: 60vh;
+  display: grid;
+  place-items: center;
+  text-align: center;
+}
+.fab-empty-inner {
+  max-width: 360px;
+  color: var(--text-secondary);
+}
+.fab-empty-icon {
+  width: 64px; height: 64px;
+  margin: 0 auto 16px;
+  border-radius: 16px;
+  background: var(--bg-card);
+  border: 1px dashed var(--border-strong);
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+}
+.fab-empty h3 {
+  font-size: 15px;
+  color: var(--text-primary);
+  margin: 0 0 6px;
+  font-weight: 700;
+}
+.fab-empty p { font-size: 12px; margin: 0; }
+
+/* ============== Tier card frame ============== */
+
+.tier-card {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  margin-bottom: 16px;
+  box-shadow: var(--shadow-card);
+  overflow: hidden;
+  animation: card-fade-in 0.45s cubic-bezier(0.22, 0.61, 0.36, 1);
+}
+
+@keyframes card-fade-in {
+  from { opacity: 0; transform: translateY(8px); }
+  to   { opacity: 1; transform: translateY(0); }
+}
+
+.tier-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  background: var(--bg-card);
+  position: relative;
+}
+
+.tier-head::before {
+  content: "";
+  position: absolute;
+  left: 0; top: 0; bottom: 0;
+  width: 3px;
+}
+
+.tier-card.tier-1 .tier-head::before { background: var(--t1-text); }
+.tier-card.tier-2 .tier-head::before { background: var(--t2-text); }
+.tier-card.tier-3 .tier-head::before { background: var(--t3-text); }
+.tier-card.tier-4 .tier-head::before { background: var(--t4-text); }
+
+.tier-head-left {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+.tier-name {
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+
+.tier-status {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+
+.tier-status .check {
+  color: var(--ok);
+  font-weight: 800;
+}
+
+.tier-body { padding: 20px; }
+
+/* Loading spinner */
+.spinner {
+  width: 14px;
+  height: 14px;
+  border: 2px solid var(--border);
+  border-top-color: var(--brand);
+  border-radius: 50%;
+  animation: spin 0.7s linear infinite;
+  display: inline-block;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+/* Skeleton */
+.skel {
+  position: relative;
+  overflow: hidden;
+  background: var(--bg-subtle);
+  border-radius: 6px;
+  height: 12px;
+}
+.skel::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.7) 50%, transparent 100%);
+  animation: shimmer 1.1s linear infinite;
+}
+@keyframes shimmer {
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(100%); }
+}
+
+.skel-row {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.skel-block { height: 80px; border-radius: 8px; }
+
+/* ============== Tier 1 body ============== */
+
+.t1-grid {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 16px;
+}
+
+.score-tile {
+  background: linear-gradient(180deg, var(--t1-bg) 0%, var(--t1-bg-soft) 100%);
+  border: 1px solid var(--t1-border);
+  border-radius: var(--radius);
+  padding: 22px 20px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  position: relative;
+  overflow: hidden;
+}
+
+.score-tile-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--t1-text);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.score-tile-value {
+  font-size: 48px;
+  font-weight: 800;
+  color: var(--t1-text);
+  letter-spacing: -0.04em;
+  line-height: 1;
+  font-variant-numeric: tabular-nums;
+  margin: 8px 0;
+}
+
+.score-tile-meta {
+  font-size: 11px;
+  color: var(--t1-text);
+  opacity: 0.8;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+.score-tile-bar {
+  margin-top: 10px;
+  height: 4px;
+  background: rgba(44,90,184,0.15);
+  border-radius: 999px;
+  overflow: hidden;
+}
+.score-tile-bar > span {
+  display: block;
+  height: 100%;
+  background: var(--t1-text);
+  border-radius: 999px;
+  animation: bar-grow 0.8s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+@keyframes bar-grow {
+  from { width: 0 !important; }
+}
+
+.feat-block {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+}
+
+.feat-block-title {
+  font-size: 12px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.feat-block-title .hint {
+  font-size: 10px;
+  color: var(--text-tertiary);
+  font-weight: 500;
+}
+
+.feat-row {
+  display: grid;
+  grid-template-columns: 110px 1fr 48px;
+  align-items: center;
+  gap: 10px;
+  padding: 6px 0;
+  font-size: 12px;
+}
+
+.feat-row + .feat-row { border-top: 1px dashed var(--border); }
+
+.feat-row .name { font-weight: 600; }
+.feat-row .val {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  font-weight: 700;
+  color: var(--text-primary);
+  font-size: 12px;
+}
+
+.bar-track {
+  height: 8px;
+  background: var(--bg-subtle);
+  border-radius: 999px;
+  position: relative;
+  overflow: hidden;
+}
+.bar-fill {
+  position: absolute;
+  inset: 0 auto 0 0;
+  background: linear-gradient(90deg, var(--t1-text) 0%, #5680D5 100%);
+  border-radius: 999px;
+  animation: bar-grow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+
+.lot-strip {
+  margin-top: 14px;
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 10px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 12px;
+}
+
+.lot-strip .lab {
+  color: var(--text-secondary);
+  font-size: 11px;
+}
+.lot-strip .lot {
+  font-family: var(--mono);
+  font-weight: 700;
+  font-size: 12px;
+  color: var(--text-primary);
+}
+.lot-strip .count {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 2px 8px;
+  border-radius: 4px;
+  font-variant-numeric: tabular-nums;
+  font-weight: 600;
+}
+
+/* ============== Tier 2 body ============== */
+
+.cause-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.cause-row {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 14px 18px;
+  position: relative;
+  display: grid;
+  grid-template-columns: 34px 1fr auto;
+  gap: 12px;
+  align-items: start;
+}
+
+.cause-row.primary {
+  background: var(--t2-bg-soft);
+  border-color: var(--t2-border);
+}
+
+.cause-rank {
+  width: 28px;
+  height: 28px;
+  border-radius: 8px;
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  display: grid;
+  place-items: center;
+  font-weight: 800;
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+.cause-row.primary .cause-rank {
+  background: var(--t2-text);
+  color: white;
+}
+
+.cause-body { min-width: 0; }
+.cause-top {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 8px;
+}
+.cause-name {
+  font-size: 14px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+}
+.cause-pct {
+  font-size: 18px;
+  font-weight: 800;
+  color: var(--t2-text);
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+.cause-row:not(.primary) .cause-pct { color: var(--text-secondary); font-size: 15px; }
+
+.cause-bar {
+  height: 6px;
+  background: var(--bg-subtle);
+  border-radius: 999px;
+  overflow: hidden;
+  margin-bottom: 10px;
+}
+.cause-bar > span {
+  display: block;
+  height: 100%;
+  background: linear-gradient(90deg, var(--t2-text) 0%, #9572CC 100%);
+  border-radius: 999px;
+  animation: bar-grow 0.9s cubic-bezier(0.22, 0.61, 0.36, 1) both;
+}
+.cause-row:not(.primary) .cause-bar > span {
+  background: linear-gradient(90deg, #A8A0BC 0%, #C3AEDF 100%);
+}
+
+.cause-evidence {
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  display: flex;
+  align-items: flex-start;
+  gap: 6px;
+  margin-bottom: 6px;
+  line-height: 1.55;
+}
+.cause-evidence b { color: var(--text-primary); font-weight: 600; }
+
+.cause-cite {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+  font-size: 10.5px;
+  color: var(--text-tertiary);
+}
+.cite-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  font-family: var(--mono);
+  font-size: 10px;
+  font-weight: 600;
+  padding: 2px 7px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  color: var(--text-primary);
+}
+
+/* ============== Tier 3 body ============== */
+
+.t3-grid {
+  display: grid;
+  grid-template-columns: 220px 1fr;
+  gap: 16px;
+  margin-bottom: 14px;
+}
+
+.loss-tile {
+  background: linear-gradient(180deg, #FDECF1 0%, #FFF6F9 100%);
+  border: 1px solid var(--crit-border);
+  border-radius: var(--radius);
+  padding: 22px 20px;
+}
+
+.loss-tile-label {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--crit-text);
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+}
+
+.loss-tile-value {
+  font-size: 48px;
+  font-weight: 800;
+  color: var(--crit-text);
+  letter-spacing: -0.04em;
+  line-height: 1;
+  margin: 8px 0;
+  font-variant-numeric: tabular-nums;
+}
+.loss-tile-value .unit { font-size: 22px; margin-left: 4px; }
+.loss-tile-meta { font-size: 11px; color: var(--crit-text); opacity: 0.85; }
+
+.dep-block {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 16px 18px;
+}
+
+.dep-graph {
+  display: grid;
+  grid-template-columns: 1fr 24px 1fr 24px 1fr;
+  align-items: center;
+  gap: 8px;
+  margin-top: 12px;
+}
+
+.dep-node {
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px;
+  text-align: center;
+  position: relative;
+}
+
+.dep-node.current {
+  background: var(--crit-bg);
+  border-color: var(--crit-border);
+}
+.dep-node.impacted {
+  background: var(--t4-bg);
+  border-color: var(--t4-border);
+}
+.dep-node.minor {
+  background: var(--bg-subtle);
+}
+
+.dep-stage-name {
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 6px;
+  letter-spacing: -0.01em;
+}
+
+.dep-delta {
+  font-size: 14px;
+  font-weight: 800;
+  font-variant-numeric: tabular-nums;
+  letter-spacing: -0.02em;
+}
+
+.dep-node.current .dep-delta { color: var(--crit-text); }
+.dep-node.impacted .dep-delta { color: var(--t4-text); }
+.dep-node.minor .dep-delta { color: var(--text-secondary); }
+
+.dep-tag {
+  font-size: 9px;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  margin-top: 6px;
+  opacity: 0.7;
+}
+
+.dep-arrow {
+  display: grid;
+  place-items: center;
+  color: var(--text-tertiary);
+}
+
+.impact-lots {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px;
+}
+
+.impact-lot {
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.impact-lot-label {
+  font-size: 11px;
+  color: var(--text-secondary);
+}
+.impact-lot-value {
+  font-size: 13px;
+  font-weight: 700;
+  font-variant-numeric: tabular-nums;
+}
+.impact-lot-value .lots-num { color: var(--text-primary); }
+.impact-lot-value .wafer { font-size: 11px; color: var(--text-secondary); margin-left: 6px; font-weight: 500; }
+
+/* ============== Tier 4 body ============== */
+
+.action-section {
+  margin-bottom: 14px;
+}
+
+.action-section-head {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 10px;
+  color: var(--text-primary);
+}
+
+.action-section-head .badge {
+  font-size: 9px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  padding: 2px 7px;
+  border-radius: 4px;
+}
+.action-section-head .badge.imm { background: var(--crit-bg); color: var(--crit-text); }
+.action-section-head .badge.lng { background: var(--bg-subtle); color: var(--text-secondary); border: 1px solid var(--border); }
+
+.action-box {
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-card);
+  overflow: hidden;
+}
+
+.action-box.urgent {
+  border-color: var(--crit-border);
+  background: linear-gradient(180deg, #FFF6F9 0%, #FFFFFF 100%);
+}
+
+.action-item {
+  display: grid;
+  grid-template-columns: 28px 1fr auto;
+  gap: 12px;
+  align-items: center;
+  padding: 12px 16px;
+  font-size: 13px;
+}
+
+.action-item + .action-item { border-top: 1px solid var(--border); }
+.action-box.urgent .action-item + .action-item { border-top: 1px solid rgba(240,168,188,0.5); }
+
+.action-num {
+  width: 22px; height: 22px;
+  border-radius: 6px;
+  background: var(--bg-subtle);
+  color: var(--text-secondary);
+  font-weight: 800;
+  font-size: 11px;
+  display: grid;
+  place-items: center;
+  font-variant-numeric: tabular-nums;
+}
+.action-box.urgent .action-num {
+  background: var(--crit-bg);
+  color: var(--crit-text);
+}
+
+.action-text { line-height: 1.5; }
+.action-meta {
+  font-size: 10px;
+  font-weight: 600;
+  color: var(--text-tertiary);
+  padding: 3px 8px;
+  border-radius: 4px;
+  background: var(--bg-subtle);
+  white-space: nowrap;
+}
+
+.refs {
+  margin-top: 14px;
+  font-size: 11.5px;
+  color: var(--text-secondary);
+  background: var(--bg-subtle);
+  border: 1px solid var(--border);
+  border-radius: var(--radius-sm);
+  padding: 12px 14px;
+}
+.refs-title {
+  font-size: 11px;
+  font-weight: 700;
+  color: var(--text-primary);
+  margin-bottom: 6px;
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.refs ul { margin: 0; padding-left: 18px; }
+.refs li { margin: 3px 0; }
+.refs li code {
+  font-family: var(--mono);
+  font-size: 10.5px;
+  background: var(--bg-card);
+  border: 1px solid var(--border);
+  padding: 1px 6px;
+  border-radius: 4px;
+  color: var(--text-primary);
+}
+
+/* Tier 4 액션 바 안의 Streamlit 버튼 스타일 */
+.stButton button[kind="primary"] {
+  background: var(--ok) !important;
+  border-color: var(--ok) !important;
+  height: 40px !important;
+  border-radius: 8px !important;
+  font-weight: 700 !important;
+  box-shadow: 0 1px 2px rgba(42,138,85,0.3), inset 0 1px 0 rgba(255,255,255,0.15) !important;
+}
+.stButton button[kind="primary"]:hover {
+  background: #237046 !important;
+  border-color: #237046 !important;
+}
+
+.live-tick {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-size: 10px;
+  color: var(--text-tertiary);
+  font-family: var(--mono);
+}
+.live-tick .dot {
+  width: 6px; height: 6px;
+  background: var(--danger);
+  border-radius: 50%;
+  animation: pulse-crit 1.2s ease-in-out infinite;
+}