/* =========================================================
   STATER OS - FINAL CLEAN CSS (single source of truth)
   - 색/가독성/분리감 확실
   - 테마 영향 최소화 (#stater-os 내부만)
   - 과도한 !important 남발 X (필요한 곳만 사용)
   ========================================================= */

:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;

  --line:rgba(15,23,42,.10);
  --line2:rgba(15,23,42,.08);

  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow2:0 6px 18px rgba(15,23,42,.06);

  --r:18px;
  --r2:14px;

  --primary:#2563eb;
  --primary-bg:#eef2ff;
  --primary-bd:#c7d2fe;

  --ok-bg:#dcfce7; --ok-bd:#bbf7d0; --ok-tx:#166534;
  --warn-bg:#ffedd5; --warn-bd:#fed7aa; --warn-tx:#9a3412;
  --danger-bg:#fee2e2; --danger-bd:#fecaca; --danger-tx:#991b1b;
  --info-bg:#e0f2fe; --info-bd:#bae6fd; --info-tx:#075985;
}

/* ===== Root layout ===== */
#stater-os.stater-os{
  display:flex;
  gap:24px;
  padding:24px;
  min-height: calc(100vh - 120px);
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
}

/* 테마/플러그인이 글자 흐리게 만드는 케이스 방지 */
#stater-os, #stater-os *{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  opacity:1 !important;
}

/* ===== Sidebar ===== */
#stater-os .os-sidebar{
  width:280px;
  flex:0 0 280px;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}

/* ===== Main ===== */
#stater-os .os-main{
  flex:1 1 auto;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:22px 24px;
  box-shadow:var(--shadow);
}

/* ===== Sidebar header ===== */
#stater-os .os-logo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b1220;
  color:#fff;
  font-weight:900;
}

#stater-os .os-brand-title{
  font-weight:950;
  letter-spacing:-0.01em;
}

#stater-os .os-brand-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

/* ===== Sidebar nav ===== */
#stater-os .os-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 6px;
}

#stater-os .os-nav-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;

  padding:12px 12px;
  border-radius:16px;

  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  cursor:pointer;
  text-align:left;

  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

#stater-os .os-nav-item:hover{
  background:#f8fafc;
  border-color:rgba(37,99,235,.18);
}

#stater-os .os-nav-item.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

#stater-os .os-nav-ico{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:14px;
}

#stater-os .os-nav-item.is-active .os-nav-ico{
  border-color:rgba(37,99,235,.45);
  color:var(--primary);
}

#stater-os .os-nav-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  line-height:1.15;
}

#stater-os .os-nav-title{
  font-weight:950;
  margin:0;
  padding:0;
  color:var(--text);
}

#stater-os .os-nav-sub{
  margin:0;
  padding:0;
  font-size:12px;
  color:var(--muted);
  opacity:1 !important;  /* “안보임” 방지 */
}

/* ===== Site switcher ===== */
#stater-os .os-sitebox{
  margin-top:10px;
  padding:14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

#stater-os .os-sitebox-label{
  font-size:12px;
  color:var(--muted);
}

#stater-os .os-sitebox-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}

#stater-os .os-sitebox-value{
  font-weight:950;
}

#stater-os .os-site-select{
  border:1px solid rgba(15,23,42,.16);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  color:var(--text);
}

/* ===== Topbar ===== */
#stater-os .os-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:4px 0 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-page-title{
  font-size:20px;
  font-weight:950;
  letter-spacing:-0.02em;
}

#stater-os .os-page-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

#stater-os .os-search{
  display:flex;
  align-items:center;
}

#stater-os .os-search-input{
  width:min(360px, 52vw);
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--text);
}

#stater-os .os-search-input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

#stater-os .os-search-input::placeholder{
  color:#94a3b8;
}

/* ===== Page spacing ===== */
#stater-os .os-page{ padding:14px 0 0; }

/* ===== Headline (dashboard) ===== */
#stater-os .os-headline{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow2);
  margin-bottom:14px;
}

#stater-os .os-headline-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}

#stater-os .os-headline-badge.is-ok{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-headline-badge.is-warn{ background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-tx); }
#stater-os .os-headline-badge.is-danger{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }
#stater-os .os-headline-text{ font-weight:950; }

/* ===== Chips ===== */
#stater-os .os-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 0;
}

#stater-os .os-chip-btn{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  color:var(--text) !important;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#stater-os .os-chip-btn:hover{
  background:#f8fafc;
}

#stater-os .os-chip-btn.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  color:var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

/* ===== Section head ===== */
#stater-os .os-section{ margin-top:12px; }

#stater-os .os-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#stater-os .os-section-title{
  font-weight:950;
}

/* ===== Tabs ===== */
#stater-os .os-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 0;
}

#stater-os .os-tab{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  color:var(--text);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#stater-os .os-tab:hover{
  background:#f8fafc;
}

#stater-os .os-tab.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  color:var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

/* ===== Buttons ===== */
#stater-os .os-btn{
  border:0;
  background:#111827;
  color:#fff;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
  font-weight:950;
}

#stater-os .os-btn:hover{ opacity:.92; }

#stater-os .os-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

#stater-os .os-btn-ghost{
  background:#fff;
  color:#111827;
  border:1px solid rgba(15,23,42,.16);
}

#stater-os .os-btn-ghost:hover{
  background:#f8fafc;
}

/* ===== Cards ===== */
#stater-os .os-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:10px 0 6px;
}

@media (max-width: 1100px){
  #stater-os .os-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  #stater-os .os-cards{ grid-template-columns: 1fr; }
}

#stater-os .os-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(15,23,42,.12);
  margin-bottom:12px;
}

#stater-os .os-card-title{ font-weight:950; }

#stater-os .os-card-note{
  font-size:12px;
  color:var(--muted);
  margin:10px 0 12px;
}

/* Metrics */
#stater-os .os-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

#stater-os .os-metric{
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.10);
  padding:12px;
}

#stater-os .os-metric-k{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

#stater-os .os-metric-v{
  margin-top:6px;
  font-weight:950;
  font-size:20px;
  color:var(--text);
}

/* Badges */
#stater-os .os-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}

#stater-os .os-ok{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-warn{ background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-tx); }
#stater-os .os-danger{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }
#stater-os .os-info{ background:var(--info-bg); border-color:var(--info-bd); color:var(--info-tx); }

/* ===== Table ===== */
#stater-os .os-table{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-thead,
#stater-os .os-tr{
  display:grid;
  grid-template-columns: 1.6fr 0.5fr 0.7fr 0.8fr 0.4fr;
}

#stater-os .os-thead{
  background:#f8fafc;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-th,
#stater-os .os-td{
  padding:12px 14px;
  font-size:13px;
}

#stater-os .os-th{
  font-weight:950;
  color:#334155;
}

#stater-os .os-tr{
  border-bottom:1px solid rgba(15,23,42,.06);
}

#stater-os .os-tr:last-child{
  border-bottom:0;
}

#stater-os .os-row-title{ font-weight:950; }
#stater-os .os-row-sub{ margin-top:4px; font-size:12px; color:var(--muted); }

#stater-os .os-link{
  font-weight:950;
  color:var(--primary);
  text-decoration:none;
}
#stater-os .os-link:hover{ text-decoration:underline; }

/* Pills */
#stater-os .os-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}
#stater-os .os-pill-대기{ background:#f1f5f9; }
#stater-os .os-pill-진행{ background:var(--info-bg); border-color:var(--info-bd); color:var(--info-tx); }
#stater-os .os-pill-완료{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-pill-미이행{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }

/* ===== Panels / Empty / Error ===== */
#stater-os .os-panel{
  padding:16px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-panel-muted{
  background:#f8fafc;
  color:#334155;
}

#stater-os .os-panel-danger{
  border-color:rgba(185,28,28,.25);
  background:#fff;
}

#stater-os .os-panel-title{ font-weight:950; }
#stater-os .os-panel-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-empty{
  padding:18px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow2);
  margin-top:14px;
}

#stater-os .os-empty-title{ font-weight:950; }
#stater-os .os-empty-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-error{
  margin-top:10px;
  white-space:pre-wrap;
  font-size:12px;
  background:#0b1220;
  color:#fff;
  padding:10px;
  border-radius:12px;
}

/* ===== Chart ===== */
#stater-os .os-chart-card{
  margin-top:14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-chart-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}

#stater-os .os-chart-title{ font-weight:950; }
#stater-os .os-chart-sub{ font-size:12px; color:var(--muted); }

#stater-os .os-bars{
  display:flex;
  gap:10px;
  align-items:flex-end;
  height:170px;
  margin-top:12px;
  padding:10px 4px 0;
  border-top:1px dashed rgba(15,23,42,.12);
}

#stater-os .os-bar{ width:44px; display:flex; flex-direction:column; align-items:center; gap:6px; }

#stater-os .os-bar-col{
  width:100%;
  height:120px;
  display:flex;
  align-items:flex-end;
  border-radius:12px;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,.10);
  overflow:hidden;
}

#stater-os .os-bar-fill{
  width:100%;
  background:#22c55e;
  border-radius:12px;
}

#stater-os .os-bar-label{ font-size:12px; color:var(--muted); }
#stater-os .os-bar-val{ font-size:12px; font-weight:950; }

/* ===== Modal ===== */
#stater-os .os-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

#stater-os .os-modal{
  width:min(720px, 96vw);
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  padding:18px;
}

#stater-os .os-modal-head{
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-modal-title{ font-weight:950; font-size:18px; }
#stater-os .os-modal-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-form{
  padding:14px 6px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#stater-os .os-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

#stater-os .os-label{
  font-size:12px;
  font-weight:950;
  color:#334155;
  margin-top:2px;
}

#stater-os .os-input{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--text);
}

#stater-os .os-input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

#stater-os .os-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:8px;
}

#stater-os .os-modal-error{
  color:#b91c1c;
  font-size:12px;
  font-weight:900;
  min-height:16px;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  #stater-os.stater-os{ flex-direction:column; }
  #stater-os .os-sidebar{ width:100%; flex:0 0 auto; }
  #stater-os .os-thead,
  #stater-os .os-tr{
    grid-template-columns: 1.2fr 0.6fr 0.7fr 0.8fr 0.5fr;
  }
}

@media (max-width: 720px){
  #stater-os .os-form-grid{ grid-template-columns:1fr; }
}
/* ===== HARD LOCK: nav icon color never white ===== */
#stater-os .os-nav-item,
#stater-os .os-nav-item *{ color: var(--text) !important; }

#stater-os .os-nav-item.is-active,
#stater-os .os-nav-item.is-active *{ color: var(--primary) !important; }

/* 아이콘 박스는 기본 텍스트색 유지 + 활성화만 primary */
#stater-os .os-nav-ico{ color: var(--text) !important; }
#stater-os .os-nav-item.is-active .os-nav-ico{ color: var(--primary) !important; }
/* Site switcher: 드롭다운만 보이게 */
#stater-os .os-sitebox-value{ display:none !important; }
#stater-os .os-sitebox-row{ justify-content:flex-start; }
#stater-os .os-site-select{ width:100%; }
/* ✅ MODAL FIX: overlay가 body에 붙기 때문에(#stater-os 밖) 전역으로 스타일 적용 */
.os-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

.os-modal{
  width:min(720px, 96vw);
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  padding:18px;
}

