/* BPack.Remote 콘솔 공용 스타일. 색·간격은 BPack.Components 시맨틱 토큰(var(--bp-*))만 사용한다.
   페이지 레이아웃은 라이브러리 템플릿 클래스(.bp-tpl-* · .bp-content-layout-*)가 담당한다. */

/* 헤더 계정 표시는 BPack.Components 0.7.4 에서 라이브러리로 왔다(.bp-header-user-* 계열).
   좁은 화면에서 이름·역할을 숨기는 규칙도 거기 있다(≤720px) — 호스트가 들고 있지 않는다. */

/* ── 로그인 패널 (BpLoginPanel 본문) ── */
.remote-form { display: flex; flex-direction: column; gap: var(--bp-space-3); }
.remote-switch { margin-top: var(--bp-space-3); font-size: var(--bp-size-small); text-align: center; }
.remote-muted { color: var(--bp-text-secondary); margin: var(--bp-space-1) 0; }

/* ── 안내 문구(RemoteNotice, DES-REMOTE-UI-SHELL 1.1.0: BpAlert 대신 상자 없는 문구) ── */
.remote-notice { display: flex; align-items: flex-start; gap: var(--bp-space-2); font-size: var(--bp-size-small); line-height: 1.5; color: var(--bp-text-secondary); word-break: keep-all; }
.remote-notice > i { flex: 0 0 auto; }
.remote-notice-warning { color: var(--bp-warning-fg); }
.remote-notice-error { color: var(--bp-error-fg); }
/* Docs 템플릿 .tpl-detailform-empty 와 같은 모양: 영역 가운데 아이콘+문구 한 줄. */
.remote-notice-centered { flex: 1 1 auto; min-height: 120px; align-items: center; justify-content: center; text-align: center; padding: var(--bp-space-4); color: var(--bp-text-tertiary); }

/* 목록 grid 한 줄 표시(DES-REMOTE-UI-SHELL 1.1.0): 열 폭은 화면 폭 안에서 고정, 넘치는 글자는 말줄임. */
.remote-grid-oneline .bp-grid-table { table-layout: fixed; }
.remote-grid-oneline .bp-grid-td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 최소 폭 = 고정 열 합 + 폭 미지정 열 140px씩(장비 목록은 열이 많아 130px씩): 좁은 창에서 열이 0px로 사라지지 않고 grid 안에서 가로 스크롤(DES-REMOTE-UI-SHELL 1.1.1). */
.remote-grid-devices .bp-grid-table { min-width: 819px; } /* 장비 상태 84 + 원격 연결 상태 108 + ID 104 + OS 128 + 접속 155 + 장비명·고객/사업장 120씩 */
.remote-session-tag + .remote-session-tag { margin-left: 4px; }
.remote-grid-tokens .bp-grid-table { min-width: 1140px; }
.remote-grid-audit .bp-grid-table { min-width: 1030px; }
.remote-grid-sessions .bp-grid-table { min-width: 1290px; }
.remote-setup-code code { font-size: var(--bp-size-body); letter-spacing: 1px; word-break: break-all; user-select: all; }

/* ── 1회 표시 비밀(설정 코드·등록 토큰) 모달 ── */
.remote-setup-code { display: grid; grid-template-columns: auto 1fr; gap: var(--bp-space-2) var(--bp-space-3); margin: var(--bp-space-3) 0 0; }
.remote-setup-code dt { color: var(--bp-text-secondary); }
.remote-setup-code dd { margin: 0; }

/* ── 그리드 + 상세 템플릿(TplFormGridDoc)의 상세 패널 스타일 계승 ──
   Docs 에서는 페이지 scoped CSS 지만 여기서는 계정·장비 두 화면이 같이 쓰므로 한 곳에 둔다. */
.tpl-detail-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--bp-space-1);
    display: flex;
    flex-direction: column;
    gap: var(--bp-space-5);
}

.tpl-detail-hero {
    display: flex;
    gap: var(--bp-space-4);
    align-items: center;
    padding-bottom: var(--bp-space-4);
    border-bottom: 1px solid var(--bp-border-light);
}

.tpl-detail-identity { min-width: 0; display: flex; flex-direction: column; gap: 2px; }

