/* ═══════════════════════════════════════════════════════════
   app-shell.css — 작업 공간 전역 셸 (좌측 접이식 사이드바)
   OrangeLibrary UX/UI 재설계 1단계.
   "작가를 위한 전문 글쓰기 작업실" 방향: 흰 배경 · 오렌지는 포인트만 ·
   Pretendard 슬림 타이포. 헤더(.hdr)의 Noto Serif !important를
   물려받지 않도록 사이드바는 독립 폰트 스택을 강제한다.
   ═══════════════════════════════════════════════════════════ */

:root {
  --ol-sidebar-header-h: 56px;   /* 기존 .hdr 높이와 동일 */
  --ol-sidebar-item-h: 36px;     /* 항목 사이 숨 쉴 틈을 준다 */
  --ol-notice-h: 0px;            /* 공지 배너 높이 (layout.js가 실측값으로 갱신) */
}
/* 사이드바 폭은 리터럴 값 사용.
   transition이 걸린 padding-left/width를 var(A)→var(B)로 바꾸면
   Chromium이 보간을 시작값에서 멈추는 버그가 있어 236px/64px를 직접 쓴다. */

/* ── 콘텐츠 영역 밀기 (헤더는 fixed full-width라 영향 없음) ──
   transition을 걸면 has-sidebar 클래스를 런타임에 추가할 때 Chromium이
   padding-left 보간을 시작값(0)에서 멈추는 버그가 있어 트랜지션을 쓰지 않는다.
   (사이드바 자체 width는 .ol-sidebar에서 애니메이션 유지) */
body.has-sidebar {
  padding-left: 236px;
}
body.has-sidebar.sidebar-collapsed {
  padding-left: 64px;
}

/* 에디터(#page-editor)는 position:fixed 전면 레이아웃이라 body의 padding-left가
   먹지 않는다. 사이드바 폭만큼 직접 밀어준다. */
body.has-sidebar #page-editor { left: 236px; }
body.has-sidebar.sidebar-collapsed #page-editor { left: 64px; }

/* ═══ 사이드바 컨테이너 ═══ */
.ol-sidebar {
  position: fixed;
  top: calc(var(--ol-sidebar-header-h) + var(--ol-notice-h, 0px));
  left: 0;
  bottom: 0;
  width: 236px;
  z-index: 190;                 /* 헤더(.hdr z-index:200) 아래 */
  background: var(--ol-card);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: width .18s ease;
  font-family: var(--font-ui);
}
.ol-sidebar, .ol-sidebar * { font-family: inherit !important; }
body.sidebar-collapsed .ol-sidebar { width: 64px; }

/* 스크롤 영역 */
.ol-sidebar-scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 10px 12px 16px;
}
.ol-sidebar-scroll::-webkit-scrollbar { width: 6px; }
.ol-sidebar-scroll::-webkit-scrollbar-thumb { background: rgba(0,0,0,.1); border-radius: 3px; }

/* ═══ 섹션 그룹 ═══ */
.ol-nav-section { margin-top: 14px; }
.ol-nav-section:first-child { margin-top: 2px; }
.ol-nav-label {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .04em;
  color: var(--ol-text-4, var(--ol-text-4));
  padding: 0 10px 6px;
  white-space: nowrap;
  overflow: hidden;
}
body.sidebar-collapsed .ol-nav-label {
  visibility: hidden;
  height: 8px;
  padding: 0;
}

/* ═══ 메뉴 항목 ═══ */
.ol-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  height: var(--ol-sidebar-item-h);
  padding: 0 10px;
  margin: 2px 0;
  border-radius: 6px;
  color: var(--ol-text-2, var(--ol-text-2));
  font-size: 14px;
  font-weight: 400;              /* 기본은 얇게 — 굵기는 선택된 항목에만 준다 */
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.ol-nav-item:hover { background: var(--ol-hover, rgba(191,140,128,.08)); color: var(--ol-text, var(--ol-text)); }
.ol-nav-item.on {
  background: var(--brand-soft-bg, rgba(191,140,128,.1));
  color: var(--brand-soft-text, var(--brand-dk));
  font-weight: 500;
}
.ol-nav-item.on::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 3px; height: 16px;
  border-radius: 0 3px 3px 0;
  background: var(--brand, var(--brand));
}
.ol-nav-item .ol-ico {
  flex: 0 0 18px;
  width: 18px; height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: currentColor;
}
.ol-nav-item .ol-ico svg { width: 17px; height: 17px; stroke-width: 1.4; }
/* 아이콘은 글자를 돕는 보조 신호다 — 톤을 낮춰 텍스트와 여백이 먼저 읽히게 한다.
   (접힘 상태에선 아이콘이 유일한 단서라 원래 밝기로 되돌린다) */