.os-modal-head{
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.os-modal-title{ font-weight:950; font-size:18px; }
.os-modal-sub{ margin-top:6px; font-size:12px; color:#64748b; }

.os-form{
  padding:14px 6px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.os-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.os-label{
  font-size:12px;
  font-weight:950;
  color:#334155;
  margin-top:2px;
}

.os-input{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:#0f172a;
}

.os-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:8px;
}

.os-modal-error{
  color:#b91c1c;
  font-size:12px;
  font-weight:900;
  min-height:16px;
}

@media (max-width: 720px){
  .os-form-grid{ grid-template-columns:1fr; }
}
/* ===== STATER: 현장 선택 글자 잘림 강제 해제(범용) ===== */
select,
select option {
  white-space: normal !important;
}

.stater-site-select *,
.site-select *,
[class*="site"] select,
[class*="site"] * {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* 혹시 버튼/디브로 만든 커스텀 드롭다운이면 이것도 */
[class*="select"] *,
[class*="dropdown"] *,
[class*="combo"] * {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
}


/* ===== 파일 최하단에 추가 ===== */

/* ===================================================


/* ===== STATER OS Panel UI v2 (SmartStore-like) ===== */
/* =========================================================
   STATER OS - FINAL CLEAN CSS (single source of truth)
   - 색/가독성/분리감 확실
   - 테마 영향 최소화 (#stater-os 내부만)
   - 과도한 !important 남발 X (필요한 곳만 사용)
   ========================================================= */

:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;

  --line:rgba(15,23,42,.10);
  --line2:rgba(15,23,42,.08);

  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow2:0 6px 18px rgba(15,23,42,.06);

  --r:18px;
  --r2:14px;

  --primary:#2563eb;
  --primary-bg:#eef2ff;
  --primary-bd:#c7d2fe;

  --ok-bg:#dcfce7; --ok-bd:#bbf7d0; --ok-tx:#166534;
  --warn-bg:#ffedd5; --warn-bd:#fed7aa; --warn-tx:#9a3412;
  --danger-bg:#fee2e2; --danger-bd:#fecaca; --danger-tx:#991b1b;
  --info-bg:#e0f2fe; --info-bd:#bae6fd; --info-tx:#075985;
}

/* ===== Root layout ===== */
#stater-os.stater-os{
  display:flex;
  gap:24px;
  padding:24px;
  min-height: calc(100vh - 120px);
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
}

/* 테마/플러그인이 글자 흐리게 만드는 케이스 방지 */
#stater-os, #stater-os *{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  opacity:1 !important;
}

/* ===== Sidebar ===== */
#stater-os .os-sidebar{
  width:280px;
  flex:0 0 280px;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}

/* ===== Main ===== */
#stater-os .os-main{
  flex:1 1 auto;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:22px 24px;
  box-shadow:var(--shadow);
}

/* ===== Sidebar header ===== */
#stater-os .os-logo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b1220;
  color:#fff;
  font-weight:900;
}

#stater-os .os-brand-title{
  font-weight:950;
  letter-spacing:-0.01em;
}

#stater-os .os-brand-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

/* ===== Sidebar nav ===== */
#stater-os .os-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 6px;
}

#stater-os .os-nav-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;

  padding:12px 12px;
  border-radius:16px;

  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  cursor:pointer;
  text-align:left;

  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

#stater-os .os-nav-item:hover{
  background:#f8fafc;
  border-color:rgba(37,99,235,.18);
}

#stater-os .os-nav-item.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

#stater-os .os-nav-ico{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:14px;
}

#stater-os .os-nav-item.is-active .os-nav-ico{
  border-color:rgba(37,99,235,.45);
  color:var(--primary);
}

#stater-os .os-nav-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  line-height:1.15;
}

#stater-os .os-nav-title{
  font-weight:950;
  margin:0;
  padding:0;
  color:var(--text);
}

#stater-os .os-nav-sub{
  margin:0;
  padding:0;
  font-size:12px;
  color:var(--muted);
  opacity:1 !important;  /* “안보임” 방지 */
}

/* ===== Site switcher ===== */
#stater-os .os-sitebox{
  margin-top:10px;
  padding:14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

#stater-os .os-sitebox-label{
  font-size:12px;
  color:var(--muted);
}

#stater-os .os-sitebox-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}

#stater-os .os-sitebox-value{
  font-weight:950;
}

#stater-os .os-site-select{
  border:1px solid rgba(15,23,42,.16);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  color:var(--text);
}

/* ===== Topbar ===== */
#stater-os .os-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:4px 0 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-page-title{
  font-size:20px;
  font-weight:950;
  letter-spacing:-0.02em;
}

#stater-os .os-page-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

#stater-os .os-search{
  display:flex;
  align-items:center;
}

#stater-os .os-search-input{
  width:min(360px, 52vw);
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--text);
}

#stater-os .os-search-input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

#stater-os .os-search-input::placeholder{
  color:#94a3b8;
}

/* ===== Page spacing ===== */
#stater-os .os-page{ padding:14px 0 0; }

/* ===== Headline (dashboard) ===== */
#stater-os .os-headline{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow2);
  margin-bottom:14px;
}

#stater-os .os-headline-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}

#stater-os .os-headline-badge.is-ok{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-headline-badge.is-warn{ background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-tx); }
#stater-os .os-headline-badge.is-danger{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }
#stater-os .os-headline-text{ font-weight:950; }

/* ===== Chips ===== */
#stater-os .os-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 0;
}

#stater-os .os-chip-btn{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  color:var(--text) !important;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#stater-os .os-chip-btn:hover{
  background:#f8fafc;
}

#stater-os .os-chip-btn.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  color:var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

/* ===== Section head ===== */
#stater-os .os-section{ margin-top:12px; }

#stater-os .os-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#stater-os .os-section-title{
  font-weight:950;
}

/* ===== Tabs ===== */
#stater-os .os-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 0;
}

#stater-os .os-tab{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  color:var(--text);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#stater-os .os-tab:hover{
  background:#f8fafc;
}

#stater-os .os-tab.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  color:var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

/* ===== Buttons ===== */
#stater-os .os-btn{
  border:0;
  background:#111827;
  color:#fff;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
  font-weight:950;
}

#stater-os .os-btn:hover{ opacity:.92; }

#stater-os .os-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

#stater-os .os-btn-ghost{
  background:#fff;
  color:#111827;
  border:1px solid rgba(15,23,42,.16);
}

#stater-os .os-btn-ghost:hover{
  background:#f8fafc;
}

/* ===== Cards ===== */
#stater-os .os-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:10px 0 6px;
}

@media (max-width: 1100px){
  #stater-os .os-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  #stater-os .os-cards{ grid-template-columns: 1fr; }
}

#stater-os .os-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(15,23,42,.12);
  margin-bottom:12px;
}

#stater-os .os-card-title{ font-weight:950; }

#stater-os .os-card-note{
  font-size:12px;
  color:var(--muted);
  margin:10px 0 12px;
}

/* Metrics */
#stater-os .os-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

#stater-os .os-metric{
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.10);
  padding:12px;
}

#stater-os .os-metric-k{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

#stater-os .os-metric-v{
  margin-top:6px;
  font-weight:950;
  font-size:20px;
  color:var(--text);
}

/* Badges */
#stater-os .os-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}

#stater-os .os-ok{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-warn{ background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-tx); }
#stater-os .os-danger{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }
#stater-os .os-info{ background:var(--info-bg); border-color:var(--info-bd); color:var(--info-tx); }

/* ===== Table ===== */
#stater-os .os-table{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-thead,
#stater-os .os-tr{
  display:grid;
  grid-template-columns: 1.6fr 0.5fr 0.7fr 0.8fr 0.4fr;
}

#stater-os .os-thead{
  background:#f8fafc;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-th,
#stater-os .os-td{
  padding:12px 14px;
  font-size:13px;
}

#stater-os .os-th{
  font-weight:950;
  color:#334155;
}

#stater-os .os-tr{
  border-bottom:1px solid rgba(15,23,42,.06);
}

#stater-os .os-tr:last-child{
  border-bottom:0;
}

#stater-os .os-row-title{ font-weight:950; }
#stater-os .os-row-sub{ margin-top:4px; font-size:12px; color:var(--muted); }

#stater-os .os-link{
  font-weight:950;
  color:var(--primary);
  text-decoration:none;
}
#stater-os .os-link:hover{ text-decoration:underline; }

/* Pills */
#stater-os .os-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}
#stater-os .os-pill-대기{ background:#f1f5f9; }
#stater-os .os-pill-진행{ background:var(--info-bg); border-color:var(--info-bd); color:var(--info-tx); }
#stater-os .os-pill-완료{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-pill-미이행{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }

/* ===== Panels / Empty / Error ===== */
#stater-os .os-panel{
  padding:16px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-panel-muted{
  background:#f8fafc;
  color:#334155;
}

#stater-os .os-panel-danger{
  border-color:rgba(185,28,28,.25);
  background:#fff;
}

#stater-os .os-panel-title{ font-weight:950; }
#stater-os .os-panel-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-empty{
  padding:18px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow2);
  margin-top:14px;
}

#stater-os .os-empty-title{ font-weight:950; }
#stater-os .os-empty-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-error{
  margin-top:10px;
  white-space:pre-wrap;
  font-size:12px;
  background:#0b1220;
  color:#fff;
  padding:10px;
  border-radius:12px;
}

/* ===== Chart ===== */
#stater-os .os-chart-card{
  margin-top:14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-chart-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}

#stater-os .os-chart-title{ font-weight:950; }
#stater-os .os-chart-sub{ font-size:12px; color:var(--muted); }

#stater-os .os-bars{
  display:flex;
  gap:10px;
  align-items:flex-end;
  height:170px;
  margin-top:12px;
  padding:10px 4px 0;
  border-top:1px dashed rgba(15,23,42,.12);
}

#stater-os .os-bar{ width:44px; display:flex; flex-direction:column; align-items:center; gap:6px; }

#stater-os .os-bar-col{
  width:100%;
  height:120px;
  display:flex;
  align-items:flex-end;
  border-radius:12px;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,.10);
  overflow:hidden;
}

#stater-os .os-bar-fill{
  width:100%;
  background:#22c55e;
  border-radius:12px;
}

#stater-os .os-bar-label{ font-size:12px; color:var(--muted); }
#stater-os .os-bar-val{ font-size:12px; font-weight:950; }

/* ===== Modal ===== */
#stater-os .os-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

#stater-os .os-modal{
  width:min(720px, 96vw);
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  padding:18px;
}

#stater-os .os-modal-head{
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-modal-title{ font-weight:950; font-size:18px; }
#stater-os .os-modal-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-form{
  padding:14px 6px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#stater-os .os-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

#stater-os .os-label{
  font-size:12px;
  font-weight:950;
  color:#334155;
  margin-top:2px;
}

#stater-os .os-input{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--text);
}

#stater-os .os-input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

#stater-os .os-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:8px;
}

#stater-os .os-modal-error{
  color:#b91c1c;
  font-size:12px;
  font-weight:900;
  min-height:16px;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  #stater-os.stater-os{ flex-direction:column; }
  #stater-os .os-sidebar{ width:100%; flex:0 0 auto; }
  #stater-os .os-thead,
  #stater-os .os-tr{
    grid-template-columns: 1.2fr 0.6fr 0.7fr 0.8fr 0.5fr;
  }
}

@media (max-width: 720px){
  #stater-os .os-form-grid{ grid-template-columns:1fr; }
}
/* ===== HARD LOCK: nav icon color never white ===== */
#stater-os .os-nav-item,
#stater-os .os-nav-item *{ color: var(--text) !important; }

#stater-os .os-nav-item.is-active,
#stater-os .os-nav-item.is-active *{ color: var(--primary) !important; }

/* 아이콘 박스는 기본 텍스트색 유지 + 활성화만 primary */
#stater-os .os-nav-ico{ color: var(--text) !important; }
#stater-os .os-nav-item.is-active .os-nav-ico{ color: var(--primary) !important; }
/* Site switcher: 드롭다운만 보이게 */
#stater-os .os-sitebox-value{ display:none !important; }
#stater-os .os-sitebox-row{ justify-content:flex-start; }
#stater-os .os-site-select{ width:100%; }
/* ✅ MODAL FIX: overlay가 body에 붙기 때문에(#stater-os 밖) 전역으로 스타일 적용 */
.os-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