.tpl-detail-code {
    font-size: var(--bp-size-h3);
    font-weight: var(--bp-weight-bold);
    color: var(--bp-text-primary);
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-detail-name {
    font-size: var(--bp-size-body);
    color: var(--bp-text-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tpl-detail-meta { display: flex; align-items: center; gap: var(--bp-space-2); flex-wrap: wrap; margin-top: var(--bp-space-2); }

.tpl-detail-loc { font-size: var(--bp-size-small); color: var(--bp-text-tertiary); display: inline-flex; align-items: center; gap: 4px; }

.tpl-detail-section { display: flex; flex-direction: column; gap: var(--bp-space-2); }

.tpl-detail-section-title {
    font-size: var(--bp-size-small);
    font-weight: var(--bp-weight-semibold);
    color: var(--bp-text-secondary);
    padding-bottom: var(--bp-space-1);
    border-bottom: 1px solid var(--bp-border-light);
}

.tpl-detail-section .bp-tpl-form-grid { padding: 0; }
.scope-add { display: flex; align-items: center; gap: var(--bp-space-2); flex-wrap: wrap; }
.viewer-title { font-weight: var(--bp-weight-semibold); color: var(--bp-text-primary); font-size: var(--bp-size-small); }
.viewer-meta { color: var(--bp-text-tertiary); font-size: var(--bp-size-xs); }
/* 원격 화면 + (여백이 좌우에 남을 때) 오른쪽 도구 패널(TSK-M04-008). */
.viewer-body { display: flex; height: 100%; min-height: 0; gap: var(--bp-space-2); }
.viewer-body > .viewer-surface { flex: 1 1 0; min-width: 0; }
.viewer-side { flex: 0 0 168px; display: flex; flex-direction: column; align-items: stretch; gap: var(--bp-space-2); min-height: 0; overflow-y: auto; padding-left: var(--bp-space-2); border-left: 1px solid var(--bp-border-light); }
.viewer-side > * { width: 100%; }
.viewer-side > .bp-content-layout-spacer { display: none; }
.viewer-side > .bp-badge { align-self: flex-start; width: auto; }
.viewer-side-info { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--bp-space-2); border-bottom: 1px solid var(--bp-border-light); }
.viewer-side-info .viewer-title { font-size: var(--bp-size-xs); overflow-wrap: anywhere; }
.viewer-side-info .viewer-meta { display: flex; flex-direction: column; font-size: var(--bp-size-2xs); }
.viewer-side .bp-btn, .viewer-side .bp-dropdown-trigger { width: 100%; }
.viewer-side .bp-btn { justify-content: flex-start; }
.viewer-side .viewer-end { margin-top: auto; }
/* 모니터 번호 버튼은 한 줄에 나란히(우측 패널에서도 각자 폭). */
.viewer-monitors { margin-right: 0; flex-wrap: wrap; }
.viewer-side .viewer-monitors .bp-btn { width: auto; flex: 1 1 0; justify-content: center; }
.viewer-side .viewer-monitors .viewer-monitor-all { flex-basis: 100%; }
.viewer-surface { position: relative; display: flex; flex-direction: column; gap: var(--bp-space-2); height: 100%; min-height: 0; overflow: auto; }
/* 원격 화면 상태 안내: canvas 위에 겹쳐 레이아웃을 밀지 않는다(DES-M04-UI 1.3.1). */
.viewer-overlay { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: var(--bp-space-4); pointer-events: none; }
.viewer-overlay-card { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: var(--bp-space-3); max-width: 480px; padding: var(--bp-space-5) var(--bp-space-6); text-align: center; word-break: keep-all; background: var(--bp-bg-surface); border: 1px solid var(--bp-border-light); border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow-lg); color: var(--bp-text-primary); }
.viewer-overlay-card > i { font-size: var(--bp-size-h2); color: var(--bp-text-tertiary); }
.viewer-overlay-card-warning > i { color: var(--bp-warning-fg); }
.role-help-trigger { border: 0; background: none; padding: 0 2px; color: var(--bp-text-tertiary); cursor: pointer; vertical-align: middle; }
.role-help-trigger:hover { color: var(--bp-primary); }
.role-help-table { width: 100%; border-collapse: collapse; font-size: var(--bp-size-small); }
.role-help-table th, .role-help-table td { padding: 6px 8px; border-bottom: 1px solid var(--bp-border-light); text-align: left; }
.role-help-table th:not(:first-child), .role-help-cell { text-align: center; white-space: nowrap; }
.role-help-table th { color: var(--bp-text-secondary); font-weight: var(--bp-weight-semibold); background: var(--bp-bg-muted); }
.role-help-yes { color: var(--bp-success-fg); font-size: 1.1em; }
.role-help-no { color: var(--bp-text-tertiary); }
.role-help-notes { margin: var(--bp-space-3) 0 0 var(--bp-space-4); font-size: var(--bp-size-small); color: var(--bp-text-secondary); display: flex; flex-direction: column; gap: 4px; }
.token-modal-platforms dt { align-self: center; }
.token-modal-actions { display: flex; flex-wrap: wrap; gap: var(--bp-space-2); }
.terminal-surface { overflow: hidden; background: #0f1419; }
.terminal-host { flex: 1 1 auto; min-height: 0; padding: var(--bp-space-2); }
/* bp-reset's "* { font-family: Pretendard }" would reach xterm's cells and its width probe: keep the terminal monospace. */
.terminal-host .xterm, .terminal-host .xterm * { font-family: "D2Coding", Consolas, "DejaVu Sans Mono", monospace; }
.terminal-host-hidden { visibility: hidden; }
.terminal-signin { width: 320px; max-width: 100%; align-items: stretch; text-align: left; }
.terminal-signin > i, .terminal-signin > span:first-of-type { align-self: center; }
.terminal-signin-error { color: var(--bp-error-fg); font-size: var(--bp-size-small); }
.viewer-overlay-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bp-space-2); }
/* Fills the surface and scales the remote screen up or down keeping its ratio (object-fit: contain; viewer.js maps the pointer
   through the letterbox). */
