/* Oyen Web 보충 스타일 — 제공된 디자인 시스템에 없는 소수 요소만. 토큰 재사용. */

/* 메뉴바 복원 → tokens.css 원본 5행 그리드(menubar/toolbar/tabbar/main/status) 그대로 사용.
   dialogRoot/siteManagerRoot 는 그리드 행을 차지하지 않도록 contents 처리(자식 backdrop 은 position:fixed). */
#dialogRoot, #siteManagerRoot { display: contents; }
.toolbar .tool-ic { display: block; }
.toolbar #toolServers, .toolbar #toolSettings { margin-left: 2px; }

/* 토스트 */
.oyen-toast {
  position: fixed; left: 50%; bottom: 34px; transform: translateX(-50%) translateY(12px);
  background: var(--fg); color: var(--bg-base, #fff); padding: 8px 16px; border-radius: 8px;
  font-size: 13px; opacity: 0; pointer-events: none; transition: opacity .18s, transform .18s; z-index: 4000;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.oyen-toast.show { opacity: .96; transform: translateX(-50%) translateY(0); }

/* 브레드크럼 */
.breadcrumb-bar { display: flex; align-items: center; gap: 4px; padding: 0 10px; font-size: 12px; color: var(--fg-muted); overflow: hidden; }
.breadcrumb-bar .crumb { cursor: pointer; padding: 2px 4px; border-radius: 4px; white-space: nowrap; }
.breadcrumb-bar .crumb:hover { background: var(--accent-tint-hover); color: var(--fg); }
.breadcrumb-bar .crumb-sep { color: var(--line-strong); }

/* 상태바: 디자인 시스템(.status/.status-conn/.status-meta)을 그대로 사용 — 오버라이드 없음. */

/* Site Manager 추가 버튼 */
.site-add-btn { float: right; font-size: 12px; background: var(--accent); color: #fff; border: 0; border-radius: 6px; padding: 3px 10px; cursor: pointer; }

/* 프로필 폼: 레이아웃·라디오·pw-field·pem-row·jump-fields 는 전부 dialogs.css 디자인 그대로 사용.
   여기선 스크롤 래퍼 + 입력 폭 채움 + [hidden] 복원만 보충. */
.remote-scroll { max-height: 56vh; overflow: auto; padding: 2px 2px 0; }
.remote-form .confirm-input { width: 100%; box-sizing: border-box; }
/* remote-jump-fields 는 display:grid 라 [hidden]의 display:none 을 덮음 → 토글 위해 복원 */
.remote-jump-fields[hidden] { display: none; }

/* 에디터/미리보기 호스트가 영역을 꽉 채우도록 */
.editor-host, .preview-root { width: 100%; height: 100%; }
.editor-host .cm-editor { height: 100%; }
.image-preview-wrap, .pdf-preview, .media-preview-box { width: 100%; height: 100%; }
.pdf-preview { border: 0; }
.image-preview-img { max-width: 100%; max-height: 100%; object-fit: contain; }