.os-modal{
  width:min(720px, 96vw);
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  padding:18px;
}

.os-modal-head{
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.os-modal-title{ font-weight:950; font-size:18px; }
.os-modal-sub{ margin-top:6px; font-size:12px; color:#64748b; }

.os-form{
  padding:14px 6px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.os-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.os-label{
  font-size:12px;
  font-weight:950;
  color:#334155;
  margin-top:2px;
}

.os-input{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:#0f172a;
}

.os-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:8px;
}

.os-modal-error{
  color:#b91c1c;
  font-size:12px;
  font-weight:900;
  min-height:16px;
}

@media (max-width: 720px){
  .os-form-grid{ grid-template-columns:1fr; }
}
/* ===== STATER: 현장 선택 글자 잘림 강제 해제(범용) ===== */
select,
select option {
  white-space: normal !important;
}

.stater-site-select *,
.site-select *,
[class*="site"] select,
[class*="site"] * {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* 혹시 버튼/디브로 만든 커스텀 드롭다운이면 이것도 */
[class*="select"] *,
[class*="dropdown"] *,
[class*="combo"] * {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
}


/* ===== 파일 최하단에 추가 ===== */

/* =========================================================
   STATER OS - FINAL CLEAN CSS (single source of truth)
   - 색/가독성/분리감 확실
   - 테마 영향 최소화 (#stater-os 내부만)
   - 과도한 !important 남발 X (필요한 곳만 사용)
   ========================================================= */

:root{
  --bg:#f5f7fb;
  --panel:#ffffff;
  --text:#0f172a;
  --muted:#64748b;

  --line:rgba(15,23,42,.10);
  --line2:rgba(15,23,42,.08);

  --shadow:0 10px 30px rgba(15,23,42,.06);
  --shadow2:0 6px 18px rgba(15,23,42,.06);

  --r:18px;
  --r2:14px;

  --primary:#2563eb;
  --primary-bg:#eef2ff;
  --primary-bd:#c7d2fe;

  --ok-bg:#dcfce7; --ok-bd:#bbf7d0; --ok-tx:#166534;
  --warn-bg:#ffedd5; --warn-bd:#fed7aa; --warn-tx:#9a3412;
  --danger-bg:#fee2e2; --danger-bd:#fecaca; --danger-tx:#991b1b;
  --info-bg:#e0f2fe; --info-bd:#bae6fd; --info-tx:#075985;
}

/* ===== Root layout ===== */
#stater-os.stater-os{
  display:flex;
  gap:24px;
  padding:24px;
  min-height: calc(100vh - 120px);
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", sans-serif;
}

/* 테마/플러그인이 글자 흐리게 만드는 케이스 방지 */
#stater-os, #stater-os *{
  text-shadow:none !important;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  opacity:1 !important;
}

/* ===== Sidebar ===== */
#stater-os .os-sidebar{
  width:280px;
  flex:0 0 280px;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:18px;
  box-shadow:var(--shadow);
}

/* ===== Main ===== */
#stater-os .os-main{
  flex:1 1 auto;
  min-width:0;
  background:var(--panel);
  border:1px solid var(--line2);
  border-radius:var(--r);
  padding:22px 24px;
  box-shadow:var(--shadow);
}

/* ===== Sidebar header ===== */
#stater-os .os-logo{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 8px 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-mark{
  width:40px;
  height:40px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#0b1220;
  color:#fff;
  font-weight:900;
}

#stater-os .os-brand-title{
  font-weight:950;
  letter-spacing:-0.01em;
}

#stater-os .os-brand-sub{
  margin-top:2px;
  font-size:12px;
  color:var(--muted);
}

/* ===== Sidebar nav ===== */
#stater-os .os-nav{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:14px 6px;
}

#stater-os .os-nav-item{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;

  padding:12px 12px;
  border-radius:16px;

  background:#fff;
  border:1px solid rgba(15,23,42,.06);
  cursor:pointer;
  text-align:left;

  transition:background .12s ease, border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}

#stater-os .os-nav-item:hover{
  background:#f8fafc;
  border-color:rgba(37,99,235,.18);
}

#stater-os .os-nav-item.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

#stater-os .os-nav-ico{
  width:38px;
  height:38px;
  flex:0 0 38px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(15,23,42,.10);
  font-size:14px;
}

#stater-os .os-nav-item.is-active .os-nav-ico{
  border-color:rgba(37,99,235,.45);
  color:var(--primary);
}

#stater-os .os-nav-text{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  line-height:1.15;
}

#stater-os .os-nav-title{
  font-weight:950;
  margin:0;
  padding:0;
  color:var(--text);
}

#stater-os .os-nav-sub{
  margin:0;
  padding:0;
  font-size:12px;
  color:var(--muted);
  opacity:1 !important;  /* “안보임” 방지 */
}

/* ===== Site switcher ===== */
#stater-os .os-sitebox{
  margin-top:10px;
  padding:14px;
  border-radius:16px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.08);
}

#stater-os .os-sitebox-label{
  font-size:12px;
  color:var(--muted);
}

#stater-os .os-sitebox-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:8px;
}

#stater-os .os-sitebox-value{
  font-weight:950;
}

#stater-os .os-site-select{
  border:1px solid rgba(15,23,42,.16);
  background:#fff;
  border-radius:12px;
  padding:8px 10px;
  font-size:12px;
  color:var(--text);
}

/* ===== Topbar ===== */
#stater-os .os-topbar{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  padding:4px 0 16px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-page-title{
  font-size:20px;
  font-weight:950;
  letter-spacing:-0.02em;
}

#stater-os .os-page-sub{
  margin-top:4px;
  font-size:12px;
  color:var(--muted);
}

#stater-os .os-search{
  display:flex;
  align-items:center;
}

#stater-os .os-search-input{
  width:min(360px, 52vw);
  border:1px solid rgba(15,23,42,.12);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--text);
}

#stater-os .os-search-input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

#stater-os .os-search-input::placeholder{
  color:#94a3b8;
}

/* ===== Page spacing ===== */
#stater-os .os-page{ padding:14px 0 0; }

/* ===== Headline (dashboard) ===== */
#stater-os .os-headline{
  display:flex;
  align-items:center;
  gap:10px;
  padding:12px 14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:16px;
  background:#fff;
  box-shadow:var(--shadow2);
  margin-bottom:14px;
}

#stater-os .os-headline-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}

#stater-os .os-headline-badge.is-ok{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-headline-badge.is-warn{ background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-tx); }
#stater-os .os-headline-badge.is-danger{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }
#stater-os .os-headline-text{ font-weight:950; }

/* ===== Chips ===== */
#stater-os .os-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:14px 0;
}

#stater-os .os-chip-btn{
  appearance:none;
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:8px 12px;
  border-radius:999px;
  font-size:13px;
  font-weight:900;
  cursor:pointer;
  color:var(--text) !important;
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#stater-os .os-chip-btn:hover{
  background:#f8fafc;
}

#stater-os .os-chip-btn.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  color:var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

/* ===== Section head ===== */
#stater-os .os-section{ margin-top:12px; }

#stater-os .os-section-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

#stater-os .os-section-title{
  font-weight:950;
}

/* ===== Tabs ===== */
#stater-os .os-tabs{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding:10px 0;
}

#stater-os .os-tab{
  border:1px solid rgba(15,23,42,.12);
  background:#fff;
  padding:9px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:12px;
  font-weight:900;
  color:var(--text);
  transition: background .12s ease, border-color .12s ease, box-shadow .12s ease;
}

#stater-os .os-tab:hover{
  background:#f8fafc;
}

#stater-os .os-tab.is-active{
  background:var(--primary-bg);
  border-color:rgba(37,99,235,.25);
  color:var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.08);
}

/* ===== Buttons ===== */
#stater-os .os-btn{
  border:0;
  background:#111827;
  color:#fff;
  padding:9px 12px;
  border-radius:12px;
  cursor:pointer;
  font-size:12px;
  font-weight:950;
}

#stater-os .os-btn:hover{ opacity:.92; }

#stater-os .os-btn:disabled{
  opacity:.6;
  cursor:not-allowed;
}

#stater-os .os-btn-ghost{
  background:#fff;
  color:#111827;
  border:1px solid rgba(15,23,42,.16);
}

#stater-os .os-btn-ghost:hover{
  background:#f8fafc;
}

/* ===== Cards ===== */
#stater-os .os-cards{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:14px;
  padding:10px 0 6px;
}

@media (max-width: 1100px){
  #stater-os .os-cards{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px){
  #stater-os .os-cards{ grid-template-columns: 1fr; }
}

#stater-os .os-card{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding-bottom:10px;
  border-bottom:1px dashed rgba(15,23,42,.12);
  margin-bottom:12px;
}

#stater-os .os-card-title{ font-weight:950; }

#stater-os .os-card-note{
  font-size:12px;
  color:var(--muted);
  margin:10px 0 12px;
}

/* Metrics */
#stater-os .os-metrics{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:10px;
}

#stater-os .os-metric{
  border-radius:14px;
  background:#f8fafc;
  border:1px solid rgba(15,23,42,.10);
  padding:12px;
}

#stater-os .os-metric-k{
  font-size:12px;
  color:var(--muted);
  font-weight:800;
}

#stater-os .os-metric-v{
  margin-top:6px;
  font-weight:950;
  font-size:20px;
  color:var(--text);
}

/* Badges */
#stater-os .os-badge{
  font-size:12px;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}

#stater-os .os-ok{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-warn{ background:var(--warn-bg); border-color:var(--warn-bd); color:var(--warn-tx); }
#stater-os .os-danger{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }
#stater-os .os-info{ background:var(--info-bg); border-color:var(--info-bd); color:var(--info-tx); }

/* ===== Table ===== */
#stater-os .os-table{
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-thead,
#stater-os .os-tr{
  display:grid;
  grid-template-columns: 1.6fr 0.5fr 0.7fr 0.8fr 0.4fr;
}

#stater-os .os-thead{
  background:#f8fafc;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-th,
#stater-os .os-td{
  padding:12px 14px;
  font-size:13px;
}

#stater-os .os-th{
  font-weight:950;
  color:#334155;
}

#stater-os .os-tr{
  border-bottom:1px solid rgba(15,23,42,.06);
}

#stater-os .os-tr:last-child{
  border-bottom:0;
}

#stater-os .os-row-title{ font-weight:950; }
#stater-os .os-row-sub{ margin-top:4px; font-size:12px; color:var(--muted); }

#stater-os .os-link{
  font-weight:950;
  color:var(--primary);
  text-decoration:none;
}
#stater-os .os-link:hover{ text-decoration:underline; }

/* Pills */
#stater-os .os-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:6px 10px;
  border-radius:999px;
  font-size:12px;
  border:1px solid rgba(15,23,42,.10);
  background:#fff;
  font-weight:950;
}
#stater-os .os-pill-대기{ background:#f1f5f9; }
#stater-os .os-pill-진행{ background:var(--info-bg); border-color:var(--info-bd); color:var(--info-tx); }
#stater-os .os-pill-완료{ background:var(--ok-bg); border-color:var(--ok-bd); color:var(--ok-tx); }
#stater-os .os-pill-미이행{ background:var(--danger-bg); border-color:var(--danger-bd); color:var(--danger-tx); }

/* ===== Panels / Empty / Error ===== */
#stater-os .os-panel{
  padding:16px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-panel-muted{
  background:#f8fafc;
  color:#334155;
}