.viewer-canvas { display: block; flex: 1 1 0; min-height: 0; width: 100%; object-fit: contain; background: var(--bp-bg-muted); outline: none; cursor: default; touch-action: none; transform-origin: 0 0; }
/* Zoomed on this screen (TSK-F04-025): the enlarged picture is clipped to the surface, no scrollbars. */
/* On-screen keyboard (TSK-F04-026): a hidden input that only holds the phone keyboard open; the button shows on touch screens only. */
.viewer-typer { position: absolute; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; }
@media (hover: hover) and (pointer: fine) { .viewer-touch-only { display: none !important; } }
.viewer-surface-zoomed { overflow: hidden; }
.viewer-canvas:focus { box-shadow: 0 0 0 2px var(--bp-primary); }
.viewer-canvas-idle { opacity: 0.4; }
/* No frame ever shown here (session already over when the page opened): no empty canvas box behind the notice. */
.viewer-canvas-empty { visibility: hidden; }
.viewer-keys { display: flex; flex-direction: column; gap: var(--bp-space-1); padding: var(--bp-space-2); min-width: 220px; }

/* 전체 화면(Keyboard Lock 없는 브라우저는 창 꽉 채우기)과 떠 있는 버튼(TSK-F04-023). */
.viewer-surface-fill { position: fixed; inset: 0; z-index: 1000; padding: 0; background: var(--bp-bg-muted); }
.viewer-float { position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: 4; display: flex; flex-direction: column; align-items: center; }
.viewer-float-menu { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bp-space-2); max-width: calc(100vw - 2 * var(--bp-space-3)); padding: var(--bp-space-2) var(--bp-space-3); background: var(--bp-bg-surface); border: 1px solid var(--bp-border-light); border-top: 0; border-radius: 0 0 var(--bp-radius-md) var(--bp-radius-md); box-shadow: var(--bp-shadow-lg); }
.viewer-float-handle { width: 56px; height: 24px; padding: 0; border: 1px solid var(--bp-border-light); border-top: 0; border-radius: 0 0 var(--bp-radius-md) var(--bp-radius-md); background: var(--bp-bg-surface); color: var(--bp-text-secondary); opacity: 0.75; cursor: pointer; line-height: 1; }
.viewer-float-handle:hover, .viewer-float-handle[aria-expanded="true"] { opacity: 1; color: var(--bp-primary); }

/* 원격에서 복사한 파일 받기 카드(TSK-F04-022): 원격 화면 오른쪽 위에 겹친다. */
.viewer-copied { position: absolute; top: var(--bp-space-3); right: var(--bp-space-3); z-index: 3; display: flex; align-items: center; gap: var(--bp-space-3); max-width: calc(100% - 2 * var(--bp-space-3)); padding: var(--bp-space-3) var(--bp-space-4); background: var(--bp-bg-surface); border: 1px solid var(--bp-border-light); border-radius: var(--bp-radius-lg); box-shadow: var(--bp-shadow-lg); color: var(--bp-text-primary); }
.viewer-copied > i { font-size: var(--bp-size-h3); color: var(--bp-primary); }
.viewer-copied-text { display: flex; flex-direction: column; min-width: 0; }
.viewer-copied-text .viewer-meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; }

/* 원격 PC 파일 받기 창(TSK-F04-006) */
.viewer-files-path { display: flex; align-items: center; gap: var(--bp-space-2); margin-bottom: var(--bp-space-2); }
.viewer-files-path code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-files-grid { height: 420px; overflow: auto; }

/* Separate remote window (TSK-M04-002): the remote page fills the window, no shell around it. */
.remote-window {
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--bp-bg-surface);
}

.remote-window > * {
    flex: 1 1 auto;
    min-height: 0;
}

/* Screen-reader-only heading of the separate remote window (TSK-M04-003). */
.remote-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.remote-window-message {
    padding: var(--bp-space-4);
    align-items: center;
    justify-content: center;
}

.remote-window-message > * {
    flex: 0 0 auto;
}

