/* ============================================
   LNB 컴포넌트 — A 변종 + 로그인 전용 신규 메인
   사이드바(LNB) 스타일
   - 로고 / 유저카드 / 네비(아코디언/active/hover) / 인스타
   - 셸 배치(.c-lnb position/width)는 dashboard.css. 본 파일은 내부 컴포넌트.
   - 색상값: 토큰 우선(--point-blue-1 / --color-text-muted #6B7280),
     신규값은 dashboard.css :root 정의(--color-border-light / --color-bg-subtle /
     --color-text-faint / --color-success-green) 재사용.
   ============================================ */

/* 내부 좌우 패딩 16, 하단 24. 상단 패딩 0 — 로고가 상단 헤더 존(높이=상단바)으로 처리 (A5) */
.c-lnb__inner {
  padding: 0 16px 24px;
}

/* ============================================
   로고 = 사이드바 최상단 헤더 존 (A5 / req #6)
   - 높이 = 상단바 높이(--topbar-height) → 상단바 검색/아이콘과 같은 수평 라인 정렬
    - 하단 보더 없음: 가로 구분선(Line 3, x=248~)은 사이드바 우측
     콘텐츠 영역(상단바 하단)에만 존재. 사이드바에는 가로 구분선이 없으므로 로고에 border 미부여.
     (border 제거로 border-box 의 ~0.8px 콘텐츠 손실도 해소 → 상단바와 정확히 64 정렬)
   - 좌측 인셋은 .c-lnb__inner 의 padding(0 16) 이 책임 → 로고 자체 margin/padding 불필요
   ============================================ */
.c-lnb__logo {
  display: flex;
  align-items: center;
  gap: 8px;
  height: var(--topbar-height);          /* 70px — 상단바(min-height 64)와 동일 정렬 */
  box-sizing: border-box;
}
.c-lnb__logo-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  background: var(--point-blue-1);
  border-radius: 9px;
  box-shadow: 0 4px 5px rgba(79, 99, 232, 0.35);
  color: #fff;
  font-weight: 800;        /* ExtraBold */
  font-size: 16px;
  line-height: 1;
}
.c-lnb__logo-text {
  font-weight: 800;        /* ExtraBold */
  font-size: 17px;
  color: var(--point-blue-1);
  letter-spacing: -0.34px;
  line-height: 1;
}

/* ============================================
   사용자 정보 카드 (top 78, h 56) (§4-3)
   ============================================ */
.c-lnb__user {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 3px;
  /*margin-top: 16px;*/              /* 로고 존 bottom → user top */
  height: 56px;
  padding-left: 14px;
  padding-right: 14px;
  background: var(--point-blue-1);
  border-radius: 12px;
  color: #fff;
  box-sizing: border-box;
}
.c-lnb__user-name {
  margin: 0;               /* 페이지 CSS(예: mypage)의 기본 p 마진 차단 — 56px 카드 내 수직정렬 보장 (LNB는 전 페이지 공통) */
  font-weight: 700;        /* Bold */
  font-size: 14px;
  line-height: 1.2;
  color: #fff;
}
.c-lnb__user-org {
  margin: 0;               /* 위와 동일 — p 기본 마진 차단 */
  font-weight: 400;        /* Regular */
  font-size: 11.5px;
  line-height: 1.2;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   네비게이션 (top 150, gap 1) (§4-4)
   ============================================ */
.c-lnb__nav {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin-top: 16px;              /* user bottom(134) → nav top(150) = 16 */
}

/* 최상위 항목 (단독 a / 아코디언 trigger button 공통) */
.c-lnb__item {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;                  /* 단독 38 */
  padding: 0 12px;               /* 아이콘 left 12 */
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--color-text-muted);   /* #6B7280 */
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.12s ease;
}
.c-lnb__trigger { height: 41px; }      /* 아코디언 41 */

.c-lnb__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  color: currentColor;
}
.c-lnb__icon svg { width: 18px; height: 18px; }