#stater-os .os-panel-danger{
  border-color:rgba(185,28,28,.25);
  background:#fff;
}

#stater-os .os-panel-title{ font-weight:950; }
#stater-os .os-panel-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-empty{
  padding:18px;
  border:1px solid rgba(15,23,42,.12);
  border-radius:var(--r);
  background:#fff;
  box-shadow:var(--shadow2);
  margin-top:14px;
}

#stater-os .os-empty-title{ font-weight:950; }
#stater-os .os-empty-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-error{
  margin-top:10px;
  white-space:pre-wrap;
  font-size:12px;
  background:#0b1220;
  color:#fff;
  padding:10px;
  border-radius:12px;
}

/* ===== Chart ===== */
#stater-os .os-chart-card{
  margin-top:14px;
  border:1px solid rgba(15,23,42,.10);
  border-radius:var(--r);
  padding:16px;
  background:#fff;
  box-shadow:var(--shadow2);
}

#stater-os .os-chart-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
}

#stater-os .os-chart-title{ font-weight:950; }
#stater-os .os-chart-sub{ font-size:12px; color:var(--muted); }

#stater-os .os-bars{
  display:flex;
  gap:10px;
  align-items:flex-end;
  height:170px;
  margin-top:12px;
  padding:10px 4px 0;
  border-top:1px dashed rgba(15,23,42,.12);
}

#stater-os .os-bar{ width:44px; display:flex; flex-direction:column; align-items:center; gap:6px; }

#stater-os .os-bar-col{
  width:100%;
  height:120px;
  display:flex;
  align-items:flex-end;
  border-radius:12px;
  background:#f1f5f9;
  border:1px solid rgba(15,23,42,.10);
  overflow:hidden;
}

#stater-os .os-bar-fill{
  width:100%;
  background:#22c55e;
  border-radius:12px;
}

#stater-os .os-bar-label{ font-size:12px; color:var(--muted); }
#stater-os .os-bar-val{ font-size:12px; font-weight:950; }

/* ===== Modal ===== */
#stater-os .os-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

#stater-os .os-modal{
  width:min(720px, 96vw);
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  padding:18px;
}

#stater-os .os-modal-head{
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

#stater-os .os-modal-title{ font-weight:950; font-size:18px; }
#stater-os .os-modal-sub{ margin-top:6px; font-size:12px; color:var(--muted); }

#stater-os .os-form{
  padding:14px 6px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

#stater-os .os-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

#stater-os .os-label{
  font-size:12px;
  font-weight:950;
  color:#334155;
  margin-top:2px;
}

#stater-os .os-input{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:var(--text);
}

#stater-os .os-input:focus{
  border-color:rgba(37,99,235,.45);
  box-shadow: 0 0 0 3px rgba(37,99,235,.10);
}

#stater-os .os-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:8px;
}

#stater-os .os-modal-error{
  color:#b91c1c;
  font-size:12px;
  font-weight:900;
  min-height:16px;
}

/* ===== Responsive ===== */
@media (max-width: 900px){
  #stater-os.stater-os{ flex-direction:column; }
  #stater-os .os-sidebar{ width:100%; flex:0 0 auto; }
  #stater-os .os-thead,
  #stater-os .os-tr{
    grid-template-columns: 1.2fr 0.6fr 0.7fr 0.8fr 0.5fr;
  }
}

@media (max-width: 720px){
  #stater-os .os-form-grid{ grid-template-columns:1fr; }
}
/* ===== HARD LOCK: nav icon color never white ===== */
#stater-os .os-nav-item,
#stater-os .os-nav-item *{ color: var(--text) !important; }

#stater-os .os-nav-item.is-active,
#stater-os .os-nav-item.is-active *{ color: var(--primary) !important; }

/* 아이콘 박스는 기본 텍스트색 유지 + 활성화만 primary */
#stater-os .os-nav-ico{ color: var(--text) !important; }
#stater-os .os-nav-item.is-active .os-nav-ico{ color: var(--primary) !important; }
/* Site switcher: 드롭다운만 보이게 */
#stater-os .os-sitebox-value{ display:none !important; }
#stater-os .os-sitebox-row{ justify-content:flex-start; }
#stater-os .os-site-select{ width:100%; }
/* ✅ MODAL FIX: overlay가 body에 붙기 때문에(#stater-os 밖) 전역으로 스타일 적용 */
.os-modal-overlay{
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  z-index:999999;
}

.os-modal{
  width:min(720px, 96vw);
  background:#fff;
  border-radius:22px;
  border:1px solid rgba(15,23,42,.12);
  box-shadow: 0 24px 80px rgba(0,0,0,.25);
  padding:18px;
}

.os-modal-head{
  padding:6px 6px 12px;
  border-bottom:1px solid rgba(15,23,42,.08);
}

.os-modal-title{ font-weight:950; font-size:18px; }
.os-modal-sub{ margin-top:6px; font-size:12px; color:#64748b; }

.os-form{
  padding:14px 6px 6px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.os-form-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.os-label{
  font-size:12px;
  font-weight:950;
  color:#334155;
  margin-top:2px;
}

.os-input{
  border:1px solid rgba(15,23,42,.14);
  border-radius:14px;
  padding:10px 12px;
  outline:none;
  background:#fff;
  color:#0f172a;
}

.os-modal-actions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  padding-top:8px;
}

.os-modal-error{
  color:#b91c1c;
  font-size:12px;
  font-weight:900;
  min-height:16px;
}

@media (max-width: 720px){
  .os-form-grid{ grid-template-columns:1fr; }
}
/* ===== STATER: 현장 선택 글자 잘림 강제 해제(범용) ===== */
select,
select option {
  white-space: normal !important;
}

.stater-site-select *,
.site-select *,
[class*="site"] select,
[class*="site"] * {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
}

/* 혹시 버튼/디브로 만든 커스텀 드롭다운이면 이것도 */
[class*="select"] *,
[class*="dropdown"] *,
[class*="combo"] * {
  text-overflow: clip !important;
  overflow: visible !important;
  white-space: normal !important;
}


/* ===== 파일 최하단에 추가 ===== */

/* =========================================================
   ✅ FINAL: RIGHT RAIL + SLIDE PANEL (SmartStore 느낌 / 분리형)
   - 3컬럼: sidebar | main | rail
   - rail: 오른쪽 컬럼에 "붙어있는" 형태 (floating X)
   - panel: 메인을 밀지 않고, rail 왼쪽에서 overlay 슬라이드
   - label: CSS만으로 항상 표시 (aria-label 또는 title)
   - close 후 "걸쳐서 클릭 막는 현상" 방지 (visibility + pointer-events)
========================================================= */

/* ===== CONFIG ===== */
#stater-os.stater-os{
  --os-top: 72px;          /* 헤더 없으면 24px로 */
  --os-gap: 24px;
  --sidebar-w: 280px;
  --rail-col: 92px;        /* 오른쪽 레일 컬럼 폭 */
  --rail-btn: 64px;
  --panel-w: 420px;        /* 패널 폭 */
}

/* ===== 3-COLUMN GRID ===== */
#stater-os.stater-os{
  display:grid !important;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr) var(--rail-col) !important;
  gap: var(--os-gap) !important;
  align-items:start !important;
}

/* 각 영역 */
#stater-os .os-sidebar{ grid-column:1 !important; width:auto !important; }
#stater-os .os-main{ grid-column:2 !important; min-width:0 !important; }
#stater-os .os-rail{ grid-column:3 !important; }

/* =========================================================
   RAIL (오른쪽 컬럼 고정)
========================================================= */
#stater-os .os-rail{
  position: sticky !important;
  top: var(--os-top) !important;
  height: fit-content !important;

  width: var(--rail-col) !important;
  padding: 10px !important;

  background: var(--panel) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--r) !important;
  box-shadow: var(--shadow) !important;

  display:flex !important;
  flex-direction:column !important;
  gap: 10px !important;
}

/* 버튼(아이콘+라벨) */
#stater-os .os-rail-btn{
  width: 100% !important;
  min-height: 78px !important; /* 라벨 공간 확보 */

  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap: 6px !important;

  background:#fff !important;
  border:1px solid var(--line) !important;
  border-radius:14px !important;

  cursor:pointer !important;
  padding: 10px 6px !important;

  transition: background .12s ease, border-color .12s ease, transform .12s ease !important;
  overflow:hidden !important;

  /* 글자/아이콘 깨짐 방지 */
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

/* hover/active */
#stater-os .os-rail-btn:hover{
  background: var(--primary-bg) !important;
  border-color: var(--primary-bd) !important;
  transform: translateY(-1px) !important;
}
#stater-os .os-rail-btn.is-active{
  background: var(--primary-bg) !important;
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12) !important;
}

/* 아이콘 크기 (버튼 안의 첫 요소가 이모지/아이콘이어도 잘 보이게) */
#stater-os .os-rail-btn{
  font-size: 22px !important;
  line-height: 1 !important;
}

/* =========================================================
   ✅ LABEL (CSS only)
   - HTML에 <span class="os-rail-label">알림</span> 있으면 그걸 우선
   - 없으면 aria-label → title 순으로 강제 표시
   - :has() 절대 사용 안함(호환성)
========================================================= */

/* 1) 실제 라벨 DOM이 있으면 */
#stater-os .os-rail-label{
  display:block !important;
  font-size:12px !important;
  font-weight:900 !important;
  color: var(--muted) !important;
  line-height:1.1 !important;
  letter-spacing:-.2px !important;
  text-align:center !important;
  white-space:nowrap !important;
  max-width:100% !important;
}

/* active 라벨 색 */
#stater-os .os-rail-btn.is-active .os-rail-label{
  color: var(--primary) !important;
}

/* 2) 라벨 DOM이 없어도 버튼 자체에서 생성 */
#stater-os .os-rail-btn::after{
  content: attr(aria-label);
  display:block;
  font-size:12px;
  font-weight:900;
  color: var(--muted);
  line-height:1.1;
  letter-spacing:-.2px;
  text-align:center;
  white-space:nowrap;
  margin-top: 6px;
}

/* aria-label 비어있으면 title로 */
#stater-os .os-rail-btn[aria-label=""]::after{
  content: attr(title);
}

/* aria-label/title 둘 다 비어있으면 아무것도 안 보이게 */
#stater-os .os-rail-btn[aria-label=""][title=""]::after{
  content: "";
  display:none;
}

/* active일 때 after 라벨도 색 변경 */
#stater-os .os-rail-btn.is-active::after{
  color: var(--primary);
}

/* =========================================================
   PANEL (rail 왼쪽에서 overlay 슬라이드 / 메인 폭 안 줄어듦)
========================================================= */

/* 오버레이: 회색 딤 금지, 투명 + 클릭닫기만 */
#stater-os .os-panel-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: transparent !important;
  z-index: 9998 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: opacity .18s ease, visibility 0s linear .18s !important;
}
#stater-os .os-panel-overlay.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .18s ease !important;
}

/* 패널: fixed로 rail 왼쪽에서 등장 */
#stater-os .os-right-panel{
  position: fixed !important;
  top: var(--os-top) !important;
  bottom: 24px !important;

  /* ✅ rail(92) + gap(24) + 바깥 여백(24) 만큼 오른쪽에서 띄움 */
  right: calc(24px + var(--rail-col) + var(--os-gap)) !important;

  width: min(var(--panel-w), calc(100vw - (var(--sidebar-w) + 240px))) !important;

  background: var(--panel) !important;
  border: 1px solid var(--line2) !important;
  border-radius: var(--r) !important;
  box-shadow: -12px 0 34px rgba(15,23,42,.14) !important;

  display:flex !important;
  flex-direction:column !important;
  overflow:hidden !important;

  /* ✅ 닫힌 상태에서 "걸쳐서 클릭 막는 현상" 방지 */
  transform: translateX(calc(100% + 18px)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition:
    transform .22s ease,
    opacity .18s ease,
    visibility 0s linear .22s !important;

  z-index: 9999 !important;
}