/* ── 하단 작업표시줄(RemoteStatusBar, DES-REMOTE-UI-SHELL 1.4.0) — 바탕·글꼴은 BPack.Components .bp-footer ── */
.remote-conn { display: inline-flex; align-items: center; gap: var(--bp-space-1); color: var(--bp-success); }
.remote-conn[data-state="reconnecting"] { color: var(--bp-warning); }
.remote-conn[data-state="reconnecting"] .status-dot { background: var(--bp-warning); box-shadow: 0 0 8px var(--bp-warning); }
.remote-conn[data-state="lost"] { color: var(--bp-error); }
.remote-conn[data-state="lost"] .status-dot { background: var(--bp-error); box-shadow: 0 0 8px var(--bp-error); }
.remote-status-link { display: inline-flex; align-items: center; gap: var(--bp-space-1); padding: 0 var(--bp-space-1); border: 0; border-radius: var(--bp-radius-sm); background: transparent; color: inherit; font: inherit; cursor: pointer; }
.remote-status-link:hover { color: var(--bp-neutral-0); background: var(--bp-neutral-800); }
/* .bp-footer 를 앞에 붙여 라이브러리 .bp-footer .statusbar-center(display:flex)보다 우선. */
@media (max-width: 640px) {
    .bp-footer .remote-status-wide { display: none; }
}

/* grid 행 동작 버튼 묶음: 한 줄 유지(TSK-F01-019). */
.remote-row-actions { display: inline-flex; align-items: center; gap: var(--bp-space-1); white-space: nowrap; }

/* 설정 (TSK-F06-001 → TSK-F06-004 BpDisplaySettings) — 칸 배치는 부품이 정한다. 페이지 폭은 --settings-width 하나. */
/* Block flow, not flex column: the shell gives this div a fixed height and flex children would share it and clip (as DeviceMonitor found). */
.remote-settings { --settings-width: 960px; width: 100%; padding: var(--bp-space-4); overflow-y: auto; }
.remote-settings .bp-lic-activation { border: 1px solid var(--bp-border-light); border-radius: var(--bp-radius-md); background: var(--bp-bg-muted); padding: var(--bp-space-3) var(--bp-space-4); }
.remote-settings-kv { display: grid; grid-template-columns: max-content 1fr; align-items: center; gap: var(--bp-space-2) var(--bp-space-4); margin: var(--bp-space-3) 0 0; }
.remote-settings-kv dt { color: var(--bp-text-secondary); }
.remote-settings-kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.remote-settings-mono { font-family: var(--bp-font-mono, monospace); }
.remote-settings-hint { margin: var(--bp-space-3) 0 0; color: var(--bp-text-secondary); font-size: var(--bp-size-small); }
/* 헤더 톱니 팝업 본문(TSK-F06-004): 창 폭(BpModal 720px)이 상한이라 칸은 창을 채운다. 길어지면 본문이 스크롤한다. */
.remote-settings-embedded { --settings-width: none; max-height: min(70vh, 640px); padding: 0 4px 0 0; }
/* 서버 업데이트 칸 감싸개(TSK-F09-020) — 카드 · 알림 줄 · 확인 대화상자는 BPack.Dist F13 패키지 CSS. */
.remote-update:focus { outline: none; }
.remote-update-loading { margin: 0; color: var(--bp-text-secondary); }
/* 문서함(TSK-F10-001) — 입장권을 못 받았을 때 안내. */
.remote-documents-unavailable { display: flex; align-items: center; gap: var(--bp-space-2); margin: var(--bp-space-6); color: var(--bp-text-secondary); }



/* ── BPack 브랜드 표준 (BPack.Components brand-rollout-guide §4·§5) ──────────
   회사 귀속은 상태바, 제품 identity 는 메뉴 푸터. GNB 좌측은 라이브러리 기본(회사 B)이다. */

/* 상태바 회사 귀속 — .bp-footer 는 --bp-neutral-900 고정이고 다크 재정의가 없다.
   테마와 무관하게 항상 어두우므로 흰 로고 하나면 된다. */
.statusbar-brand {
    display: flex;
    align-items: center;
    gap: var(--bp-space-1);
    opacity: 0.8;
}

.statusbar-brand img {
    height: 24px;   /* 브랜드 §1.3 최소 사용 크기. 상태바 32px 안에서 위아래 4px 남는다 */
}

.remote-appmenu-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.25;
}

.remote-appmenu-sub {
    font-size: var(--bp-size-2xs);
    color: var(--bp-text-tertiary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* BpNavMenu 기본 footer가 접힘 상태의 제품명 표시를 관리한다(TSK-F06-003). */
.remote-product-mark {
    display: block;
    width: 28px;
    height: 28px;
    background: url("../icons/bpack-remote.svg") center / contain no-repeat;
}