.ol-nav-item .ol-ico { opacity: .5; }
.ol-nav-item:hover .ol-ico,
.ol-nav-item.on .ol-ico,
body.sidebar-collapsed .ol-nav-item .ol-ico { opacity: 1; }
.ol-nav-item .ol-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 비용 상태 배지 (무료 / 포인트 차감 / 작가 전용) */
.ol-nav-item .ol-tag {
  flex: 0 0 auto;
  font-size: 10px;
  font-weight: 600;
  line-height: 1;
  padding: 3px 5px;
  border-radius: 5px;
  color: var(--ol-text-3, var(--ol-text-3));
  background: var(--ol-sunken);
}
.ol-nav-item .ol-tag.free { color: #3A7D5F; background: rgba(58,125,95,.09); }
.ol-nav-item .ol-tag.paid { color: var(--brand-soft-text, var(--brand-dk)); background: var(--brand-soft-bg, rgba(191,140,128,.1)); }

/* ── 접힌 상태: 아이콘만 + tooltip ── */
body.sidebar-collapsed .ol-nav-item {
  justify-content: center;
  padding: 0;
}
body.sidebar-collapsed .ol-nav-item .ol-label,
body.sidebar-collapsed .ol-nav-item .ol-tag { display: none; }
body.sidebar-collapsed .ol-nav-item::after {
  content: attr(data-tip);
  position: absolute;
  left: calc(100% + 10px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ol-text);
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
  z-index: 300;
  box-shadow:var(--ol-shadow-pop);
}
body.sidebar-collapsed .ol-nav-item:hover::after { opacity: 1; }

/* ═══ 접기/펼치기 토글 (사이드바 하단) ═══ */
.ol-sidebar-foot {
  border-top: 1px solid var(--line);
  padding: 8px 12px;
}
.ol-collapse-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--ol-text-3, var(--ol-text-3));
  font-size: 12.5px;
  cursor: pointer;
  transition: background .12s ease;
}
.ol-collapse-btn:hover { background: var(--ol-hover, rgba(191,140,128,.08)); color: var(--ol-text, var(--ol-text)); }
.ol-collapse-btn .ol-ico { flex: 0 0 18px; width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; }
.ol-collapse-btn .ol-ico svg { width: 18px; height: 18px; transition: transform .18s ease; }
body.sidebar-collapsed .ol-collapse-btn { justify-content: center; padding: 0; }
body.sidebar-collapsed .ol-collapse-btn .ol-label { display: none; }
body.sidebar-collapsed .ol-collapse-btn .ol-ico svg { transform: rotate(180deg); }

/* ═══ 모바일 drawer ═══ */
.ol-sidebar-backdrop {
  position: fixed;
  inset: 0;
  z-index: 189;
  background: rgba(0,0,0,.4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}

/* 모바일 사이드바 토글 버튼 (헤더 좌측 대체용 플로팅) */
.ol-mobile-toggle { display: none; }

@media (max-width: 900px) {
  body.has-sidebar,
  body.has-sidebar.sidebar-collapsed { padding-left: 0; }

  .ol-sidebar {
    width: 236px;
    transform: translateX(-100%);
    transition: transform .22s ease;
    box-shadow: 2px 0 16px rgba(0,0,0,.08);
  }
  body.sidebar-collapsed .ol-sidebar { width: 236px; }  /* 모바일은 접힘 무시 */
  body.drawer-open .ol-sidebar { transform: translateX(0); }
  /* 모바일은 드로어라 콘텐츠를 밀지 않는다 */
  body.has-sidebar #page-editor,
  body.has-sidebar.sidebar-collapsed #page-editor { left: 0; }
  body.drawer-open .ol-sidebar-backdrop { opacity: 1; pointer-events: auto; }

  /* 모바일에선 접기 토글 숨기고 tooltip 규칙 무효화 */
  .ol-sidebar-foot { display: none; }
  body.sidebar-collapsed .ol-nav-item { justify-content: flex-start; padding: 0 10px; }
  body.sidebar-collapsed .ol-nav-item .ol-label,
  body.sidebar-collapsed .ol-nav-item .ol-tag { display: flex; }
  body.sidebar-collapsed .ol-nav-item::after { display: none; }
  body.sidebar-collapsed .ol-nav-label { visibility: visible; height: auto; padding: 0 10px 6px; }

  /* 작업 공간 페이지에선 사이드바 drawer가 모바일 네비를 대체하므로
     헤더의 기본 햄버거(mobileNavStandalone 토글)를 숨겨 좌상단 중복을 막는다. */
  body.ol-has-shell .hamburger-btn { display: none !important; }
  /* 햄버거가 빠지면 로고가 좌측 끝으로 붙어 fixed 토글(12px+36px)에 가린다 */
  body.ol-has-shell .hdr-logo { margin-left: 48px; }

  /* 모바일 토글 버튼: 헤더 위 좌측에 노출 */
  .ol-mobile-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    top: 10px; left: 12px;
    z-index: 201;
    width: 36px; height: 36px;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--ol-card);
    color: var(--ol-text, var(--ol-text));
    cursor: pointer;
  }
  .ol-mobile-toggle svg { width: 20px; height: 20px; }
}