#stater-os .os-right-panel.is-open{
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;

  transition: transform .22s ease, opacity .18s ease !important;
}

/* 패널 헤더/바디 */
#stater-os .os-panel-header{
  padding: 16px 18px !important;
  border-bottom: 1px solid var(--line2) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap: 10px !important;
}
#stater-os .os-panel-body{
  flex: 1 !important;
  overflow: auto !important;
  padding: 16px 18px !important;
}

/* 혹시 기존 CSS가 딤/블러 걸면 무력화 */
#stater-os .os-main,
#stater-os .os-sidebar{
  filter: none !important;
  opacity: 1 !important;
}

/* =========================================================
   MOBILE
========================================================= */
@media (max-width: 1100px){
  #stater-os.stater-os{
    grid-template-columns: 1fr !important;
  }
  #stater-os .os-rail{
    position: fixed !important;
    right: 12px !important;
    top: 96px !important;
    width: 76px !important;
    z-index: 9999 !important;
  }
  #stater-os .os-right-panel{
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }
}
/* =========================================================
   RIGHT DOCK (Naver Smartstore style)
   - 레일+패널을 "한 덩어리"로 오른쪽에 fixed
   - 패널은 레일 왼쪽에서 펼쳐짐
   - 레이아웃은 2컬럼(sidebar|main) + 우측 도킹 공간 padding
========================================================= */

/* 0) 기본 변수 */
#stater-os.stater-os{
  --os-top: 72px;           /* 상단 헤더 높이 (없으면 24px 권장) */
  --os-gap: 24px;
  --sidebar-w: 280px;

  --dock-right: 24px;       /* 화면 오른쪽 여백 */
  --dock-bottom: 24px;      /* 화면 아래 여백 */

  --rail-col: 92px;         /* 레일 폭 */
  --panel-w: 420px;         /* 패널 폭 */
  --dock-gap: 12px;         /* 레일-패널 간격 */
}

/* 1) ✅ 레이아웃: sidebar | main (우측 레일은 레이아웃 밖 fixed로) */
#stater-os.stater-os{
  display:grid !important;
  grid-template-columns: var(--sidebar-w) minmax(0,1fr) !important;
  gap: var(--os-gap) !important;
  align-items:start !important;

  /* ✅ 오른쪽 fixed dock에 본문이 가려지지 않도록 공간 확보 */
  padding-right: calc(var(--dock-right) + var(--rail-col) + var(--os-gap)) !important;
}

#stater-os .os-sidebar{ grid-column: 1 !important; width:auto !important; }
#stater-os .os-main{ grid-column: 2 !important; min-width:0 !important; }

/* 2) ✅ 혹시 기존 "3번째 컬럼 레일"이 남아있다면 레이아웃 영향 제거 */
#stater-os .os-rightcol{ display:none !important; }

/* 3) ✅ 도킹 컨테이너: 레일+패널 한 덩어리 */
#stater-os .os-rightdock{
  position: fixed;
  top: var(--os-top);
  right: var(--dock-right);
  bottom: var(--dock-bottom);

  display:flex;
  flex-direction: row-reverse; /* ✅ 오른쪽 끝에 레일, 그 왼쪽에 패널 */
  gap: var(--dock-gap);

  z-index: 9999;
  pointer-events: auto;
}

/* 4) 레일(버튼들) */
#stater-os .os-rightdock .os-rail{
  width: var(--rail-col);
  height: fit-content;

  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: var(--shadow);

  padding: 10px;
  display:flex;
  flex-direction:column;
  gap: 10px;

  /* sticky 제거: dock 자체가 fixed이므로 */
  position: relative !important;
  top: auto !important;
}

#stater-os .os-rightdock .os-rail-btn{
  width: 100%;
  min-height: 78px; /* 라벨 들어갈 높이 */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 6px;

  background:#fff;
  border:1px solid var(--line);
  border-radius:14px;
  padding: 10px 6px;

  cursor:pointer;
  transition: background .12s ease, border-color .12s ease, transform .12s ease;
  overflow:hidden;
}

#stater-os .os-rightdock .os-rail-btn:hover{
  background: var(--primary-bg);
  border-color: var(--primary-bd);
  transform: translateY(-1px);
}

#stater-os .os-rightdock .os-rail-btn.is-active{
  background: var(--primary-bg);
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* 아이콘 */
#stater-os .os-rightdock .os-rail-btn{ font-size: 22px; line-height: 1; }

/* 라벨 */
#stater-os .os-rightdock .os-rail-label{
  display:block !important;
  font-size:12px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
  color: var(--muted) !important;
  text-align:center !important;
  white-space:nowrap !important;
}

#stater-os .os-rightdock .os-rail-btn.is-active .os-rail-label{
  color: var(--primary) !important;
}

/* 5) ✅ 패널: 레일 왼쪽에서 펼쳐짐 (dock 안에서) */
#stater-os .os-rightdock .os-right-panel{
  width: var(--panel-w);
  height: 100%;

  background: var(--panel);
  border: 1px solid var(--line2);
  border-radius: var(--r);
  box-shadow: -12px 0 34px rgba(15,23,42,.14);

  display:flex;
  flex-direction:column;
  overflow:hidden;

  /* 닫힘 상태 */
  transform: translateX(calc(100% + var(--dock-gap)));
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s;
}

#stater-os .os-rightdock.is-open .os-right-panel{
  transform: translateX(0);
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: transform .22s ease, opacity .18s ease;
}

#stater-os .os-rightdock .os-panel-header{
  padding: 16px 18px;
  border-bottom: 1px solid var(--line2);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}

#stater-os .os-rightdock .os-panel-title-wrap{
  display:flex;
  align-items:center;
  gap: 10px;
}

#stater-os .os-rightdock .os-panel-icon{
  font-size: 22px;
  line-height: 1;
}

#stater-os .os-rightdock .os-panel-title{
  font-size: 17px;
  font-weight: 950;
}

#stater-os .os-rightdock .os-panel-close{
  width: 40px;
  height: 40px;
  border-radius: 12px;
  border: 1px solid var(--line);
  background:#fff;
  cursor:pointer;
  font-size: 18px;
}

#stater-os .os-rightdock .os-panel-body{
  flex:1;
  overflow:auto;
  padding: 16px 18px;
}

/* 6) ✅ 투명 오버레이(바깥 클릭으로 닫기) */
#stater-os .os-panel-overlay{
  position: fixed;
  inset: 0;
  background: transparent !important;

  opacity: 0;
  pointer-events: none;
  z-index: 9998;
}

#stater-os .os-panel-overlay.is-open{
  opacity: 1;
  pointer-events: auto;
}

/* 7) 잔상/클릭막힘 방지 (혹시 기존 효과가 있으면 무력화) */
#stater-os .os-main,
#stater-os .os-sidebar{
  filter:none !important;
  opacity:1 !important;
}

/* 8) 모바일 */
@media (max-width: 1100px){
  #stater-os.stater-os{
    grid-template-columns: 1fr !important;
    padding-right: 24px !important;
  }
  #stater-os .os-rightdock{
    right: 12px;
    top: 96px;
    bottom: 12px;
  }
  #stater-os .os-rightdock .os-rail{
    width: 76px;
  }
  #stater-os .os-rightdock .os-right-panel{
    width: min(var(--panel-w), calc(100vw - 120px));
  }
}
/* ===== FIX: 불필요한 오른쪽 여백 제거 ===== */
#stater-os.stater-os{
  padding-right: 24px !important;  /* 기존 calc(...)로 잡힌 여백 무력화 */
}
/* =========================================================
   FIX: 레일 클릭 막는 문제(더블클릭 필요 현상) 해결
   - overlay가 레일을 덮지 않게 함
   - rail z-index를 overlay보다 위로 올림
========================================================= */

/* 1) 레일을 항상 위로(overlay보다 위) */
#stater-os .os-rail{
  position: sticky;            /* 유지 */
  z-index: 10050 !important;   /* overlay보다 위 */
}

/* 레일 컬럼(wrapper)가 있으면 같이 올려줌 (있을 때만 적용됨) */
#stater-os .os-rightcol{
  position: relative;
  z-index: 10050 !important;
}

/* 2) 패널은 레일보단 아래, overlay보단 위 */
#stater-os .os-right-panel{
  z-index: 10040 !important;
}

/* 3) overlay는 레일을 덮지 않도록 "오른쪽을 비워둠"
      -> 이게 핵심: 레일 영역은 클릭 가능해야 함 */
#stater-os .os-panel-overlay{
  z-index: 10030 !important;

  /* overlay가 전체를 덮지 말고, 레일 컬럼만큼 오른쪽을 비워둔다 */
  right: calc(24px + var(--rail-col)) !important; /* padding(24) + 레일폭 */
}

/* (선택) 만약 너 layout이 padding 24가 아니라면 위 24px만 숫자 바꿔주면 됨 */
/* ===== RIGHT RAIL BADGE (count) ===== */
#stater-os .os-rail-btn{
  position: relative; /* 뱃지 위치 기준 */
}

#stater-os .os-rail-badge{
  position:absolute;
  top:8px;
  right:10px;

  min-width:18px;
  height:18px;
  padding:0 6px;

  display:none;                /* 기본은 숨김 */
  align-items:center;
  justify-content:center;

  border-radius:999px;
  font-size:11px;
  font-weight:900;
  line-height:1;
  color:#fff;

  background: var(--danger, #ef4444);
  border: 2px solid #fff;      /* 버튼 배경과 분리감 */
  box-shadow: 0 4px 10px rgba(15,23,42,.12);
}

/* 숫자가 0이 아니면 보이게 */
#stater-os .os-rail-badge.is-show{
  display:flex;
}

