Upload 2 files

dashboard_theme/theme.py

@@ -0,0 +1,231 @@
+# dashboard_theme/theme.py
+# 다중 팔레트 지원 (기본: Navy×Amber / 대안: Obsidian×Cyan / Graphite×Warm Orange)
+import streamlit as st
+
+PALETTES = {
+    # 1) 기존 네이비 × 앰버
+    "navy_amber": {
+        "bg": "#0B1220",
+        "panel": "#0F1B2D",
+        "panel2": "#0B1627",
+        "border": "rgba(255,255,255,.06)",
+        "shadow": "0 12px 28px rgba(0,0,0,.40)",
+        "text": "#FFFFFF",
+        "muted": "#9FB1C5",
+        "accent": "#F59E0B",
+        "accent_soft": "rgba(245,158,11,.12)",
+        "disabled_bg": "#2A2F3A",
+        "disabled_fg": "#E0E6ED",
+        "placeholder": "rgba(255,255,255,.9)",
+        "sidebar_bg": "#0C1828",
+        "radio_bg": "#0E1A2B",
+        "radio_hover": "#112642",
+    },
+    # 2) 오브시디언 × 시안
+    "obsidian_cyan": {
+        "bg": "#0B0F14",
+        "panel": "#0F1720",
+        "panel2": "#0B131C",
+        "border": "rgba(255,255,255,.08)",
+        "shadow": "0 16px 32px rgba(0,0,0,.55)",
+        "text": "#F8FAFC",
+        "muted": "#A7C4D6",
+        "accent": "#22D3EE",
+        "accent_soft": "rgba(34,211,238,.14)",
+        "disabled_bg": "#26313A",
+        "disabled_fg": "#E6F6FA",
+        "placeholder": "rgba(240,249,255,.92)",
+        "sidebar_bg": "#0F141A",
+        "radio_bg": "#0F1720",
+        "radio_hover": "#13202B",
+    },
+    # 3) Graphite × Warm Orange (Simulation 페이지 톤과 일치)
+    "graphite_gold": {
+        "bg": "#2F3136",          # 전체 배경(짙은 그레이)
+        "panel": "#3B3E44",       # 카드/패널
+        "panel2": "#2B2D31",      # 표/보조
+        "border": "rgba(255,255,255,.10)",
+        "shadow": "0 16px 40px rgba(0,0,0,.45)",
+        "text": "#F6F7F9",
+        "muted": "#C9CDD2",
+        "accent": "#F59E0B",      # 따뜻한 주황(눈부심 적음)
+        "accent_soft": "rgba(245,158,11,.18)",
+        "disabled_bg": "#4A4E55",
+        "disabled_fg": "#F1F3F6",
+        "placeholder": "rgba(250,250,252,.85)",
+        "sidebar_bg": "#3A3D42",
+        "radio_bg": "#3B3E44",
+        "radio_hover": "#454950",
+    },
+}
+
+def setup_page():
+    st.set_page_config(page_title="시뮬레이션", layout="wide", initial_sidebar_state="expanded")
+
+def _css_template(c):
+    return f"""
+<style>
+@font-face {{
+  font-family:'Pretendard';
+  src:url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard.woff2') format('woff2');
+  font-weight:100 900; font-style:normal; font-display:swap;
+}}
+html, body, [class*="css"] {{
+  font-family:Pretendard, Inter, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans KR, Apple SD Gothic Neo, sans-serif;
+}}
+
+:root{{
+  --bg:{c['bg']};
+  --panel:{c['panel']};
+  --panel-2:{c['panel2']};
+  --border:{c['border']};
+  --shadow:{c['shadow']};
+  --text:{c['text']};
+  --muted:{c['muted']};
+  --accent:{c['accent']};
+  --accent-soft:{c['accent_soft']};
+}}
+
+html, body, .stApp, .stAppViewContainer, [data-testid="stAppViewContainer"]{{ background:var(--bg)!important; color:var(--text)!important; }}
+[data-testid="stHeader"]{{ background:transparent!important; }}
+section.main{{ background:transparent!important; }}
+
+/* 사이드바 */
+section[data-testid="stSidebar"]{{ background:{c['sidebar_bg']}!important; border-right:1px solid var(--border)!important; }}
+section[data-testid="stSidebar"] *{{ color:var(--text)!important; }}
+section[data-testid="stSidebar"] .stMarkdown{{ color:var(--muted)!important; }}
+
+/* 라디오/토글형 */
+div[role="radiogroup"] > label{{
+  border:1px solid var(--border)!important; border-radius:12px!important;
+  padding:10px 14px!important; margin-right:8px!important; background:{c['radio_bg']}!important;
+  cursor:pointer; font-weight:800; color:var(--text)!important;
+  transition:transform .08s ease, background .2s ease, box-shadow .2s ease, filter .2s ease;
+}}
+div[role="radiogroup"] input{{ display:none!important; }}
+div[role="radiogroup"] > label:hover{{ background:{c['radio_hover']}!important; transform:translateY(-1px); }}
+div[role="radiogroup"] > label[data-checked="true"]{{
+  color:#1b1b1b!important; background:var(--accent)!important; border-color:var(--accent)!important;
+  box-shadow:0 8px 22px rgba(0,0,0,.18), 0 6px 18px color-mix(in oklab, var(--accent) 30%, transparent)!important;
+}}
+
+/* Expander */
+div[data-testid="stExpander"] > details{{ padding:0; border:none; background:transparent; }}
+div[data-testid="stExpander"] > details > summary{{
+  list-style:none; height:44px; line-height:44px;
+  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%)!important;
+  border:1px solid var(--border)!important; border-radius:12px!important; padding:0 14px!important;
+  display:flex; align-items:center; color:var(--text)!important; font-weight:900;
+}}
+div[data-testid="stExpander"] > details > div{{
+  margin-top:10px; padding:14px; border:1px solid var(--border)!important;
+  border-radius:12px; background:var(--panel-2); box-shadow:var(--shadow);
+}}
+
+/* 입력 컴포넌트 */
+div[data-baseweb="select"] > div{{ border:1.6px solid var(--border)!important; border-radius:12px!important; background:var(--panel-2)!important; color:var(--text)!important; }}
+div[data-testid="stNumberInput"] > div{{ border:1.6px solid var(--border)!important; border-radius:12px!important; background:var(--panel-2)!important; }}
+div[data-testid="stNumberInput"] input{{ background:var(--panel-2)!important; color:var(--text)!important; border:none!important; }}
+div[data-testid="stTextInput"] input, div[data-testid="stTextArea"] textarea{{
+  background:var(--panel-2)!important; color:var(--text)!important; border:1.6px solid var(--border)!important; border-radius:12px!important;
+}}
+:where(input,textarea,select):focus{{
+  outline:2px solid color-mix(in oklab, var(--accent) 48%, transparent)!important;
+  box-shadow:0 0 0 3px color-mix(in oklab, var(--accent) 18%, transparent)!important;
+}}
+
+/* 버튼 - 기본(강조) */
+.stButton > button{{
+  background:var(--accent)!important; border:1px solid var(--accent)!important;
+  color:#1b1b1b!important; font-weight:1000!important; border-radius:14px!important; padding:10px 16px!important;
+  box-shadow:0 8px 18px rgba(0,0,0,.22), 0 8px 18px color-mix(in oklab, var(--accent) 28%, transparent)!important;
+  transition:transform .06s ease, filter .2s ease, box-shadow .2s ease;
+}}
+.stButton > button:hover{{ filter:brightness(1.03)!important; transform:translateY(-1px)!important; }}
+
+/* 버튼 - 비활성/Secondary */
+.stButton > button:disabled, .stButton > button[disabled]{{
+  background:{c['disabled_bg']}!important; color:{c['disabled_fg']}!important;
+  border:1px solid var(--border)!important; font-weight:600!important; opacity:1!important;
+}}
+
+/* 패널 */
+.panel{{
+  border:1px solid var(--border)!important; border-radius:18px!important;
+  padding:18px 18px 14px!important;
+  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%)!important;
+  box-shadow:var(--shadow)!important; margin:10px 0 22px!important; backdrop-filter:blur(6px);
+}}
+.panel-title{{ font-weight:1000!important; color:var(--text)!important; margin:0 0 10px 2px!important; font-size:18px!important; }}
+
+/* Metric 카드 */
+.metric{{
+  border:1px solid var(--border)!important; border-radius:18px!important;
+  background:linear-gradient(180deg,var(--panel) 0%, var(--panel-2) 100%)!important;
+  box-shadow:var(--shadow)!important; padding:22px!important; min-height:164px!important;
+  display:flex; flex-direction:column; justify-content:center;
+}}
+.metric .label{{ font-weight:900; color:var(--muted); font-size:14px; }}
+.metric .value{{ font-size:46px; font-weight:1000; color:var(--accent); margin:6px 0 8px; }}
+.metric .chip{{
+  display:inline-block; padding:5px 12px; border-radius:999px; font-weight:1000; font-size:12px;
+  background:var(--accent-soft); color:var(--accent);
+  border:1px solid color-mix(in oklab, var(--accent) 26%, transparent);
+}}
+.metric.ok .chip{{ background:rgba(34,197,94,.16); color:#A9F0BF; }}
+.metric.bad .chip{{ background:rgba(239,68,68,.16); color:#F7B4B4; }}
+.metric .range{{ color:#E8EEF8; font-size:15px; font-weight:800; }}
+
+/* DataFrame */
+[data-testid="stDataFrame"] thead th{{ background:var(--panel)!important; color:var(--text)!important; border-bottom:1px solid var(--border)!important; }}
+[data-testid="stDataFrame"] tbody td{{ background:var(--panel-2)!important; color:var(--text)!important; }}
+[data-testid="stDataFrame"] tbody tr:nth-child(even) td{{ background:color-mix(in oklab, var(--panel-2) 90%, black)!important; }}
+
+/* 구분선/캡션/배지 */
+hr, .stDivider{{ border-color:var(--border)!important; }}
+small, .stCaption{{ color:var(--muted)!important; }}
+.badge{{
+  display:inline-block; padding:4px 10px; border-radius:999px; font-size:12px; font-weight:900;
+  border:1px solid var(--border); background:var(--panel); color:var(--text); margin-right:8px; margin-bottom:6px;
+}}
+.badge.em{{ background:var(--accent-soft); color:var(--accent); border-color:color-mix(in oklab, var(--accent) 28%, transparent); }}
+.badge.ok{{ background:rgba(34,197,94,.16); color:#A9F0BF; }}
+.badge.ng{{ background:rgba(239,68,68,.16); color:#F7B4B4; }}
+
+/* 라벨/텍스트 고정 패치 */
+[data-testid="stWidgetLabel"], [data-testid="stWidgetLabel"] *, label[data-testid="stWidgetLabel"], label[data-testid="stWidgetLabel"] *{{ color:var(--text)!important; opacity:1!important; }}
+.stRadio label, .stRadio label *, div[role="radiogroup"] > label, div[role="radiogroup"] > label *{{ color:var(--text)!important; opacity:1!important; }}
+.stCheckbox label, .stCheckbox label *, [data-testid="stCheckbox"] label, [data-testid="stCheckbox"] label *{{ color:var(--text)!important; opacity:1!important; }}
+[data-baseweb="checkbox"] label, [data-baseweb="checkbox"] label *, [data-baseweb="radio"] label, [data-baseweb="radio"] label *{{ color:var(--text)!important; opacity:1!important; }}
+[data-testid="stMarkdownContainer"], [data-testid="stMarkdownContainer"] *{{ color:var(--text)!important; opacity:1!important; }}
+
+/* Tabs */
+div[role="tablist"]{{ border-bottom:1px solid var(--border)!important; }}
+div[role="tablist"] button{{ background:transparent!important; border:none!important; cursor:pointer!important; }}
+div[role="tablist"] button[aria-selected="true"], div[role="tablist"] button[aria-selected="true"] span, div[role="tablist"] button[aria-selected="true"] p{{ color:var(--text)!important; }}
+div[role="tablist"] button[aria-selected="false"], div[role="tablist"] button[aria-selected="false"] span, div[role="tablist"] button[aria-selected="false"] p{{ color:var(--muted)!important; }}
+div[role="tablist"] button[aria-selected="true"]::after{{ content:""; display:block; margin-top:6px; border-bottom:2px solid var(--accent)!important; }}
+div[role="tablist"] button:hover{{ filter:brightness(1.08)!important; }}
+
+/* placeholder */
+::placeholder{{ color:{c['placeholder']}!important; opacity:1!important; }}
+
+/* 정렬 보정: 캡션 & 익스팬더 */
+.tight-block .stCaption, .tight-block small {{
+  margin-top: 0 !important;
+  display: block;
+}}
+.tight-block [data-testid="stExpander"] > details {{
+  margin-top: 6px !important;
+}}
+</style>
+"""
+
+def inject_css(palette: str = "navy_amber"):
+    c = PALETTES.get(palette, PALETTES["navy_amber"])
+    st.markdown(_css_template(c), unsafe_allow_html=True)
+
+def inject(palette: str = "navy_amber"):
+    """예) inject('graphite_gold')"""
+    setup_page()
+    inject_css(palette)