.c-lnb__label {
  flex: 1 1 auto;
  margin-left: 10px;             /* 아이콘 end(30) → label left 40 = +10 */
  font-weight: 600;              /* SemiBold */
  font-size: 13.5px;
  line-height: 1;
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 아코디언 chevron (right, 15×15) */
.c-lnb__chevron {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 15px;
  height: 15px;
  color: var(--color-text-faint);
  transition: transform 0.2s ease;
}
.c-lnb__chevron svg { width: 15px; height: 15px; }
.c-lnb__group.is-open > .c-lnb__trigger .c-lnb__chevron { transform: rotate(180deg); }

/* hover — 배경 변경 (§4-4) */
@media (hover: hover) {
  .c-lnb__item:hover { background: var(--color-bg-subtle); }   /* #F7F8FB */
}

/* active — 좌측 강조 바 없음.
   라운드(10) 틴트 배경 + 아이콘/텍스트 파란색 + 라벨 Bold 뿐 (A2 / req #3) */
.c-lnb__item.is-active { background: rgba(75, 117, 242, 0.09); }
.c-lnb__item.is-active .c-lnb__icon,
.c-lnb__item.is-active .c-lnb__label { color: var(--point-blue-1); }
.c-lnb__item.is-active .c-lnb__label { font-weight: 700; }   /* Bold */

/* 서브메뉴 (max-height 트랜지션) (§4-4) */
.c-lnb__submenu {
  display: flex;
  flex-direction: column;
  gap: 17px;
  overflow: hidden;
  max-height: 0;
  padding: 0 38px;                       /* 좌우 38 (닫힘 시 상하 0) */
  transition: max-height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}
.c-lnb__group.is-open > .c-lnb__submenu {
  max-height: 600px;
  padding-top: 8px;
  padding-bottom: 8px;
}
.c-lnb__subitem {
  display: block;
  font-weight: 500;              /* Medium */
  font-size: 13px;
  line-height: 1.2;
  color: var(--color-text-faint);   /* #9CA3AF */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s ease;
}
@media (hover: hover) {
  .c-lnb__subitem:hover { color: var(--point-blue-1); }
}
/* 선택된 하위 메뉴(드롭다운 O 의 자식) = 파란 글씨 + 연한 파란 배경 박스 (§5 정정 · 시안 일치).
   margin/padding 상쇄로 레이아웃 footprint 는 텍스트 그대로, 배경 박스만 글자 주위로 상하6·좌우10 확장. */
.c-lnb__subitem.is-active {
  color: var(--point-blue-1);
  font-weight: 600;
  background: rgba(75, 117, 242, 0.09);
  border-radius: 8px;
  margin: -6px -10px;
  padding: 6px 10px;
}

/* 2-depth 서브그룹 (발송 방법 > 인스타 DM 발송) (step12 §6) */
.c-lnb__subgroup { display: flex; flex-direction: column; }
.c-lnb__subtrigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  margin: 0 -10px;                /* +패딩 상쇄 → 라벨은 subitem(38px)과 정렬, is-active 배경만 좌우로 확장 */
  padding: 6px 10px;
  background: none;
  border: 0;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--color-text-faint);
}
.c-lnb__subtrigger-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.c-lnb__subchevron { flex-shrink: 0; display: inline-flex; color: var(--color-text-faint); transition: transform 0.2s ease; }
.c-lnb__subgroup.is-open > .c-lnb__subtrigger .c-lnb__subchevron { transform: rotate(180deg); }
/* §5 정정: 인스타 DM 발송은 드롭다운(O)이므로 트리거 자체는 강조하지 않음 — 선택 leaf(.c-lnb__subsubitem.is-active)만 강조.
   활성 leaf 있으면 lnb.js 가 .is-open 으로 펼쳐 노출. */
@media (hover: hover) { .c-lnb__subtrigger:hover { color: var(--point-blue-1); } }
.c-lnb__subsubmenu {
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  max-height: 0;
  padding-left: 14px;             /* 한 단계 더 들여쓰기 */
  transition: max-height 0.25s ease, padding-top 0.25s ease, padding-bottom 0.25s ease;
}
.c-lnb__subgroup.is-open > .c-lnb__subsubmenu { max-height: 400px; padding-top: 14px; padding-bottom: 2px; }
.c-lnb__subsubitem {
  display: block;
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.2;
  color: var(--color-text-faint);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: color 0.12s ease;
}
@media (hover: hover) { .c-lnb__subsubitem:hover { color: var(--point-blue-1); } }
/* §6 — 인스타 댓글 추첨 등 선택 leaf: 파란 글씨 + 배경 박스 (§5 정정 · subitem 과 동일 표현) */
.c-lnb__subsubitem.is-active {
  color: var(--point-blue-1);
  font-weight: 600;
  background: rgba(75, 117, 242, 0.09);
  border-radius: 8px;
  margin: -5px -10px;
  padding: 5px 10px;
}