/* 99+ 처리 */
#stater-os .os-rail-badge.is-max::before{
  content:"99+";
}
#stater-os .os-rail-badge.is-max{
  font-size:10px;
}
/* ===== 알림 패널 ===== */
.os-notif-tabs{display:flex;gap:6px;margin-bottom:12px}
.os-notif-tab{padding:6px 10px;font-size:12px;border-radius:6px;background:#f2f2f2;border:0}
.os-notif-tab.is-active{background:#111;color:#fff}
.os-notif-card{padding:12px;border-radius:10px;margin-bottom:10px;background:#fff;border:1px solid #e5e5e5}
.os-notif-badge{font-size:11px;margin-bottom:4px}
.os-notif-card.is-overdue .os-notif-badge{color:#e53935}
.os-notif-card.is-d1 .os-notif-badge{color:#fb8c00}
.os-notif-card.is-normal .os-notif-badge{color:#1e88e5}
.os-notif-card.is-missing .os-notif-badge{color:#9e9e9e}
.os-notif-empty{padding:20px;text-align:center;color:#888}

/* ==== STATER Rail UI Addon (merged) ==== */
/* STATER Rail UI Addon (append to stater-os.css) */

.st-rail-loading {
  padding: 16px;
  color: var(--muted, #6b7280);
  font-size: 14px;
}

.st-rail-tabs {
  display: flex;
  gap: 8px;
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,0.06);
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 2;
}

.st-rail-tab {
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.st-rail-tab.is-active {
  border-color: rgba(37, 99, 235, 0.35);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.08);
}

.st-rail-tab-count {
  min-width: 18px;
  height: 18px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  padding: 0 6px;
  background: rgba(0,0,0,0.06);
}

.st-rail-list {
  padding: 12px;
}

.st-rail-card {
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.04);
}

.st-rail-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.st-rail-card-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.35;
  color: #111827;
}

.st-rail-card-meta {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.st-rail-card-actions {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.st-rail-btn {
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
}

.st-rail-badge {
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid rgba(0,0,0,0.10);
  background: rgba(0,0,0,0.03);
  white-space: nowrap;
}

/* 상태 색 체계 */
.st-rail-badge.st-overdue { border-color: rgba(239, 68, 68, 0.35); background: rgba(239, 68, 68, 0.10); }
.st-rail-badge.st-d1      { border-color: rgba(249, 115, 22, 0.35); background: rgba(249, 115, 22, 0.10); }
.st-rail-badge.st-normal  { border-color: rgba(37, 99, 235, 0.30); background: rgba(37, 99, 235, 0.10); }
.st-rail-badge.st-proof   { border-color: rgba(107, 114, 128, 0.30); background: rgba(107, 114, 128, 0.10); }

/* 카드 좌측 라인 (은은하게) */
.st-rail-card.st-overdue { box-shadow: inset 4px 0 0 rgba(239, 68, 68, 0.25), 0 8px 20px rgba(0,0,0,0.04); }
.st-rail-card.st-d1      { box-shadow: inset 4px 0 0 rgba(249, 115, 22, 0.25), 0 8px 20px rgba(0,0,0,0.04); }
.st-rail-card.st-normal  { box-shadow: inset 4px 0 0 rgba(37, 99, 235, 0.18), 0 8px 20px rgba(0,0,0,0.04); }
.st-rail-card.st-proof   { box-shadow: inset 4px 0 0 rgba(107, 114, 128, 0.18), 0 8px 20px rgba(0,0,0,0.04); }

.st-rail-empty {
  border: 1px dashed rgba(0,0,0,0.12);
  border-radius: 14px;
  background: rgba(0,0,0,0.02);
  padding: 18px;
  text-align: center;
}
.st-rail-empty-title {
  font-weight: 700;
  font-size: 14px;
}
.st-rail-empty-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.st-rail-error {
  border: 1px solid rgba(239, 68, 68, 0.25);
  background: rgba(239, 68, 68, 0.06);
  border-radius: 14px;
  padding: 12px;
}
.st-rail-error-title {
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}
.st-rail-error-pre {
  white-space: pre-wrap;
  font-size: 12px;
  margin: 0;
}

.st-rail-section {
  padding: 14px;
}
.st-rail-section-title {
  font-size: 16px;
  font-weight: 800;
}
.st-rail-section-sub {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.st-rail-solution-list {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.st-rail-solution-item {
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 14px;
  padding: 12px;
}
.st-rail-solution-name {
  font-weight: 800;
  font-size: 14px;
}
.st-rail-solution-desc {
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

.st-rail-faq {
  margin-top: 12px;
  display: grid;
  gap: 10px;
}
.st-rail-faq-item {
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  border-radius: 14px;
  padding: 10px 12px;
}
.st-rail-faq-item summary {
  cursor: pointer;
  font-weight: 700;
}
.st-rail-faq-body {
  margin-top: 8px;
  font-size: 12px;
  color: var(--muted, #6b7280);
}

/* ---- STATER Right Panel Internal UI (Rail) extras ---- */
.st-rail-filters{
  display:flex;
  gap:8px;
  padding:12px;
  border-bottom:1px solid rgba(0,0,0,0.06);
  background:#fff;
}
.st-rail-select{
  flex:0 0 auto;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
  color:#111827;
}
.st-rail-search{
  flex:1 1 auto;
  border:1px solid rgba(0,0,0,0.08);
  background:#fff;
  border-radius:10px;
  padding:8px 10px;
  font-size:12px;
}


/* =========================================================
   v2 Patch: 메인 폭 유지(오른쪽 여백 제거) + 스마트스토어형 패널 UI
   ========================================================= */

html, body { overflow-x: hidden; }

/* ✅ 레이아웃을 flex로 고정: rail 때문에 본문 폭이 줄지 않게 */
#stater-os.stater-os{ display:flex !important; }
#stater-os.stater-os{ padding-right:24px !important; }
#stater-os .os-main{ padding-right:24px !important; }

/* ✅ Rail: 화면 우측에 고정(본문 레이아웃에 영향 X) */
#stater-os .os-rail{
  position:fixed !important;
  right:24px !important;
  top:120px !important;
  z-index: 10020 !important;
}

/* ✅ Panel: rail 왼쪽에서 슬라이드 (스마트스토어 느낌으로 폭/높이) */
#stater-os .os-right-panel{
  width: 420px !important;
  max-width: calc(100vw - 140px) !important;
  height: calc(100vh - 160px) !important;
  top: 120px !important;
  right: calc(24px + var(--rail-col, 92px) + 16px) !important;
  border-radius: 18px !important;
  overflow: hidden !important;
}
#stater-os .os-panel-body{
  padding: 0 !important;
  overflow: auto !important;
}

#stater-os .os-panel-header{
  padding: 16px 16px 12px !important;
  border-bottom: 1px solid rgba(0,0,0,.06) !important;
}
#stater-os .os-panel-title{ font-size: 18px !important; font-weight: 900 !important; }
#stater-os .os-panel-actions{ display:flex; align-items:center; gap:10px; }
#stater-os .os-panel-gear{
  width: 40px; height: 40px;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,.10);
  background:#fff;
  cursor:pointer;
}

/* ===== SmartStore-like notif UI (OS 버전) ===== */
#stater-os .ss-top{ background:#f3f4f6; padding: 12px; display:flex; align-items:center; justify-content:space-between; gap:10px; }
#stater-os .ss-tabs{ display:flex; gap:8px; overflow:auto; padding-bottom:2px; }
#stater-os .ss-tab{
  border:1px solid rgba(0,0,0,.10) !important;
  background:#fff !important;
  color:#111827 !important;
  border-radius: 999px !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  display:inline-flex; align-items:center; gap:8px;
  cursor:pointer;
  white-space:nowrap;
}
#stater-os .ss-tab.is-active{
  border-color: rgba(22,163,74,.35) !important;
  box-shadow: 0 0 0 3px rgba(22,163,74,.10) !important;
}
#stater-os .ss-tab-badge{
  min-width: 18px; height: 18px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(239,68,68,.10);
  border: 1px solid rgba(239,68,68,.25);
  color: #b91c1c;
  font-size: 11px;
  display:inline-flex; align-items:center; justify-content:center;
}
#stater-os .ss-top-right{ flex:0 0 auto; }
#stater-os .ss-drop{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 999px;
  padding: 8px 10px;
  font-size: 12px;
  cursor:pointer;
}

#stater-os .ss-controls{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px;
  padding: 12px;
  border-bottom: 1px solid rgba(0,0,0,.06);
  background:#fff;
}
#stater-os .ss-select{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
}
#stater-os .ss-actions{ display:flex; gap:8px; }
#stater-os .ss-action{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 10px;
  padding: 8px 10px;
  font-size: 12px;
  cursor:pointer;
}

#stater-os .ss-filters{ padding: 12px; background:#fff; border-bottom: 1px solid rgba(0,0,0,.06); }
#stater-os .ss-search{
  width: 100%;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 13px;
}

#stater-os .ss-list{ padding: 12px; background:#f9fafb; }
#stater-os .ss-card{
  border:1px solid rgba(0,0,0,.08);
  background:#fff;
  border-radius: 14px;
  padding: 12px;
  margin-bottom: 10px;
  box-shadow: 0 8px 18px rgba(0,0,0,.04);
}
#stater-os .ss-card-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
#stater-os .ss-card-title{ font-size: 14px; font-weight: 900; line-height:1.35; }
#stater-os .ss-badge{
  border-radius: 999px;
  font-size: 11px;
  padding: 4px 8px;
  border: 1px solid rgba(0,0,0,.10);
  background: rgba(0,0,0,.03);
  white-space: nowrap;
}
#stater-os .ss-meta{ margin-top: 6px; font-size: 12px; color: rgba(100,116,139,1); }
#stater-os .ss-card-actions{ margin-top: 10px; display:flex; justify-content:flex-end; gap:8px; }
#stater-os .ss-btn{
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
  border-radius: 10px;
  padding: 7px 10px;
  font-size: 12px;
  cursor:pointer;
  text-decoration:none;
  color: inherit;
}
#stater-os .ss-x{
  border:none;
  background: transparent;
  color: rgba(100,116,139,1);
  cursor:pointer;
  font-size: 14px;
  padding: 2px 4px;
}

/* 상태별 (조용한 위험) */
#stater-os .ss-badge.ss-overdue{ border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.10); color:#991b1b; }
#stater-os .ss-badge.ss-d1{ border-color: rgba(249,115,22,.35); background: rgba(249,115,22,.10); color:#9a3412; }
#stater-os .ss-badge.ss-normal{ border-color: rgba(37,99,235,.30); background: rgba(37,99,235,.10); color:#075985; }
#stater-os .ss-badge.ss-proof{ border-color: rgba(107,114,128,.30); background: rgba(107,114,128,.10); color:#374151; }

#stater-os .ss-card.ss-overdue{ box-shadow: inset 4px 0 0 rgba(239,68,68,.20), 0 8px 18px rgba(0,0,0,.04); }
#stater-os .ss-card.ss-d1{ box-shadow: inset 4px 0 0 rgba(249,115,22,.20), 0 8px 18px rgba(0,0,0,.04); }
#stater-os .ss-card.ss-normal{ box-shadow: inset 4px 0 0 rgba(37,99,235,.14), 0 8px 18px rgba(0,0,0,.04); }
#stater-os .ss-card.ss-proof{ box-shadow: inset 4px 0 0 rgba(107,114,128,.14), 0 8px 18px rgba(0,0,0,.04); }


/* ===== STATER OS Panel UI v3 (dock + readability) ===== */

/* =============================
   STATER OS Right Panel v3 Fixes
   ============================= */

/* 1) Right panel should be docked, not overlay */
.os-right-panel {
  position: relative !important;
  right: 0 !important;
  top: 0 !important;
  height: calc(100vh - 64px) !important;
  box-shadow: none !important;
}

.os-right-panel-overlay {
  display: none !important;
}

/* Ensure main content does not get covered */
.os-main,
.os-dashboard,
.os-content {
  margin-right: 360px;
}

/* 2) Fix cramped tab / pill spacing and text */
.os-panel-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.os-panel-tab {
  padding: 6px 14px;
  font-size: 13px;
  line-height: 1.4;
  white-space: nowrap;
}

/* 3) Active category text color fix */
.os-panel-tab.active,
.os-panel-tab.active span,
.os-panel-tab.active strong,
.os-panel .active {
  color: #111 !important;
}


/* ===== STATER OS Panel UI v4 (spacing + single-row tabs + text color) ===== */

/* =============================
   STATER OS Right Panel v4 Fixes
   - Rail spacing compact (match left categories)
   - Notif tabs forced to single row (no wrap)
   - Todo active text forced to black (no white-on-white)
   ============================= */

/* 0) Compact spacing for the right rail buttons (match left category feel) */
.os-right-rail,
.os-rail-right,
.os-rail,
.os-right-rail-stack,
.os-rail-stack {
  gap: 10px !important;              /* tighten vertical spacing */
  padding: 10px !important;
}

.os-right-rail .os-rail-btn,
.os-rail .os-rail-btn,
.os-rail-stack .os-rail-btn,
.os-right-rail .rail-btn,
.os-rail .rail-btn {
  margin: 0 !important;
  padding: 10px 10px !important;
  border-radius: 14px !important;
}