dashboard_theme/ui_theme.py

@@ -0,0 +1,302 @@
+# ui_theme.py
+import base64
+import datetime
+import streamlit as st
+import streamlit.components.v1 as components
+
+
+# ===== [1] 페이지 기본 세팅 =====
+def set_page(
+    title: str = "AJIN Industrial Co., Ltd",
+    layout: str = "wide",
+    initial_sidebar_state: str = "expanded",  # 기본은 열림. 토글은 사용자 자유
+):
+    st.set_page_config(
+        page_title=title,
+        layout=layout,
+        initial_sidebar_state=initial_sidebar_state,
+    )
+
+# ===== [2] 유틸: 이미지 → base64 =====
+def _img_to_base64(path: str) -> str:
+    with open(path, "rb") as f:
+        return base64.b64encode(f.read()).decode()
+
+# ===== [3] 전역 CSS (상단바 유지, 사이드바 폭 연동, 배너/본문 밀림) =====
+def inject_global_css(
+    *,
+    banner_h: str = "72px",
+    header_h_default: str = "58px",   # 초기 추정 높이 (JS로 실제값 동기화)
+    navy_900: str = "#0a1424",
+    navy_800: str = "#101d33",
+    line: str = "#2a3a5a",
+    text: str = "#e9eef7",
+    muted: str = "#aeb7c6",
+    yellow: str = "#ffbd39",
+    green: str = "#69d06d",
+    red: str = "#ff5858",
+    hide_menu_footer: bool = False,   # 메뉴/푸터 숨김 여부 (원하면 True)
+):
+    st.markdown(
+        f"""
+<style>
+:root {{
+  --banner-h: {banner_h};
+  --st-header-h: {header_h_default};   /* JS로 실제 높이 동기화됨 */
+  --ajin-navy-900: {navy_900};
+  --ajin-navy-800: {navy_800};
+  --ajin-line: {line};
+  --ajin-text: {text};
+  --ajin-muted: {muted};
+  --ajin-yellow: {yellow};
+  --ajin-green: {green};
+  --ajin-red: {red};
+  --sbw: 0px;  /* 사이드바 실제 너비 (JS로 동기화) */
+}}
+
+html, body, .stApp {{ margin:0 !important; }}
+.stApp {{ background: var(--ajin-navy-900); }}
+
+/* 상단바(헤더/툴바) 유지 + 컬러 커스터마이즈 */
+header[data-testid="stHeader"] {{
+  background: var(--ajin-navy-800) !important;
+  border-bottom: 1px solid var(--ajin-line) !important;
+  box-shadow: none !important;
+}}
+header[data-testid="stHeader"] * {{ color: var(--ajin-text) !important; }}
+[data-testid="stToolbar"] {{ background: transparent !important; }}
+[data-testid="stToolbar"] svg {{ fill: var(--ajin-text) !important; color: var(--ajin-text) !important; }}
+
+/* 배너: 상단바 높이만큼 아래 + 사이드바 폭만큼 오른쪽 밀림 */
+.fixed-banner {{
+  position: fixed;
+  top: var(--st-header-h);
+  left: var(--sbw);
+  width: calc(100% - var(--sbw));
+  z-index: 100000;
+  height: var(--banner-h);
+  display:flex; align-items:center;
+  background: var(--ajin-navy-800);
+  border-bottom: 1px solid var(--ajin-line);
+  padding: 0 18px;
+}}
+.fixed-banner .wrap {{ display:flex; align-items:center; gap:14px; width:100%; }}
+.fixed-banner img.logo {{ height:46px; }}
+.fixed-banner .title {{ color:var(--ajin-text); font-weight:800; font-size:20px; letter-spacing:.3px; }}
+.fixed-banner .right {{ margin-left:auto; color:var(--ajin-muted); font-size:13px; font-weight:600; }}
+
+/* 본문: 상단(헤더+배너) + 좌측(사이드바 폭) 보정 */
+.block-container {{
+  padding-top: calc(var(--st-header-h) + var(--banner-h) + 8px) !important;
+  padding-left: var(--sbw) !important;
+}}
+
+/* 사이드바 컬러만 통일 */
+[data-testid="stSidebar"] {{
+  background: linear-gradient(180deg, #0e1a30 0%, #0b1527 100%);
+  border-right:1px solid var(--ajin-line);
+}}
+[data-testid="stSidebar"] * {{ color: var(--ajin-text) !important; }}
+
+/* 카드 프리셋(옵션) */
+.card {{
+  border:1px solid var(--ajin-line); border-radius:16px;
+  background: var(--ajin-navy-800); padding:16px 18px; color:var(--ajin-text);
+  box-shadow: 0 8px 24px rgba(0,0,0,.25);
+}}
+.card h3 {{ margin:0 0 12px 0; font-size:18px; }}
+
+/* 메뉴/푸터 표시 여부 */
+{ "#MainMenu {{visibility:hidden;}} footer {{visibility:hidden;}}" if hide_menu_footer else "" }
+
+/* 홈 링크(집 아이콘) 크기/여백 살짝 줄이기 */
+[data-testid="stPageLink"] a {{
+  font-size: 13px;
+  padding: 6px 10px;
+  border-radius: 10px;
+  background: rgba(255,255,255,0.04);
+  border: 1px solid var(--ajin-line);
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}}
+
+/* 원형 4버튼 레이아웃 & 버튼 모양 */
+.sb-rounds {{
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 10px;
+  margin-top: 10px;
+}}
+/* page_link 요소를 동그란 버튼처럼 보이도록 */
+.sb-rounds [data-testid="stPageLink"] a {{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 64px;
+  border-radius: 999px;
+  border: 1px solid var(--ajin-line);
+  background: rgba(255,255,255,0.06);
+  font-weight: 700;
+  font-size: 12px;
+  text-align: center;
+  padding: 0 8px;             /* 긴 라벨 줄바꿈 여유 */
+  line-height: 1.1;
+}}
+.sb-rounds [data-testid="stPageLink"] a:hover {{
+  background: rgba(255,255,255,0.12);
+}}
+</style>
+""",
+        unsafe_allow_html=True,
+    )
+
+
+# ===== [4] 고정 상단 배너 =====
+def render_fixed_banner(*, logo_path: str, title: str):
+    logo_b64 = _img_to_base64(logo_path)
+    now_txt = datetime.datetime.now().strftime("%Y-%m-%d %H:%M")
+    st.markdown(
+        f"""
+<div class="fixed-banner">
+  <div class="wrap">
+    <img class="logo" src="data:image/png;base64,{logo_b64}" />
+    <div class="title">{title}</div>
+    <div class="right">{now_txt}</div>
+  </div>
+</div>
+""",
+        unsafe_allow_html=True,
+    )
+
+# ===== [5] 사이드바: 날짜·시계 (필수) =====
+def render_sidebar_clock(show_seconds: bool = False):
+    now = datetime.datetime.now()
+    time_fmt = "%H:%M:%S" if show_seconds else "%H:%M"
+    st.sidebar.markdown(
+        f"""
+<div style="text-align:center; padding: 6px 8px 12px 8px; border-bottom:1px solid var(--ajin-line);">
+  <div style="font-size:18px; color:var(--ajin-muted); margin-bottom:4px;">{now.strftime("%Y.%m.%d (%a)")}</div>
+  <div style="font-size:76px; line-height:1.0; font-weight:800; color:#fff; text-shadow:0 2px 8px rgba(0,0,0,.25);">{now.strftime(time_fmt)}</div>
+</div>
+""",
+        unsafe_allow_html=True,
+    )
+
+
+
+def enable_header_height_sync():
+    components.html(
+        """
+<script>
+(function(){
+  const root = window.parent?.document?.documentElement || document.documentElement;
+
+  function syncHeader(){
+    const hdr = window.parent?.document?.querySelector('header[data-testid="stHeader"]');
+    if(!hdr) return;
+    root.style.setProperty('--st-header-h', (hdr.offsetHeight || 0) + 'px');
+  }
+
+  function init(){
+    const hdr = window.parent?.document?.querySelector('header[data-testid="stHeader"]');
+    if(hdr){
+      syncHeader();
+      new ResizeObserver(syncHeader).observe(hdr);
+      window.addEventListener('resize', syncHeader);
+    } else {
+      const poll = setInterval(()=>{
+        const h = window.parent?.document?.querySelector('header[data-testid="stHeader"]');
+        if(h){ clearInterval(poll); syncHeader(); new ResizeObserver(syncHeader).observe(h); }
+      }, 150);
+    }
+  }
+
+  init();
+})();
+</script>
+""",
+        height=0,
+    )
+
+
+def enable_sidebar_width_sync():
+    """
+    사이드바의 '보이는 너비'를 측정해 CSS 변수 --sbw 에 반영.
+    열림/닫힘/반응형 변화에 따라 배너와 본문이 같이 밀려납니다.
+    """
+    components.html(
+        """
+<script>
+(function(){
+  const root = window.parent?.document?.documentElement || document.documentElement;
+
+  function syncSidebar(){
+    const sb = window.parent?.document?.querySelector('[data-testid="stSidebar"]');
+    let w = 0;
+    if (sb){
+      const r = sb.getBoundingClientRect();
+      // 화면 밖(닫힘)이나 거의 0이면 0 처리
+      w = (r.right <= 0 || r.width < 40) ? 0 : r.width;
+    }
+    root.style.setProperty('--sbw', w + 'px');
+  }
+
+  function init(){
+    syncSidebar();
+    const body = window.parent?.document?.body || document.body;
+    if (body){ new ResizeObserver(syncSidebar).observe(body); }
+    const sb = window.parent?.document?.querySelector('[data-testid="stSidebar"]');
+    if (sb){ new ResizeObserver(syncSidebar).observe(sb); }
+    window.addEventListener('resize', syncSidebar);
+  }
+
+  init();
+})();
+</script>
+""",
+        height=0,
+    )
+
+
+# def render_sidebar_main_button(main_script: str = "HOME.py",
+#                                label: str = "Go to the main page"):
+#     """
+#     사이드바에 둥근 직사각형 네비 버튼을 렌더링합니다.
+#     - main_script: 메인 페이지 파일명 (루트에 있는 스크립트)
+#     - label: 버튼 라벨
+#     """
+#     # 버튼 스타일 (사이드바에만 적용)
+#     st.sidebar.markdown("""
+#     <style>
+#       .sb-mainbtn [data-testid="stPageLink"] a {
+#         display: flex; align-items: center; justify-content: center;
+#         height: 48px; width: 100%;
+#         border-radius: 999px;
+#         border: 1px solid var(--ajin-line);
+#         background: rgba(255,255,255,0.06);
+#         color: var(--ajin-text) !important;
+#         font-weight: 800; font-size: 13px;
+#         text-decoration: none;
+#       }
+#       .sb-mainbtn [data-testid="stPageLink"] a:hover {
+#         background: rgba(255,255,255,0.12);
+#       }
+#       .sb-mainbtn { margin-top: 10px; margin-bottom: 10px; }
+#     </style>
+#     """, unsafe_allow_html=True)
+
+#     with st.sidebar:
+#         st.markdown('<div class="sb-mainbtn">', unsafe_allow_html=True)
+#         # 아이콘 없이 텍스트만 표기 (항상 메인으로 이동)
+#         st.page_link(main_script, label=label)
+#         st.markdown('</div>', unsafe_allow_html=True)
+
+def render_sidebar_nav():
+    with st.sidebar:
+        st.markdown('<div class="sb-rounds">', unsafe_allow_html=True)
+        st.page_link("pages/01_라인별_가동_현황.py", label="라인별 가동 현황")
+        st.page_link("pages/02_비가동_일지.py",       label="비가동 일지")
+        st.page_link("pages/03_수리_이력.py",         label="수리 이력")
+        st.page_link("pages/04_스페어_현황_리포트.py", label="스페어 현황 리포트")
+        st.markdown('</div>', unsafe_allow_html=True)