/* ============================================
   인스타그램 버튼 (네비 하단) (§4-5)
   ============================================ */
.c-lnb__instagram {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;                   /* 내부 폭 216 (시안 215) */
  margin-top: 16px;
  padding: 10px 12px;
  border: none;
  background: var(--color-bg-subtle);   /* #F7F8FB */
  border-radius: 10px;
  text-align: left;
  cursor: pointer;
  box-sizing: border-box;
}
.c-lnb__instagram-icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--color-text-muted);   /* #6B7280 */
}
.c-lnb__instagram-icon svg { width: 18px; height: 18px; }
.c-lnb__instagram-body {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.c-lnb__instagram-title {
  font-weight: 700;              /* Bold */
  font-size: 13.5px;
  color: var(--color-text-muted);   /* #6B7280 */
}
.c-lnb__instagram-action {
  font-weight: 500;              /* Medium */
  font-size: 13px;
  color: var(--point-blue-1);    /* 연동하기 */
}
.c-lnb__instagram-status {
  font-weight: 500;              /* Medium */
  font-size: 13px;
  color: var(--color-success-green);   /* 연동 중 #2E9E68 */
}
.c-lnb__instagram-name {
  font-weight: 500;              /* Medium */
  font-size: 13px;
  color: var(--color-text-faint);   /* #9CA3AF */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.c-lnb__instagram-chevron {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  margin-left: auto;
  color: var(--color-text-faint);
}
.c-lnb__instagram-chevron svg { width: 15px; height: 15px; }

/* ============================================
   통일 드로어 검색 (.c-lnb__search) — nav 상단, 로그인·비로그인 공통. 주로 모바일 드로어에서 노출.
   ============================================ */
.c-lnb__search {
  display: none;   /* 데스크탑 LNB(≥1025) 숨김 — 모바일 드로어(≤1024)에서만 노출 (아래 @media) */
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
  padding: 9px 12px;
  background: var(--color-bg-subtle);   /* #F7F8FB — LNB hover/인스타 박스 톤과 통일 */
  border-radius: 10px;
  box-sizing: border-box;
}
.c-lnb__search-icon { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-text-faint); }
.c-lnb__search-input {
  flex: 1 1 auto;
  min-width: 0;
  border: none;
  background: transparent;
  font-size: 13px;
  color: var(--color-mono-1);
  outline: none;
}
.c-lnb__search-input::placeholder { color: var(--color-text-faint); }

/* ============================================
   로그인/시작하기 푸터 (.c-lnb__foot) — 비로그인 드로어 전용(th:unless isLogin). 버튼 시스템 Lg(44).
   ============================================ */
.c-lnb__foot {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}
.c-lnb__foot-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  border-radius: var(--radius-md);   /* 8px */
  font-weight: 600;
  font-size: 14px;
  text-decoration: none;
  box-sizing: border-box;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.c-lnb__foot-btn--primary {
  background: var(--point-blue-1);
  color: #fff;
  border: 1.5px solid var(--point-blue-1);
}
.c-lnb__foot-btn--outline {
  background: #fff;
  color: var(--point-blue-1);
  border: 1.5px solid #d1d9f7;
}
@media (hover: hover) {
  .c-lnb__foot-btn--primary:hover { background: #3a64e0; border-color: #3a64e0; }
  .c-lnb__foot-btn--outline:hover { background: #f4f7ff; }
}

/* ============================================
   ≤1024 모바일 드로어 — 사이드바 로고 숨김(상단 헤더바가 로고 담당) + 로고 빈자리 상단 여백 보정.
   데스크탑 로그인(≥1025)은 로고 노출 유지 → 무손상.
   ============================================ */
@media (max-width: 1024px) {
  .c-lnb__logo { display: none; }
  .c-lnb__inner { padding-top: 16px; }
  .c-lnb__search { display: flex; }   /* 검색바는 모바일(<1024) 드로어에서만 노출 */
}