/* 1) Notification category tabs: make them a single row like SmartStore */
.os-panel-tabs,
.os-notif-tabs,
.os-notif-cats,
.os-panel .os-panel-tabs {
  display: flex !important;
  flex-wrap: nowrap !important;       /* no wrapping */
  overflow-x: auto !important;        /* allow horizontal scroll */
  overflow-y: hidden !important;
  gap: 10px !important;               /* consistent pill spacing */
  padding-bottom: 6px !important;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.os-panel-tabs::-webkit-scrollbar,
.os-notif-tabs::-webkit-scrollbar,
.os-notif-cats::-webkit-scrollbar {
  height: 6px;
}

.os-panel-tab,
.os-notif-tab,
.os-notif-cats .tab,
.os-panel-tabs .tab {
  flex: 0 0 auto !important;          /* keep pill width */
  white-space: nowrap !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  padding: 7px 14px !important;
}

/* make badge not squeeze text */
.os-panel-tab .count,
.os-panel-tab .badge,
.os-notif-tab .count,
.os-notif-tab .badge {
  margin-left: 6px !important;
}

/* 2) Force active tab text to black (fix Todo + others) */
.os-panel-tab.active,
.os-panel-tab.active *,
.os-notif-tab.active,
.os-notif-tab.active *,
.os-todo-tabs .active,
.os-todo-tabs .active *,
.os-todo-tab.active,
.os-todo-tab.active *,
.os-panel [aria-selected="true"],
.os-panel [aria-selected="true"] *,
.os-panel [aria-pressed="true"],
.os-panel [aria-pressed="true"] * {
  color: #111 !important;
}

/* Also prevent framework styles from forcing white text */
.os-panel-tab.active { text-shadow: none !important; }


/* ===== FINAL OVERRIDES (last wins) ===== */

/* Force rail spacing compact (match left) */
#stater-os .os-rail{gap:10px !important;}
#stater-os .os-rail-btn{min-height:64px !important; padding:10px 6px !important; gap:4px !important;}
/* Notif tabs single row */
#stater-os .os-notif-tabs{flex-wrap:nowrap !important; overflow-x:auto !important; gap:8px !important;}
#stater-os .os-notif-tab{white-space:nowrap !important; flex:0 0 auto !important;}
/* Active tabs text black/blue visible */
#stater-os .st-rail-tab, #stater-os .st-rail-tab *{color:#0f172a !important;}
#stater-os .st-rail-tab.is-active, #stater-os .st-rail-tab.is-active *{color:#2563eb !important;}
#stater-os .os-panel-tab.active, #stater-os .os-panel-tab.active *{color:#111 !important;}
/* =========================================================
   STATER OS v11 LAYOUT LOCK (최종 덮어쓰기)
   - 좌/우 고정 + 가운데만 스크롤
   - 레일 클릭 시 팝업 패널(메인 밀림 X)
   ========================================================= */

:root{
  --os-top: 120px;          /* 상단 WP헤더/여백 포함 높이. 필요시 72px/96px로 조절 */
  --os-bottom: 24px;

  --sidebar-w: 280px;
  --gap: 24px;

  --rail-w: 92px;
  --dock-right: 24px;
  --dock-gap: 12px;

  --panel-w: 420px;
}

/* 1) 페이지 전체 스크롤을 막고, 가운데만 스크롤 */
html, body{
  height:100% !important;
  overflow:hidden !important;
}

/* 2) 기존에 섞여있는 레이아웃 강제값(특히 margin-right:360 같은거) 무력화 */
#stater-os .os-main,
#stater-os .os-dashboard,
#stater-os .os-content{
  margin-right: 0 !important;
}

/* 3) STATER OS 전체를 "고정 높이" 컨테이너로 만들고 내부만 관리 */
#stater-os.stater-os{
  height: calc(100vh - var(--os-top) - var(--os-bottom)) !important;
  overflow: hidden !important;

  /* 좌:사이드바 / 중:메인  (우:레일은 fixed로 레이아웃 밖) */
  display: grid !important;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) !important;
  gap: var(--gap) !important;

  padding: 24px !important;
  padding-right: calc(var(--dock-right) + var(--rail-w) + var(--gap)) !important; /* 레일 공간 확보 */
}

/* 4) 왼쪽 사이드바는 고정(스크롤 따라옴) */
#stater-os .os-sidebar{
  position: sticky !important;
  top: 0 !important;
  align-self: start !important;

  height: 100% !important;
  overflow: auto !important; /* 사이드바 메뉴가 길어지면 내부 스크롤 */
}

/* 5) 가운데 메인만 스크롤 */
#stater-os .os-main{
  height: 100% !important;
  overflow: auto !important;
  min-width: 0 !important;
}

/* 6) 오른쪽 레일: 화면 우측 fixed (항상 보이게) */
#stater-os .os-rail{
  position: fixed !important;
  top: calc(var(--os-top) + 24px) !important;
  right: var(--dock-right) !important;
  z-index: 10050 !important;

  width: var(--rail-w) !important;
}

/* 7) 오른쪽 패널: 레일 왼쪽에서 팝업(메인 밀지 않음) */
#stater-os .os-right-panel{
  position: fixed !important;
  top: calc(var(--os-top) + 24px) !important;
  right: calc(var(--dock-right) + var(--rail-w) + var(--dock-gap)) !important;
  z-index: 10040 !important;

  width: var(--panel-w) !important;
  max-width: calc(100vw - 160px) !important;
  height: calc(100vh - var(--os-top) - 48px) !important;

  /* 기본은 닫힘 */
  transform: translateX(calc(100% + 16px)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s !important;
}

/* 열림 상태 */
#stater-os .os-right-panel.is-open{
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform .22s ease, opacity .18s ease !important;
}

/* 8) overlay는 레일을 덮지 않게(레일 클릭이 막히는 현상 방지) */
#stater-os .os-panel-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: transparent !important;
  z-index: 10030 !important;

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  /* ✅ 레일 영역 비워두기 */
  right: calc(var(--dock-right) + var(--rail-w)) !important;

  transition: opacity .18s ease, visibility 0s linear .18s !important;
}
#stater-os .os-panel-overlay.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: opacity .18s ease !important;
}

/* 9) 알림 카테고리 탭: 가로 1줄 고정 + 글자 세로(줄바꿈) 방지 */
#stater-os .os-notif-tabs,
#stater-os .st-rail-tabs,
#stater-os .ss-tabs{
  display:flex !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  gap: 10px !important;

  -webkit-overflow-scrolling: touch;
  writing-mode: horizontal-tb !important;
}

#stater-os .os-notif-tab,
#stater-os .st-rail-tab,
#stater-os .ss-tab{
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
  min-width: max-content !important;
}

/* (선택) 탭 안의 글자가 너무 좁아서 한 글자씩 떨어지는 케이스 방지 */
#stater-os .os-notif-tab *,
#stater-os .st-rail-tab *,
#stater-os .ss-tab *{
  white-space: nowrap !important;
  word-break: keep-all !important;
  writing-mode: horizontal-tb !important;
}

/* 10) 모바일 대응: 레일/패널 폭만 줄이기 */
@media (max-width: 1100px){
  #stater-os.stater-os{
    grid-template-columns: 1fr !important;
    padding-right: 24px !important;
  }
  #stater-os .os-rail{
    right: 12px !important;
    top: calc(var(--os-top) + 12px) !important;
    width: 76px !important;
  }
  #stater-os .os-right-panel{
    right: calc(12px + 76px + 12px) !important;
    width: min(420px, calc(100vw - 120px)) !important;
  }
}
/* =============================
   STATER OS v12 — "오른쪽도 왼쪽처럼" (대시보드 가림 제거)
   - 레일은 fixed 유지
   - 패널이 열릴 때 중앙(.os-main)이 오른쪽으로 '밀려서' 공간 확보
   - 조건부: #stater-os:has(.os-right-panel.is-open) 지원 브라우저에서만
   ============================= */

:root{
  --rail-w: 92px;
  --dock-right: 24px;
  --dock-gap: 12px;
  --panel-w: 420px;
}

/* 1) 기본: 우측 레일 공간만 확보 */
#stater-os .os-main,
#stater-os .os-dashboard,
#stater-os .os-content{
  padding-right: calc(var(--dock-right) + var(--rail-w) + 24px) !important;
}

/* 2) 패널이 열렸을 때만: 패널폭까지 추가 확보 -> 대시보드 가림 방지 */
@supports selector(:has(*)){
  #stater-os:has(.os-right-panel.is-open) .os-main,
  #stater-os:has(.os-right-panel.is-open) .os-dashboard,
  #stater-os:has(.os-right-panel.is-open) .os-content{
    padding-right: calc(var(--dock-right) + var(--rail-w) + var(--dock-gap) + var(--panel-w) + 24px) !important;
  }
}

/* 3) 패널 위치는 레일 왼쪽에 고정 */
#stater-os .os-right-panel{
  right: calc(var(--dock-right) + var(--rail-w) + var(--dock-gap)) !important;
  width: var(--panel-w) !important;
}

/* 4) :has 미지원 브라우저 대비(최소 겹침 완화) */
@supports not selector(:has(*)){
  #stater-os .os-right-panel{ width: 360px !important; }
}
/* =============================
   STATER OS v13
   - 오른쪽 레일: 왼쪽 사이드바처럼 "레이아웃 컬럼"
   - 패널: 대시보드 위로 overlay (대시보드 폭 안 줄어듦)
   ============================= */

:root{
  --sidebar-w: 280px;
  --rail-w: 92px;
  --gap: 24px;
  --os-top: 120px;     /* 상단 헤더 높이 (필요시 96/72로 조절) */
  --panel-w: 420px;
  --dock-right: 24px;  /* 화면 오른쪽 여백 */
  --dock-gap: 12px;    /* 레일-패널 간격 */
}

/* 1) v12에서 패널 열릴 때 대시보드가 좁아지게 만든 padding-right 확장 제거 */
#stater-os .os-main,
#stater-os .os-dashboard,
#stater-os .os-content{
  padding-right: 0 !important;
}

/* 2) 전체 레이아웃을 3컬럼(좌/중/우 레일)로 고정 */
#stater-os.stater-os{
  display: grid !important;
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr) var(--rail-w) !important;
  gap: var(--gap) !important;
  padding: 24px !important;
}

/* 3) 오른쪽 레일은 fixed 말고 sticky로 (왼쪽 바처럼 보이게) */
#stater-os .os-rail{
  position: sticky !important;
  top: 0 !important;                 /* 필요하면 top: 12px; */
  right: auto !important;
  left: auto !important;

  width: var(--rail-w) !important;
  height: 100% !important;
  overflow: auto !important;
  z-index: 50 !important;
}

/* 4) 패널은 overlay로: 레일 옆(또는 위)으로 뜨고, 대시보드 폭은 안 건드림 */
#stater-os .os-right-panel{
  position: fixed !important;
  top: calc(var(--os-top) + 24px) !important;
  right: calc(var(--dock-right) + var(--rail-w) + var(--dock-gap)) !important;
  width: var(--panel-w) !important;
  height: calc(100vh - var(--os-top) - 48px) !important;

  z-index: 10040 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 48px rgba(15,23,42,.18) !important;

  /* 닫힘 기본 */
  transform: translateX(calc(100% + 16px)) !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: transform .22s ease, opacity .18s ease, visibility 0s linear .22s !important;
}
#stater-os .os-right-panel.is-open{
  transform: translateX(0) !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
  transition: transform .22s ease, opacity .18s ease !important;
}

/* 5) (선택) 패널이 열려도 레일 클릭이 되게 overlay는 레일 영역 비워두기 */
#stater-os .os-panel-overlay{
  position: fixed !important;
  inset: 0 !important;
  background: transparent !important;
  z-index: 10030 !important;

  right: calc(var(--dock-right) + var(--rail-w)) !important; /* 레일 영역 비움 */

  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}
