/* ============================================================
 * scm-lnb — left navigation bar (LNB), 2-level menu
 * ------------------------------------------------------------
 * 모든 SCM Hub 페이지 공통 좌측 메뉴.
 *
 * Spec
 *   - position: sticky, top:64 (topbar 높이), z-index:15
 *     (z-index 15 → filter-bar(12)/stats-bar(11) negative-margin
 *      이 LNB 우측 border 를 덮지 않도록 위로 올림)
 *   - width: var(--scm-lnb-width)  (collapsed 56 / expanded 260)
 *   - height: calc(100vh - 64px)
 *   - background #fff (legacy 와 동일), border-right 1px #E5E5E5
 *   - transition: width 0.2s
 *   - L1 row: 48 min-h, padding 12/16, hover #FAFAFA, is-active 시
 *     배경 #F5F5F5 + 좌측 3px 파란(#245EFF) 인디케이터
 *   - L2 row: 36h, padding 8 16 8 54, hover #FAFAFA, is-active 시 600
 *   - L1 chevron: collapsed→opacity 0, expanded→opacity 1
 *   - is-open 일 때 chevron 회전 (default 180 → is-open 0)
 *   - collapsed 상태에서 hover 하면 layer 로 띄움 (push 없이)
 *
 * 사용 페이지 측 :root 정의:
 *   :root { --scm-lnb-width: 56px; }
 *   html.is-lnb-open { --scm-lnb-width: 260px; }
 * ============================================================ */

.scm-lnb {
  position: fixed;
  top: 64px;
  left: 0;
  z-index: 15;
  width: var(--scm-lnb-width, 56px);
  height: calc(100vh - 64px);
  background: #fff;
  border-right: 1px solid #E5E5E5;
  overflow-y: auto;
  overflow-x: hidden;
  transition: width 0.2s ease;
  display: flex;
  flex-direction: column;
  padding: 8px 0;
}

/* LNB 가 position:fixed 로 grid flow 에서 제외되므로,
   .app grid 의 main 을 명시적으로 column 2 에 배치해 LNB width 만큼 비워둠 */
.app > main {
  grid-column: 2;
}

.scm-lnb-item {
  display: flex;
  flex-direction: column;
}

.scm-lnb-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 260px;
  min-height: 48px;
  padding: 12px 16px;
  border: 0;
  background: transparent;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  color: inherit;
  box-sizing: border-box;
}
.scm-lnb-row:hover { background: #FAFAFA; }
.scm-lnb-row::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: transparent;
}

.scm-lnb-item.is-active > .scm-lnb-row { background: #F5F5F5; }
.scm-lnb-item.is-active > .scm-lnb-row::before { background: #245EFF; }

.scm-lnb-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #1A1A1A;
}
.scm-lnb-icon svg { width: 24px; height: 24px; }

.scm-lnb-label {
  flex: 1;
  min-width: 0;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.36;
  color: #000;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: left;
  opacity: 0;
  transition: opacity 0.12s ease;
}

.scm-lnb-chev {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #000;
  transition: transform 0.18s ease, opacity 0.12s ease;
  transform: rotate(180deg);
  opacity: 0;
}
.scm-lnb-chev svg { width: 16px; height: 16px; }
.scm-lnb-item.is-open > .scm-lnb-row .scm-lnb-chev { transform: rotate(0deg); }

.scm-lnb-l2-list {
  display: none;
  padding: 0 0 8px;
}

/* expanded 상태 — html.is-lnb-open 토글 시 라벨/셰브론/L2 노출 */
html.is-lnb-open .scm-lnb-label,
html.is-lnb-open .scm-lnb-chev { opacity: 1; }
html.is-lnb-open .scm-lnb-item.is-open .scm-lnb-l2-list {
  display: flex;
  flex-direction: column;
}

/* collapsed 상태 hover → 레이어 오버레이 (콘텐츠 push 없이 위로 띄움) */
html:not(.is-lnb-open) .scm-lnb:hover {
  width: 260px;
  z-index: 30;
  box-shadow: 2px 0 6px rgba(0, 0, 0, 0.05);
}
html:not(.is-lnb-open) .scm-lnb:hover .scm-lnb-label,
html:not(.is-lnb-open) .scm-lnb:hover .scm-lnb-chev { opacity: 1; }
html:not(.is-lnb-open) .scm-lnb:hover .scm-lnb-item.is-open .scm-lnb-l2-list {
  display: flex;
  flex-direction: column;
}

.scm-lnb-l2 {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 8px 16px 8px 54px;
  width: 260px;
  box-sizing: border-box;
  text-decoration: none;
  font-size: 15px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  overflow: hidden;
  white-space: nowrap;
}
.scm-lnb-l2:hover { background: #FAFAFA; }
.scm-lnb-l2.is-active { font-weight: 600; color: #000; }

.scm-lnb-l2-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

/* LNB 2뎁스 태그 — NEW(완료) 만 표시. 작업중(미구현) 태그는 더 이상 노출하지 않음 */
.scm-lnb-tag {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 2px;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  flex-shrink: 0;
  letter-spacing: 0.2px;
}
.scm-lnb-tag--new { background: #E2F1FF; color: #1A56DB; }
/* '작업중' 태그 숨김 — 텍스트만 제거하고 메뉴 자체는 disabled 처리로 안내 */
.scm-lnb-tag--wip { display: none; }

/* 화면이 없는 메뉴 (href="#") — 비활성 처리: 회색 텍스트 + not-allowed cursor + 호버 무효 */
.scm-lnb-l2[href="#"],
.scm-lnb-l2[href=""] {
  color: rgba(0, 0, 0, 0.30);
  cursor: not-allowed;
  pointer-events: none;
}
.scm-lnb-l2[href="#"] .scm-lnb-l2-text,
.scm-lnb-l2[href=""] .scm-lnb-l2-text {
  color: rgba(0, 0, 0, 0.30);
}