/* ═══════════════════════════════════════════════════════════════════════════
   SEcMS Ribbon Menu — 2단 (Title 32px + Ribbon 62px)
   레퍼런스: 3D-Tool FreeViewer · SEcMS TopNavBar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 보안: 인증 안 된 모드(name/select/admin)에서는 ribbon 숨김 ── */
body[data-mode="name"] .secms-cable-titlebar,
body[data-mode="name"] .ribbon-bar,
body[data-mode="select"] .secms-cable-titlebar,
body[data-mode="select"] .ribbon-bar,
body[data-mode="admin"] .secms-cable-titlebar,
body[data-mode="admin"] .ribbon-bar,
body:not([data-mode]) .secms-cable-titlebar,
body:not([data-mode]) .ribbon-bar {
  display: none !important;
}

.secms-cable-titlebar {
  display: flex; align-items: center; gap: 8px;
  height: var(--rb-title-h);
  padding: 0 10px;
  background: var(--rb-title-bg);
  border-bottom: 1px solid var(--rb-title-bd);
  user-select: none;
  flex-shrink: 0;
  position: sticky; top: 0; z-index: 50;
  font-size: 12px; color: var(--rb-text);
}
.secms-cable-titlebar .tb-logo {
  display: inline-flex; align-items: center; gap: 6px;
  text-decoration: none; color: inherit;
  font-weight: 800; letter-spacing: 0.04em;
}
.secms-cable-titlebar .tb-logo-mark {
  display: inline-block; width: 18px; height: 18px;
  line-height: 18px; text-align: center;
  background: var(--brand-navy); color: #fff;
  border-radius: 4px; font-size: 11px;
}
.secms-cable-titlebar .tb-version {
  background: var(--brand-navy); color: #fff;
  padding: 2px 6px; border-radius: 3px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.05em;
}
.secms-cable-titlebar .tb-build { color: var(--rb-text-mute); font-size: 11px; }
.secms-cable-titlebar .tb-spacer { flex: 1; }
.secms-cable-titlebar .tb-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 9px; border-radius: 999px;
  background: rgba(255,255,255,0.6);
  border: 1px solid #d0d6e0;
  font-size: 11px; color: #455366;
}
.secms-cable-titlebar .tb-pill.muted { color: #6b7280; background: #ececec; border-color: #d6d6d6; }
.secms-cable-titlebar .tb-pill.success { color: #0a6f3d; background: #e2f5ea; border-color: #a8d9bd; }
.secms-cable-titlebar .tb-pill.danger  { color: #a31616; background: #fde8e8; border-color: #f4b9b9; }
.secms-cable-titlebar .tb-btn {
  height: 22px; padding: 0 9px; border-radius: 3px;
  background: rgba(255,255,255,0.8); border: 1px solid #c8cfd8;
  font-size: 11px; color: var(--rb-text);
  display: inline-flex; align-items: center; gap: 4px;
  transition: background var(--t-fast);
}
.secms-cable-titlebar .tb-btn:hover { background: #fff; border-color: #9aa6b6; }
.secms-cable-titlebar .tb-btn.primary { background: var(--brand-navy); color: #fff; border-color: var(--brand-navy); }
.secms-cable-titlebar .tb-btn.danger  { background: #b91c1c; color: #fff; border-color: #991b1b; }
.secms-cable-titlebar .tb-btn[disabled]{ opacity: 0.45; cursor: not-allowed; }

/* ───── Ribbon (메인 메뉴) ───── */
.ribbon-bar {
  display: flex; align-items: stretch;
  background: var(--rb-bg);
  border-bottom: 2px solid var(--rb-bd);
  min-height: var(--rb-ribbon-h);
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: thin;
  scrollbar-color: #c8d4e4 transparent;
  position: sticky; top: var(--rb-title-h); z-index: 49;
  contain: layout style;
}
.ribbon-bar::-webkit-scrollbar { height: 4px; }
.ribbon-bar::-webkit-scrollbar-thumb { background: #c8d4e4; border-radius: 2px; }

.ribbon-group {
  display: flex; flex-direction: column;
  border-right: 1px solid #d8dfe8;
  padding: 3px 6px 0;
  position: relative;
  flex-shrink: 0;
}
.ribbon-group:last-child { border-right: none; }
.ribbon-group-items {
  display: grid;
  grid-auto-flow: column;
  grid-template-rows: repeat(2, 1fr);
  gap: 2px 4px;
  flex: 1;
}
.ribbon-group-label {
  text-align: center;
  font-size: 9px; font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--rb-text-mute);
  padding: 2px 4px 3px;
  border-top: 1px solid #e2e8ef;
  margin-top: 2px;
  text-transform: uppercase;
  position: relative;
}
.ribbon-group-label::before {
  content: ""; position: absolute; left: 6px; right: 6px; top: 0;
  height: 2px; border-radius: 2px;
  background: var(--rg-color, #888);
  opacity: 0.7;
}
/* 그룹 색 변수 주입 */
.ribbon-group[data-group="master"]     { --rg-color: var(--rg-master); }
.ribbon-group[data-group="schedule"]   { --rg-color: var(--rg-schedule); }
.ribbon-group[data-group="routing"]    { --rg-color: var(--rg-routing); }
.ribbon-group[data-group="report"]     { --rg-color: var(--rg-report); }
.ribbon-group[data-group="validation"] { --rg-color: var(--rg-validation); }
.ribbon-group[data-group="quantity"]   { --rg-color: var(--rg-quantity); }
.ribbon-group[data-group="sourcing"]   { --rg-color: var(--rg-sourcing); }
.ribbon-group[data-group="tools"]      { --rg-color: var(--rg-tools); }
.ribbon-group[data-group="data"]       { --rg-color: var(--rg-data); }

.ribbon-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 8px;
  border-radius: 3px;
  background: transparent; border: 1px solid transparent;
  color: var(--rb-text);
  font-size: 11px; font-weight: 600;
  white-space: nowrap;
  transition: background var(--t-fast), border-color var(--t-fast);
  min-height: 24px;
}
.ribbon-btn .ic { font-size: 13px; line-height: 1; opacity: 0.8; }
.ribbon-btn:hover {
  background: var(--rb-hover);
  border-color: #b8c8dc;
}
.ribbon-btn.active {
  background: var(--rb-active);
  border-color: var(--rb-active-bd);
  color: #0a3a72;
  box-shadow: inset 0 -2px 0 var(--rg-color, #6da7e0);
}
.ribbon-btn[data-disabled="1"] {
  opacity: 0.42;
  cursor: not-allowed;
  background: transparent;
}
.ribbon-btn[data-disabled="1"]:hover {
  background: #f0f0f0;
  border-color: transparent;
}

/* 메인 콘텐츠 영역 — 추출 CSS의 .legacy-shell 등이 자체 layout을 가지므로 간섭 최소화 */
#main-content {
  min-height: calc(100vh - var(--rb-title-h) - var(--rb-ribbon-h) - 60px);
}

/* App footer */
.app-footer {
  background: var(--m-bg-deep);
  border-top: 1px solid var(--m-border-dark);
  padding: 14px 18px;
  font-size: 12px;
  color: var(--m-text-tri);
}
.app-footer-inner { max-width: 1400px; margin: 0 auto; display: flex; gap: 24px; align-items: center; flex-wrap: wrap; }
.app-footer .footer-brand strong { color: var(--m-text-bright); margin-right: 8px; }
.app-footer a { color: var(--brand-cyan); text-decoration: none; }
.app-footer .footer-meta { margin-left: auto; }

/* Toast (성능: position fixed + transform GPU) */
.toast {
  position: fixed; left: 50%; bottom: 32px; transform: translate(-50%, 60px);
  background: rgba(15, 22, 38, 0.96); color: #fff;
  padding: 10px 18px; border-radius: 8px;
  font-size: 13px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,0.35);
  opacity: 0; pointer-events: none;
  transition: opacity var(--t-base), transform var(--t-base) var(--ease-out);
  z-index: 9999;
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 반응형: 모바일에서 Ribbon은 가로 스크롤만 */
@media (max-width: 768px) {
  .ribbon-group { padding: 2px 4px 0; }
  .ribbon-group-items { gap: 1px 2px; }
  .ribbon-btn { padding: 3px 6px; font-size: 10px; }
  .secms-cable-titlebar .tb-version,
  .secms-cable-titlebar .tb-build { display: none; }
}