#stater-os .os-panel-overlay.is-open{
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

/* =========================================================
   STATER OS - Right Panel Overlay Fix (no dashboard shrink)
   - 목적: 우측 패널 오픈 시 중앙 대시보드 폭이 줄지 않게(오버레이)
   - 현재 CSS에 들어있는 :has(.os-right-panel.is-open) 패딩 확장 규칙을 무력화
   - 레일(아이콘 5개) 공간만 확보하고, 패널은 그 위로 떠서 표시
   ========================================================= */

/* 1) 중앙 영역(메인/대시보드/콘텐츠)의 우측 패딩은 "레일 폭"까지만 유지 */
:root{
  --rail-w: 92px;       /* 레일 실제 폭(필요하면 숫자만 조정) */
  --dock-right: 24px;   /* 우측 여백 */
  --dock-gap: 12px;     /* 레일↔패널 간격 */
  --panel-w: 420px;     /* 패널 폭(시각용) */
}

/* ✅ 패널이 열려도 padding-right가 늘어나지 않게 고정 */
#stater-os .os-main,
#stater-os .os-dashboard,
#stater-os .os-content{
  padding-right: calc(var(--dock-right) + var(--rail-w) + 24px) !important;
}

/* 2) :has() 기반 '패널 열림 시 추가 공간 확보' 규칙을 덮어쓰기(무력화) */
@supports selector(:has(*)){
  #stater-os:has(.os-right-panel.is-open) .os-main,
  #stater-os:has(.os-right-panel.is-open) .os-dashboard,
  #stater-os:has(.os-right-panel.is-open) .os-content{
    padding-right: calc(var(--dock-right) + var(--rail-w) + 24px) !important; /* ✅ 그대로 */
  }
}

/* 3) 우측 패널은 레이아웃을 밀지 않고 '떠서' 보이게 고정 */
#stater-os .os-right-panel{
  position: fixed !important;
  right: calc(var(--dock-right) + var(--rail-w) + var(--dock-gap)) !important;
  top: 96px !important; /* 헤더 높이에 맞게 필요 시 조정 */
  width: var(--panel-w) !important;
  max-width: calc(100vw - (var(--dock-right) + var(--rail-w) + var(--dock-gap) + 24px)) !important;

  z-index: 9998 !important;
  pointer-events: none !important;
}
#stater-os .os-right-panel.is-open{
  pointer-events: auto !important;
}

/* 4) 우측 레일은 항상 가장 위(클릭 우선) */
#stater-os .os-rail,
#stater-os .os-right-rail{
  position: fixed !important;
  right: var(--dock-right) !important;
  top: 96px !important;
  z-index: 9999 !important;
}
/* ===== STATER OS 우측 패널 클릭(닫힘) 버그 패치 =====
   목적: 패널 내부(탭/버튼/검색 등) 클릭이 배경(overlay)으로 전달돼
         패널이 닫혀버리는 현상 방지
   사용법: 기존 stater-os.css 맨 아래에 그대로 붙여넣기
*/

/* overlay가 클릭을 가로채지 않도록 차단 (닫기는 X 버튼으로) */
#stater-os-root .os-panel-overlay{
  pointer-events: none !important;
}

/* 패널/레일은 정상 클릭 가능 */
#stater-os-root .os-right-panel,
#stater-os-root .os-right-rail{
  pointer-events: auto;
}

/* 혹시 상위 요소에 pointer-events 영향이 있으면 강제 */
#stater-os-root .os-right-panel *{
  pointer-events: auto;
}
/* === Right panel click fix (overlay가 위로 올라오는 문제 방지) === */
#stater-os .os-panel-overlay{
  z-index: 9000;
}

#stater-os .os-right-panel{
  z-index: 9010;
  position: fixed; /* 이미 fixed면 상관없음 */
  pointer-events: auto;
}

/* 레일은 패널보다 아래/위는 취향인데, 보통 패널 아래로 둠 */
#stater-os .os-rail{
  z-index: 8990;
}
/* ===== STATER OS: 패널 내부 클릭이 '닫힘'으로 먹히는 현상 해결 (맨 아래 추가) =====
   원인: overlay(z-index)가 panel보다 위에 있으면, 패널을 클릭해도 실제 클릭 타겟이 overlay가 되어
         overlay 클릭닫힘(close) 로직이 실행됩니다.
   해결: overlay는 panel 아래, panel은 overlay 위로 z-index를 강제합니다.
*/

#stater-os .os-panel-overlay{
  position: fixed;
  inset: 0;
  background: transparent; /* 딤 없음 */
  z-index: 9998;           /* ✅ 패널보다 아래 */
}

#stater-os .os-right-panel{
  position: fixed;         /* 혹시 relative로 바뀌었을 때를 대비해 고정 */
  z-index: 9999;           /* ✅ overlay보다 위 */
  pointer-events: auto;    /* ✅ 내부 클릭 가능 */
}

/* 레일이 패널보다 위에 떠있어야 버튼이 항상 클릭됩니다 */
#stater-os .os-rail{
  position: fixed;
  z-index: 10000;
}

/* ===== STATER OS: 우측 패널 내부 클릭 시 닫히는 현상 최종 FIX (맨 아래 추가) =====
   원인: overlay가 panel 위(z-index)로 올라가 있으면, 패널을 클릭해도 실제 클릭 타겟이 overlay가 되어 closePanel이 실행됨
   해결: overlay는 panel보다 '항상 아래', panel은 '항상 위'로 강제
*/

#stater-os .os-panel-overlay{
  z-index: 9998 !important;   /* ✅ panel 아래 */
}

#stater-os .os-right-panel{
  z-index: 9999 !important;   /* ✅ overlay 위 */
  pointer-events: auto !important;
}

/* 레일 버튼은 항상 최상단(클릭 우선) */
#stater-os .os-rail,
#stater-os .os-right-rail{
  z-index: 10000 !important;
}

/* =====================================================
   STATER OS – SmartStore-like Visual Separation PATCH
   (append only / overwrite minimal)
   ===================================================== */

/* 1️⃣ 전체 배경 대비를 더 확실히 */
#stater-os.stater-os{
  background:#f3f4f6 !important; /* 스마트스토어 느낌의 회색 캔버스 */
}

/* 2️⃣ 왼쪽 사이드바를 ‘색 블록’으로 인식되게 */
#stater-os .os-sidebar{
  background:#ffffff !important;
  border-right:1px solid rgba(0,0,0,.06) !important;
}

/* 사이드바 메뉴 hover / active 대비 강화 */
#stater-os .os-nav-item{
  background:#ffffff !important;
}
#stater-os .os-nav-item:hover{
  background:#f5f7fb !important;
}
#stater-os .os-nav-item.is-active{
  background:#eef2ff !important; /* 스마트스토어 좌측 활성 느낌 */
  border-color:#c7d2fe !important;
}

/* 3️⃣ 중앙 메인은 ‘판’처럼 보이게 */
#stater-os .os-main{
  background:#ffffff !important;
  box-shadow:0 1px 0 rgba(0,0,0,.04) !important;
}

/* 4️⃣ 상단 상태 바(“현재 모든 현장이 안정…”)를 배경 카드로 분리 */
#stater-os .os-headline{
  background:#f8fafc !important;
  border:1px solid rgba(0,0,0,.06) !important;
}

/* 5️⃣ 카드 영역을 스마트스토어처럼 “회색 바닥 + 흰 카드” 구조로 */
#stater-os .os-cards{
  background:#f3f4f6 !important;
  padding:14px !important;
  border-radius:18px !important;
}

/* 개별 카드 강조 */
#stater-os .os-card{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

/* 6️⃣ 테이블 영역도 카드처럼 떠 보이게 */
#stater-os .os-table{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

/* 7️⃣ 섹션 제목에 구분선 추가 (시선 분리) */
#stater-os .os-section-title{
  padding-left:8px;
  border-left:4px solid #e5e7eb;
}

/* 8️⃣ 오른쪽 레일과 본문 시각적 분리 강화 */
#stater-os .os-rail{
  background:#ffffff !important;
  border:1px solid rgba(0,0,0,.08) !important;
}

/* 9️⃣ 전체 카드 그림자 정리 (번들림 제거) */
#stater-os .os-card,
#stater-os .os-table,
#stater-os .os-headline{
  box-shadow:0 8px 20px rgba(0,0,0,.04) !important;
}

아래부터 ui 수정본
/* =========================================================
   카드 떠보이게(흰색 유지 + 그림자 강화 + 섹션과 분리감)
========================================================= */

/* 섹션(회색 박스)은 유지하되, 내부 여백/경계만 정리 */
#stater-os .os-cards,
#stater-os .os-cards-wrap,
#stater-os .os-section,
#stater-os .os-section-wrap{
  background: #eef2f7 !important;
  border: 1px solid rgba(15,23,42,.06) !important;
  border-radius: 18px !important;
  padding: 16px !important;      /* 섹션 안쪽 여백 조금 증가 */
}

/* 섹션 안의 카드(금주점검/리스크/증빙)들을 '흰 박스'로 확실히 띄우기 */
#stater-os .os-cards .os-card,
#stater-os .os-section .os-card{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 16px 34px rgba(15,23,42,.10) !important;  /* 더 또렷한 그림자 */
  border-radius: 16px !important;
}

/* 카드 상단 타이틀 영역도 조금 더 또렷하게 */
#stater-os .os-card .os-card-title,
#stater-os .os-card h3{
  color: #0f172a !important;
  font-weight: 900 !important;
}

/* 카드 안의 작은 네모(대기/진행/완료 등)도 흰색 유지 + 얇은 테두리 */
#stater-os .os-card .stat,
#stater-os .os-card .stat-box,
#stater-os .os-card .mini-card,
#stater-os .os-card .os-mini{
  background: #ffffff !important;
  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 8px 16px rgba(15,23,42,.06) !important;
  border-radius: 14px !important;
}

/* (선택) hover 시 살짝 더 떠 보이게 */
#stater-os .os-cards .os-card:hover,
#stater-os .os-section .os-card:hover{
  transform: translateY(-2px);
  transition: transform .15s ease, box-shadow .15s ease;
  box-shadow: 0 20px 42px rgba(15,23,42,.14) !important;
}
/* =========================================================
   지연/이슈(기한초과) : 제목 + 테이블 전체를 하나의 흰 카드로
========================================================= */

/* 섹션 전체 래퍼 */
#stater-os .delay-issue-wrapper,
#stater-os .issue-delay-wrapper,
#stater-os .os-delay-wrapper,
#stater-os .delay-section,
#stater-os .issue-section {
  background: #ffffff !important;
  border-radius: 20px !important;
  padding: 18px 22px 20px !important;
  margin-top: 20px !important;

  border: 1px solid rgba(15,23,42,.10) !important;
  box-shadow: 0 18px 38px rgba(15,23,42,.10) !important;
}

/* 제목 줄 (지연/이슈 + 버튼 있는 줄) */
#stater-os .delay-issue-wrapper > .section-header,
#stater-os .issue-section > .section-header,
#stater-os .delay-issue-title {
  background: transparent !important;
  padding: 0 0 12px 0 !important;
  margin-bottom: 12px !important;

  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 700;
  font-size: 15px;
}

/* 제목 아래 구분선 */
#stater-os .delay-issue-wrapper::after,
#stater-os .issue-section::after {
  content: "";
  display: block;
  height: 1px;
  background: rgba(15,23,42,.08);
  margin: 10px 0 14px;
}

/* 테이블은 카드 안에 자연스럽게 */
#stater-os .delay-issue table {
  margin-top: 0 !important;
}

/* 테이블 헤더 배경 */
#stater-os .delay-issue thead {
  background: #f8fafc !important;
}