/* ==========================================================================
   Workcell Agent • Unified Theme  (with Pretendard as primary UI font)
   ========================================================================== */

/* ===================== Webfonts ===================== */
/* Path base: assets/css/theme.css → assets/font/*.woff2/.woff */

/* Pretendard Thin (100) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Thin.woff2') format('woff2'),
       url('../font/Pretendard-Thin.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}

/* Pretendard ExtraLight (200) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-ExtraLight.woff2') format('woff2'),
       url('../font/Pretendard-ExtraLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Pretendard Light (300) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Light.woff2') format('woff2'),
       url('../font/Pretendard-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Pretendard Regular (400) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Regular.woff2') format('woff2'),
       url('../font/Pretendard-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Pretendard Medium (500) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Medium.woff2') format('woff2'),
       url('../font/Pretendard-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Pretendard SemiBold (600) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-SemiBold.woff2') format('woff2'),
       url('../font/Pretendard-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* Pretendard Bold (700) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Bold.woff2') format('woff2'),
       url('../font/Pretendard-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* Pretendard ExtraBold (800) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-ExtraBold.woff2') format('woff2'),
       url('../font/Pretendard-ExtraBold.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

/* Pretendard Black (900) */
@font-face {
  font-family: 'Pretendard';
  src: url('../font/Pretendard-Black.woff2') format('woff2'),
       url('../font/Pretendard-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* Optional numeric alignment helper */
.mono-num { font-feature-settings: "tnum"; }

/* ===================== CSS Variables ===================== */
:root{
  /* 색상 */
  --bg:#0f1220; --panel:#1a1f33; --panel-2:#242a45;
  --muted:#a7b0c5; --text:#e9ecf6; --brand:#6bb3ff;
  --ok:#39d98a; --warn:#f5c542; --danger:#ff6b6b;
  --chip:#2a3050; --sidebar:#86786DFF; --line:#2a3152;
  --focus:0 0 0 3px rgba(107,179,255,.25); --radius:16px;

  /* 사이드바 스크롤 (베이지 톤) */
  --sb-scroll-track:#75695F;
  --sb-scroll-thumb:#C2AE9B;

  /* 레이아웃 */
  --topbar-h: 96px;
  --sb-wide: 280px; --sb-narrow: 64px; --handle-offset: 12px;
  --rail-size: 34px; --rail-radius: 12px;

  /* 상태/로그/차트 */
  --critical:#ff5d5d; --warning:#ffd35c; --ack:#7aa2ff;
  --mark:#ffe08a;

  /* 로고 사이즈 */
  --logo-size: 40px;

  /* Analysis Pastel Palette */
  --p-c1:#8fb3ff; --p-c2:#a6d8ff; --p-c3:#ffd6a6;
  --p-c4:#d7c6ff; --p-c5:#9fe3cc; --p-c6:#ffc3cf;

  /* Chart series 변수 (옵션) */
  --shift-c1: var(--p-c1);
  --shift-c2: var(--p-c2);
  --shift-c3: var(--p-c3);
  --throughput-c1: var(--p-c4);
  --throughput-c2: var(--p-c5);
  --throughput-c3: var(--p-c6);
}

/* ===================== Base / Utilities ===================== */
*{ box-sizing:border-box }
html,body{ height:100% }
body{
  margin:0; background:var(--bg); color:var(--text);
  /* ✅ Pretendard를 기본 본문 폰트로 사용 */
  font-family:'Pretendard', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans KR", sans-serif;
}
.muted{ color:var(--muted) }
.mono{ color:#9fb0d0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace }
.tag{ padding:2px 8px; border-radius:999px; font-size:12px; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.1) }
.badge{ padding:2px 8px; border-radius:999px; font-size:12px; font-weight:700 }
.badge.ok{ background:rgba(57,217,138,.15); color:var(--ok) }
.badge.warn{ background:rgba(245,197,66,.18); color:var(--warn) }
.badge.dot{ display:inline-flex; align-items:center; gap:6px }
.badge.dot::before{ content:""; width:8px; height:8px; border-radius:999px; background:currentColor; display:inline-block }
.badge.dot.critical{ color:var(--critical); background:rgba(255,93,93,.15) }

.select,.button,.tonal,.input{
  background:var(--panel); border:1px solid rgba(255,255,255,.1); color:#eef;
  padding:10px 14px; border-radius:12px; font-weight:700
}
.button{ cursor:pointer } .button:hover{ filter:brightness(1.06) }
.tonal{ font-weight:600; opacity:.9 }

/* ===================== Layout / Sidebar ===================== */
.layout{ display:grid; grid-template-columns:auto 1fr; min-height:100vh; --sb-current: var(--sb-wide) }
.layout.collapsed, .sb-collapsed{ --sb-current: var(--sb-narrow) }

.sidebar{
  background:var(--sidebar);
  padding:24px 16px;
  position:sticky; top:0; height:100vh;
  border-right:1px solid rgba(255,255,255,.04);
  width:var(--sb-wide);
  overflow-y:auto; overflow-x:visible;
  z-index:5; transition:none;

  /* ✅ 사이드바 전용 스크롤 색 (Firefox용) */
  scrollbar-color:var(--sb-scroll-thumb) var(--sb-scroll-track);
  scrollbar-width:thin;
}
.layout.collapsed .sidebar, .sb-collapsed .sidebar{ width:var(--sb-narrow); padding-inline:8px }
.with-transition .sidebar{ transition:width .22s ease, padding-inline .22s ease }
.scontent{ padding-bottom:80px }

.layout.collapsed .brand,
.layout.collapsed .section-title,
.layout.collapsed .status-list,
.layout.collapsed .s-divider,
.sb-collapsed .brand,
.sb-collapsed .section-title,
.sb-collapsed .status-list,
.sb-collapsed .s-divider{ display:none }

.brand{ display:flex; align-items:center; gap:12px; font-weight:700 }
.brand .logo{
  width:var(--logo-size); height:var(--logo-size);
  border-radius:10px;
  /* ✅ 사이드바 로고: 프로젝트/assets/img/hyundai_logo.png */
  background: transparent url('../img/hyundai_logo.png') center/contain no-repeat;
  box-shadow:none;
}
.brand small{ display:block; color:#9db3d7; font-weight:400 }
.s-divider{ height:1px; background:#0f1220; margin:16px -16px 8px }
.section-title{ margin:24px 8px 8px; color:#c1cae6; font-size:12px; font-weight:500; text-transform:uppercase; letter-spacing:.12em; opacity:.8 }

/* ===== Brandbar: sidebar-style logo pill ===== */
.brandbar{
  display:flex; justify-content:center; align-items:center;
  padding:18px 0 10px;
}
.brandbar .brand{
  display:inline-flex; align-items:center; gap:12px;
  text-decoration:none; user-select:none;
}
.brandbar .logo-pill{
  width:40px; height:40px; border-radius:12px;
  display:grid; place-items:center;
  font-weight:900; letter-spacing:.2px;
  color:#0d1220;
  background:#1a1f33;
  box-shadow:0 1px 0 rgba(0,0,0,.15) inset, 0 4px 14px rgba(0,0,0,.18);
}
.brandbar .brand-text .name{
  font-weight:900; font-size:22px; line-height:1.05; color:#eaf2ff;
}
.brandbar .brand-text .sub{
  margin-top:2px; color:#9db3d7; font-weight:600; font-size:13px;
}

@media (max-width:520px){
  .brandbar .brand-text .name{ font-size:19px }
  .brandbar .logo-pill{ width:36px; height:36px; border-radius:11px }
}

.menu{ padding:6px }
.menu ul{ list-style:none; margin:0; padding:0 }
.menu a.item{
  display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:12px;
  color:#e8eaf4; text-decoration:none; position:relative;
}
.menu a.item .ico{ width:20px; height:20px; display:inline-grid; place-items:center; position:relative; z-index:1; filter:drop-shadow(0 0 2px rgba(0,0,0,.55)) }
.menu a.item .label{ white-space:nowrap }
.menu a.item:hover{ background:rgba(255,255,255,.06) }
.layout:not(.collapsed) .menu a.item.active{ background:#2d3556; outline:1px solid rgba(255,255,255,.06) }

.layout.collapsed .menu a.item, .sb-collapsed .menu a.item{
  justify-content:center; padding:12px; background:transparent; outline:none
}
.layout.collapsed .menu a.item .label, .sb-collapsed .menu a.item .label{ display:none }
.layout.collapsed .menu a.item .ico, .sb-collapsed .menu a.item .ico{ width:22px; height:22px; display:grid; place-items:center; line-height:1; text-align:center }
.layout.collapsed .menu a.item::before, .sb-collapsed .menu a.item::before{
  content:""; position:absolute; left:50%; top:50%; width:var(--rail-size); height:var(--rail-size);
  transform:translate(-50%,-50%); border-radius:var(--rail-radius);
  background:#2d3556; box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  z-index:0; opacity:0; transition:opacity .12s ease
}
.layout.collapsed .menu a.item:hover::before,
.layout.collapsed .menu a.item.active::before,
.sb-collapsed .menu a.item:hover::before,
.sb-collapsed .menu a.item.active::before{ opacity:1 }
.layout.collapsed .menu a.item:hover .ico,
.layout.collapsed .menu a.item.active .ico,
.sb-collapsed .menu a.item:hover .ico,
.sb-collapsed .menu a.item.active .ico{
  filter: drop-shadow(0 0 1px rgba(255,255,255,.65)) drop-shadow(0 0 6px rgba(107,179,255,.25));
}

/* 🔽🔽🔽 NEW: My submenu styles */
.menu a.item.has-sub{
  position:relative;
  user-select:none;
}
.menu a.item.has-sub::after{
  content:'▾';
  position:absolute; right:10px; top:50%;
  transform:translateY(-50%) rotate(0deg);
  transition:transform .18s ease;
  opacity:.7;
  pointer-events:none;
}
.menu a.item.has-sub[aria-expanded="true"]::after{
  transform:translateY(-50%) rotate(180deg);
}

.menu .submenu{
  list-style:none;
  padding:0;
  margin:4px 0 8px 22px;
}
.menu .submenu[hidden]{ display:none; }

.menu .submenu a.item{
  padding:8px 10px;
  border-radius:10px;
  font-weight:600;
  color:#e8eaf4;
}
.menu .submenu a.item .label{ font-size:13px }
.menu .submenu a.item:hover{ background:rgba(255,255,255,.05) }

.layout.collapsed .menu .submenu,
.sb-collapsed .menu .submenu{ display:none !important }
/* 🔼🔼🔼 My submenu styles END */

/* 핸들 */
.handle{
  position:fixed; top:50%; left:calc(var(--sb-current) - var(--handle-offset));
  transform:translateY(-50%); z-index:50;
  width:28px; height:96px; border-radius:12px;
  background:rgba(15,18,32,.85); border:1px solid rgba(255,255,255,.15);
  backdrop-filter:saturate(140%) blur(6px);
  color:#e6ecf6; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:none;
  box-shadow:0 0 0 1px rgba(0,0,0,.25), 0 6px 16px rgba(0,0,0,.35);
}
.with-transition .handle{ transition:left .22s ease }
.handle:hover{ filter:brightness(1.08) }
.handle:focus{ outline:none; box-shadow:0 0 0 2px rgba(107,179,255,.45) }

/* 상태 리스트 */
.status-list{ display:flex; flex-direction:column; gap:10px; padding:8px }
.status-item{ display:flex; align-items:center; justify-content:space-between; background:rgba(0,0,0,.1); padding:10px 12px; border-radius:12px; border:1px solid rgba(255,255,255,.06) }

/* ===================== Topbar ===================== */
.topbar{
  position: fixed; top: 0; left: var(--sb-current); right: 0;
  min-height: 84px; background:#0f1220; border-bottom:1px solid rgba(176,176,176,.50);
  z-index:40; will-change: transform; transform: translateZ(0);
}
.topbar .inner{ display:grid; grid-template-columns:1.1fr 1fr; gap:24px; padding:14px 24px; align-items:center }
.topbar h4{ margin:0 0 8px; font-size:14px; letter-spacing:.02em; color:#d6ddf3 }
.status-pills{ display:flex; align-items:center; gap:18px }
.pill-item{ display:flex; flex-direction:column; align-items:center; gap:6px }
.lamp{ width:46px; height:46px; border-radius:999px; border:2px solid rgba(255,255,255,.12); box-shadow:inset 0 0 18px rgba(0,0,0,.35),0 0 0 1px rgba(0,0,0,.25) }
.lamp.ok{ background:radial-gradient(40% 40% at 50% 40%,rgba(102,255,163,.95),rgba(34,145,97,.9)) }
.lamp.idle{ background:radial-gradient(40% 40% at 50% 40%,rgba(200,205,215,.95),rgba(110,115,125,.8)) }

.mode-wrap{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px }
.mode{ background:var(--panel); border:1px solid var(--line); border-radius:14px; padding:14px; display:grid; place-items:center; height:64px; font-weight:700; color:#e7ecff; cursor:pointer; transition:transform .1s ease,border-color .15s ease }
.mode:hover{ transform:translateY(-1px) }
.mode.active{ outline:2px solid rgba(107,179,255,.45); border-color:#6bb3ff }

/* ===================== Content blocks ===================== */
.main{ padding: calc(var(--topbar-h, 96px) + 16px) 32px 28px 32px !important; overflow: visible !important }
.headline{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:15px 0 }
.hgroup h1{ margin:0 0 6px; font-size:28px }
.hgroup p{ margin:0; color:var(--muted) }
.toolbar{ display:flex; align-items:center; gap:10px }

.chips{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:18px }
.chip{ background:var(--chip); border:1px solid var(--line); padding:14px; border-radius:14px; display:flex; align-items:center; justify-content:space-between }
.section{ margin-top:26px }
.cards{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:16px }
.card{ background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:16px; display:flex; flex-direction:column; gap:12px; min-width:0 }
.kv{ display:flex; align-items:baseline; gap:10px }
.kv .value{ font-size:28px; font-weight:800 }
.kv .trend{ font-size:14px; color:var(--muted) }
.meter{ height:8px; background:#0d1020; border:1px solid rgba(255,255,255,.06); border-radius:999px; overflow:hidden }
.meter>span{ display:block; height:100%; background:linear-gradient(90deg,#ffd35c,#ffb800); width:0% }
.card .foot{ display:flex; align-items:center; justify-content:space-between; color:var(--muted) }

/* ===================== Grid helpers ===================== */
.grid-2{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:16px; margin-top:14px }
.grid-2 > *{ min-width:0 }

/* ===================== Panel / Table ===================== */
.panel{ background:var(--panel); border:1px solid rgba(255,255,255,.06); border-radius:16px; overflow:hidden }
.panel header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; background:var(--panel-2); border-bottom:1px solid rgba(255,255,255,.06) }
.panel header h3{ display:flex; align-items:center; gap:10px; margin:0 }
.panel:has(>.body){ display:flex; flex-direction:column; min-height:0 }
.panel:has(>.body) > .body{ flex:1; min-height:0; overflow:auto }
.panel.panel-flex{ display:flex; flex-direction:column; min-height:0 }
.panel.panel-flex > .body{ flex:1; min-height:0; overflow:auto }

.list{ padding:10px 0 }
.row{
  display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:10px 16px; border-top:1px solid rgba(255,255,255,.04)
}
.row:first-child{ border-top:none }

.row .label{
  display:flex; align-items:center; gap:10px;
  flex:1 1 auto; min-width:0; white-space:nowrap;
}
.row .label .i{ flex:0 0 28px; width:28px; height:28px; display:inline-grid }
.row .label .muted{
  display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:100%; margin-left:8px;
}
.row .label > span, .row .label > b{ overflow:hidden; text-overflow:ellipsis }
.row .badge{ flex:0 0 auto }

/* 점 아이콘 */
.dot-lg{ width:10px; height:10px; border-radius:999px; background:#7ad1ff; display:inline-block }

/* 표 */
.table{ width:100%; border-collapse:separate; border-spacing:0; font-size:14px }
.table thead th{ position:sticky; top:0; z-index:1; text-align:left; background:var(--panel-2); color:#cfd6ee; padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.08) }
.table tbody td{ padding:12px 14px; border-bottom:1px solid rgba(255,255,255,.05) }
.table tbody tr:hover{ background:rgba(255,255,255,.03) }
.table tbody tr.selected{ outline:2px solid rgba(107,179,255,.35) }
.status-dot{ display:inline-grid; place-items:center; width:22px; height:22px; border-radius:999px }
.status-dot.ok{ background:rgba(57,217,138,.15); border:1px solid rgba(57,217,138,.4); color:var(--ok) }
.status-dot.err{ background:rgba(255,107,107,.12); border:1px solid rgba(255,255,255,.45); color:var(--danger) }

/* ==== Tiny Icon Badges (mask) ==== */
.i{ --icon:none; display:inline-grid; place-items:center; width:28px; height:28px; margin-right:12px; border-radius:10px; background:rgba(255,255,255,.06); outline:1px solid rgba(255,255,255,.08); vertical-align:middle }
.i::before{ content:""; width:16px; height:16px; display:block; background:currentColor; -webkit-mask:var(--icon) no-repeat center / contain; mask:var(--icon) no-repeat center / contain }
.i-thermo{ color:#39d98a; --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M14 14.76V5a2 2 0 10-4 0v9.76A4.5 4.5 0 1014 14.76ZM12 2a3 3 0 013 3v9.59a5.5 5.5 0 11-6 0V5a3 3 0 013-3Zm0 9a1 1 0 011 1v4.5a1 1 0 11-2 0V12a1 1 0 011-1Z"/></svg>') }
.i-gauge{ color:#39d98a; --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M12 4a9 9 0 0 1 9 9h-2a7 7 0 1 0-14 0H3a9 9 0 0 1 9-9Zm6.2 7.4-4.9 1.9a1 1 0 1 1-.6-1.9l4.9-1.9a1 1 0 0 1 .6 1.9Z"/></svg>') }
.i-bolt{ color:#39d98a; --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M13 2 4 14h6l-1 8 9-12h-6l1-8Z"/></svg>') }
.i-wrench{ color:#b199ff; --icon:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23fff" d="M21 7.5a6.5 6.5 0 0 1-8.8 6.1l-6.8 6.8a2 2 0 0 1-2.8-2.8l6.8-6.8A6.5 6.5 0 1 1 21 7.5Zm-4 0a2.5 2.5 0 1 0-5 0a2.5 2.5 0 0 0 5 0Z"/></svg>') }

/* ===================== Tooltips ===================== */
.has-tip{ position:relative }
.has-tip[data-tip]{ --tt-bg: rgba(15,18,32,.96); --tt-bd: rgba(255,255,255,.12) }
.has-tip[data-tip]:hover::after{
  content: attr(data-tip);
  position:absolute; top:100%; right:0; margin-top:8px;
  background:var(--tt-bg); color:#e9ecf6; border:1px solid var(--tt-bd);
  border-radius:10px; padding:10px 12px; width:320px; line-height:1.4; font-weight:500; font-size:13px;
  box-shadow:0 8px 18px rgba(0,0,0,.35); z-index:100; pointer-events:none;
}
.has-tip[data-tip]:hover::before{
  content:""; position:absolute; top:100%; right:14px; margin-top:2px;
  border:8px solid transparent; border-bottom:none; border-top-color:var(--tt-bg);
  filter: drop-shadow(0 -1px 0 var(--tt-bd));
}

/* ===================== Embedded 3D preview ===================== */
.viewer-embed-wrap{ position:relative; height:100%; background:#0f1220 }
.viewer-embed{ width:100%; height:100%; border:0; display:block }
.viewer-embed-overlay{
  position:absolute; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:8px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.35));
  pointer-events:none;
}
.viewer-embed-badge{
  pointer-events:auto; font-size:12px; color:#cfe3ff; background:rgba(107,179,255,.12);
  border:1px solid rgba(107,179,255,.35); border-radius:999px; padding:4px 10px;
}

/* ===================== Executor / Alerts / Logs ===================== */
.executor-grid{
  display:grid; grid-template-rows: 9fr 7fr; gap:16px;
  min-height: calc(100vh - var(--topbar-h) - 120px);
}
.alerts-tools{ display:flex; gap:10px; align-items:center }
.input-wrap{ position:relative; display:flex; align-items:center }
.input-wrap .input{ padding-left:38px }
.input-ico{ position:absolute; left:12px; opacity:.85; pointer-events:none }
.alerts-body{ padding:10px }

.alert-card{
  display:flex; align-items:flex-start; justify-content:space-between;
  gap:14px; padding:14px; border-radius:14px;
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  border:1px solid rgba(255,255,255,.06); margin:10px 6px;
}
.alert-card .alert-left{ min-width:0; flex:1 1 auto }
.alert-card .alert-right{ display:flex; align-items:center; gap:10px }
.alert-card h4.alert-title{ margin:0; font-size:16px }
.alert-head{ display:flex; align-items:center; gap:10px; margin-bottom:6px }
.alert-meta{ display:flex; flex-wrap:wrap; gap:14px; color:#c1cae6; font-size:13px }
.pill{ padding:4px 10px; border-radius:999px; font-size:12px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.06) }
.pill.emph{ border-color:rgba(107,179,255,.35); background:rgba(107,179,255,.12); color:#cfe3ff }
.pill.soft{ border-color:rgba(255,255,255,.16); background:rgba(255,255,255,.07) }
.pill.critical{ background:rgba(255,93,93,.15); border-color:rgba(255,93,93,.35); color:#ffb1b1 }
.pill.warn{ background:rgba(255,217,102,.12); border-color:rgba(255,217,102,.32); color:#ffe6a6 }
.alert-ico{ width:22px; height:22px; border-radius:999px; display:inline-block }
.alert-ico.critical{ background:radial-gradient(circle at 30% 30%, #ffb3b3, #ff5d5d) }
.alert-ico.warning,.alert-ico.warn{ background:radial-gradient(circle at 30% 30%, #ffe9a6, #ffd35c) }

.logs-tools{ display:flex; flex-wrap:wrap; gap:10px; align-items:center }
.file-input{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; padding:8px 10px; border-radius:10px; background:var(--panel); border:1px solid rgba(255,255,255,.1) }
.file-input input{ display:none }
.chk{ display:inline-flex; align-items:center; gap:6px; user-select:none }
.log-body{ background:rgba(0,0,0,.15) }
.log-view{
  margin:0; padding:14px 16px; min-height:220px;
  white-space:pre-wrap; word-break:break-word;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
  font-size:12.5px; line-height:1.5; color:#e5e9f7;
}
mark{ background:var(--mark); color:#141414; border-radius:3px; padding:0 2px }

/* ===================== Decisions (가로 정렬) ===================== */
.decisions-bar{
  display:flex; flex-wrap:wrap; gap:8px 10px; align-items:center;
  border-top:1px solid rgba(255,255,255,.08);
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.01));
  padding:12px 14px; border-radius:14px;
}
.decisions-bar .label{
  font-weight:800; letter-spacing:.04em; text-transform:uppercase; font-size:12px;
  color:#dbe6ff;
  margin-right:6px;
}
.decision-btn{
  background:#2f375c; border:1px solid rgba(255,255,255,.18);
  color:#e9ecf6; border-radius:999px; padding:8px 12px; font-weight:800; cursor:pointer;
}
.decision-btn:hover{ filter:brightness(1.06) }
.decision-btn.warn{ background:#4b3440 }
.decision-btn.ok{ background:#253c36 }
.decision-result{
  margin-top:10px; padding:12px 14px; border-radius:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.12);
}

/* ===================== Prediction UI ===================== */

.pred-section-header{
  display:flex;
  flex-direction:column;
  gap:4px;
  margin-bottom:14px;
}
.pred-section-header h2{
  margin:0;
  font-size:20px;
}
.pred-section-header p{
  margin:0;
  font-size:13px;
}

.prediction-grid{
  display:grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, 1.5fr);
  gap:16px;
  margin-top:10px;
}
.pred-form{
  padding:14px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pred-field-row{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}
.pred-actions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
  margin-top:4px;
}
.pred-actions .btn.link{
  border-style:dashed;
  font-weight:600;
}

/* 예측 결과 카드 */
.pred-outcome{
  padding:14px 16px 16px;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.pred-outcome-main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.pred-outcome-label{
  font-size:18px;
  font-weight:800;
  letter-spacing:.04em;
}
.pred-outcome-sub{
  display:flex;
  align-items:baseline;
  gap:10px;
  margin-top:6px;
  font-size:13px;
}
.prob-value{
  font-size:26px;
  font-weight:800;
}
.pred-outcome-meter{
  margin-top:10px;
}

/* Risk pill */
.pred-risk-pill{
  align-self:flex-start;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.04);
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:120px;
}
.pred-risk-pill .pill-label{
  font-size:11px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--muted);
}
.pred-risk-pill strong{
  font-size:15px;
}
.pred-risk-pill[data-level="low"]{
  border-color:rgba(57,217,138,.45);
  background:rgba(57,217,138,.14);
  color:var(--ok);
}
.pred-risk-pill[data-level="medium"]{
  border-color:rgba(245,197,66,.5);
  background:rgba(245,197,66,.14);
  color:var(--warn);
}
.pred-risk-pill[data-level="high"]{
  border-color:rgba(255,107,107,.6);
  background:rgba(255,107,107,.18);
  color:var(--danger);
}

/* What-if cards */
.whatif-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:16px;
  margin-top:10px;
}
.whatif-card{
  gap:10px;
}
.whatif-head{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
}
.whatif-head h3{
  margin:0;
  font-size:15px;
}
.whatif-head p{
  margin:3px 0 0;
  font-size:12px;
}
.whatif-body{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.whatif-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size:13px;
}

/* Feature importance */
.feature-list{
  padding:10px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.feature-row{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.feature-main{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.feature-label{
  font-size:13px;
}
.feature-pct{
  font-size:13px;
}
.feature-bar{
  width:100%;
  height:6px;
  border-radius:999px;
  background:#0d1020;
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}
.feature-bar span{
  display:block;
  height:100%;
  background:linear-gradient(90deg,#6bb3ff,#ffd6a6);
  width:0%;
}

/* Anomaly */
.anomaly-body{
  padding:10px 14px 14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.anomaly-flag{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.03);
}
.anomaly-dot{
  width:16px;
  height:16px;
  border-radius:999px;
  flex:0 0 auto;
}
.anomaly-title{
  font-size:14px;
  font-weight:700;
  margin-bottom:2px;
}
.anomaly-ok .anomaly-dot{
  background:radial-gradient(circle at 30% 30%, #a8ffd3, #39d98a);
}
.anomaly-warn .anomaly-dot{
  background:radial-gradient(circle at 30% 30%, #ffe9a6, #ffd35c);
}
.anomaly-crit .anomaly-dot{
  background:radial-gradient(circle at 30% 30%, #ffb3b3, #ff5d5d);
}
.anomaly-ok{
  border-color:rgba(57,217,138,.45);
  background:rgba(57,217,138,.12);
}
.anomaly-warn{
  border-color:rgba(245,197,66,.5);
  background:rgba(245,197,66,.12);
}
.anomaly-crit{
  border-color:rgba(255,107,107,.6);
  background:rgba(255,107,107,.16);
}

/* ===================== Scrollbar ===================== */
/* 기본(global) 스크롤바: 메인 컨텐츠는 네이비 */
*::-webkit-scrollbar{ width:10px; height:10px }
*::-webkit-scrollbar-track{ background:#131726 }
*::-webkit-scrollbar-thumb{ background:#2b324e; border:2px solid #131726; border-radius:999px }
*::-webkit-scrollbar-thumb:hover{ background:#3a4366 }
*::-webkit-scrollbar-corner{ background:#131726 }
.panel > .body{ scrollbar-color:#2b324e #131726; scrollbar-width:thin }

/* ✅ 사이드바 전용 스크롤바: 베이지 톤 */
.sidebar::-webkit-scrollbar{ width:8px }
.sidebar::-webkit-scrollbar-track{ background:var(--sb-scroll-track) }
.sidebar::-webkit-scrollbar-thumb{
  background:var(--sb-scroll-thumb);
  border:2px solid var(--sb-scroll-track);
  border-radius:999px;
}
.sidebar::-webkit-scrollbar-thumb:hover{
  background:#D0BDAA;
}

/* ===================== Analysis charts: pastel tone ===================== */
.panel.pastel :is(canvas, svg){ filter:saturate(0.45) brightness(1.06) contrast(0.92) !important }
.panel.pastel :is(.apexcharts-series path,.apexcharts-series rect,.recharts-sector,.recharts-rectangle,.recharts-line-curve){
  opacity:.82 !important; filter:saturate(0.65) !important;
}
.panel.pastel :is(.apexcharts-legend-marker,.legend .swatch,.recharts-default-legend .recharts-legend-item svg){
  opacity:.85 !important; filter:saturate(0.65) !important;
}
:is(#shiftChart,#throughputChart,.chart-shift,.chart-throughput) :is(canvas,svg){
  filter:saturate(0.45) brightness(1.06) contrast(0.92) !important;
}
.panel.pastel .plotly svg,
.panel.pastel .plotly > canvas { filter:saturate(0.45) brightness(1.06) contrast(0.92) !important }
.panel.pastel .plotly .legend,
.panel.pastel .plotly .legendpoints,
.panel.pastel .plotly .traces path,
.panel.pastel .plotly .bars path,
.panel.pastel .plotly .slice path { opacity:.82 !important; filter:saturate(0.65) !important }

/* ===================== Auth (login) ===================== */
.auth-wrap{
  min-height:100vh; display:grid; place-items:center;
  background: radial-gradient(1200px 800px at 15% 10%, rgba(107,179,255,.10), transparent 50%),
              radial-gradient(800px 800px at 85% 90%, rgba(57,217,138,.10), transparent 55%),
              var(--bg);
  padding:24px;
}
.auth-card{
  width:min(560px, 92vw);
  background:var(--panel);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  overflow:hidden;
}
.auth-head{
  display:flex; align-items:center; gap:12px;
  padding:18px 20px; background:var(--panel-2);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.auth-logo{
  width:36px; height:36px; border-radius:10px;
  display:grid; place-items:center;
  background:linear-gradient(135deg,#7bd6ff,#6b8cff);
  color:#0d1220; font-weight:900;
}
.auth-head h1{ margin:0; font-size:18px }
.auth-head p{ margin:0; color:#muted; font-size:13px }
.auth-body{ padding:22px; display:grid; gap:18px }
.auth-foot{
  padding:16px 20px; background:rgba(255,255,255,.03);
  border-top:1px solid rgba(255,255,255,.06); display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between
}
.field{ display:grid; gap:8px }
.field label{ font-size:13px; color:#cfe3ff }
.input, .select{
  background:var(--panel); border:1px solid rgba(255,255,255,.12);
  color:#e9ecf6; border-radius:12px; padding:12px 14px;
  /* ✅ 입력 UI도 Pretendard로 통일 */
  font:600 14px/1 'Pretendard', ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans KR";
  outline:none;
}
.input:focus, .select:focus{ box-shadow: var(--focus); border-color:#6bb3ff }
.actions{ display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between }
.btn{
  background:var(--panel); border:1px solid rgba(255,255,255,.14);
  color:#e9ecf6; border-radius:12px; padding:12px 16px; cursor:pointer; font-weight:800;
}
.btn:hover{ filter:brightness(1.06) }
.btn.primary{ background:#2f375c; border-color:rgba(255,255,255,.2) }
.btn.sso{ background:#253c36; border-color:rgba(57,217,138,.4) }
.btn.link{ background:transparent; border:1px dashed rgba(255,255,255,.18) }
.divider{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:12px; color:var(--muted); font-size:12px }
.divider::before, .divider::after{ content:""; height:1px; background:rgba(255,255,255,.08) }
.alert{ display:none; padding:10px 12px; border-radius:12px; font-size:13px; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.04) }
.alert.show{ display:block }
.alert.err{ border-color:rgba(255,107,107,.35); background:rgba(255,107,107,.15); color:#ffb1b1 }
.alert.ok{ border-color:rgba(57,217,138,.35); background:rgba(57,217,138,.15); color:#b8f3d3 }

/* ===================== Language selector (sidebar) ===================== */
.sidebar-lang{
  margin-top:auto; padding:12px; text-align:center; position:relative;
}
.lang-btn{
  width:100%; background:var(--panel-2); color:var(--text);
  border:1px solid rgba(255,255,255,.1); border-radius:8px;
  padding:8px 0; cursor:pointer; display:grid; place-items:center;
}

/* 드롭다운 박스 */
.lang-menu{
  display:none; list-style:none; padding:0; margin:6px 0 0;
  background:var(--panel-2); border:1px solid rgba(255,255,255,.1); border-radius:8px;
  position:absolute; left:12px; right:12px; /* 버튼 폭과 맞춤 */
  z-index:20;
}
.lang-menu li{
  padding:8px; cursor:pointer; display:grid; place-items:center; /* 국기 중앙 정렬 */
}
.lang-menu li:hover{ background:rgba(255,255,255,.06) }
.lang-menu.active{ display:block }

/* ⬇️ 사이드바 접힘 상태: 버튼도 상단 메뉴처럼 '정사각형 레일'로 통일 */
.layout.collapsed .sidebar-lang{ padding:8px 0 }
.layout.collapsed .sidebar-lang .lang-btn{
  width:var(--rail-size); height:var(--rail-size);
  border-radius:var(--rail-radius); padding:0;
  background:transparent; border:none; position:relative; margin:0 auto;
}
.layout.collapsed .sidebar-lang .lang-btn::before{
  content:""; position:absolute; inset:0;
  background:#2d3556; border-radius:var(--rail-radius);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  opacity:0; transition:opacity .12s ease;
}
.layout.collapsed .sidebar-lang .lang-btn:hover::before,
.layout.collapsed .sidebar-lang .lang-btn.is-open::before{ opacity:1 }

/* 접힘 상태 드롭다운: 버튼 아래에 정사각형 스택 느낌으로 중앙 정렬 */
.layout.collapsed .sidebar-lang .lang-menu{
  left:50%; right:auto; transform:translateX(-50%);
  width:auto; min-width:calc(var(--rail-size) + 8px);
  padding:6px; border-radius:12px;
}
.layout.collapsed .sidebar-lang .lang-menu li{
  padding:6px; border-radius:var(--rail-radius);
}
.layout.collapsed .sidebar-lang .lang-menu li:hover{
  background:#2d3556; outline:1px solid rgba(255,255,255,.06);
}
/* ⬇️ 사이드바 접힘 상태: 버튼 정사각 + z-index 보정 */
.layout.collapsed .sidebar-lang .lang-btn{
  width:var(--rail-size); height:var(--rail-size);
  border-radius:var(--rail-radius); padding:0;
  background:transparent; border:none; margin:0 auto;

  /* ★ 추가: 레이어 최상단으로 (핸들 z=50보다 높게) */
  position: relative;
  z-index: 60;
}

.layout.collapsed .sidebar-lang .lang-btn::before{
  content:""; position:absolute; inset:0;
  background:#2d3556; border-radius:var(--rail-radius);
  box-shadow:0 0 0 1px rgba(255,255,255,.06) inset;
  opacity:0; transition:opacity .12s ease;

  /* ★ 추가: 배경은 국기 뒤로 보내기 */
  z-index: -1;
  pointer-events: none;
}

/* 접힘 상태 드롭다운: 레이어 최상단 보정 */
.layout.collapsed .sidebar-lang .lang-menu{
  left:50%; right:auto; transform:translateX(-50%);
  width:auto; min-width:calc(var(--rail-size) + 8px);
  padding:6px; border-radius:12px;

  /* ★ 추가: 어떤 요소에도 가리지 않게 */
  z-index: 1000;
}


/* ===================== Responsive ===================== */
@media (max-width:1200px){
  .cards{ grid-template-columns:repeat(2, minmax(0,1fr)) }
  .chips{ grid-template-columns:repeat(2,1fr) }
  .grid-2{ grid-template-columns:1fr }
  .executor-grid{ grid-template-rows: 1fr 1fr }
  .prediction-grid{
    grid-template-columns:1fr;
  }
  .whatif-grid{
    grid-template-columns:repeat(2, minmax(0,1fr));
  }
}
@media (max-width:920px){
  .layout{ grid-template-columns:1fr }
  .sidebar{ position:static; height:auto }
  .topbar{ left:0; right:0 }
  .main{ padding: calc(var(--topbar-h, 96px) + 16px) 16px 24px 16px !important }
  .whatif-grid{
    grid-template-columns:1fr;
  }
}