/* ============================================================
   작업 화면 공용 문법 (workbench.css)

   데이터 구축 갈래의 도구 화면 다섯(생성·관리·조회·연산·실내로봇)이
   공유한다. 읽는 화면은 program.css 의 콘텐츠 문법을 쓰고, 이 파일은
   폼·표·버튼·패널처럼 "작업하는 화면"의 부품만 맡는다.

   왜 따로 두나
   - homepage.css 는 사이트 전역(콘텐츠)이라 부트스트랩 폼·표까지 여기서
     덮으면 읽는 화면에도 영향이 간다.
   - cubemaker.css 는 데이터 구축 갈래 전용이라, 나중에 관리자·마이페이지가
     같은 문법을 물려받을 수 없다.
   그래서 갈래를 넘어 재사용될 규칙만 이 파일에 모은다.

   부트스트랩 다음에 로드되어야 한다(선택자 특정도가 같아 나중 것이 이긴다).

   버튼을 클래스 교체가 아니라 CSS 정규화로 맞추는 이유
   - 화면 HTML 의 부트스트랩 버튼은 43개지만, JS 가 만들어 내는 버튼이
     67개 더 있다(query.js·robot_ui.js·operation-workbench.js 등 9개 파일).
     마크업만 btn-hp 계열로 바꾸면 JS 쪽이 통째로 남아 두 문법이 섞인다.
   - 그래서 btn-primary/btn-outline-* 의 생김새를 여기서 잉크 문법으로
     덮는다. 의미(성공·정보)는 클래스 이름과 라벨 텍스트에 남고, 색으로
     말하지 않는다.
   ============================================================ */

/* === 각진 모서리 ===
   테마 규칙상 라운드는 쓰지 않는다. 부트스트랩이 기본으로 주는 라운드를
   부품별로 0 으로 눌러 둔다(선언을 지우는 대신 0 을 박아야 부트스트랩
   기본값이 되살아나지 않는다). */
.btn,
.form-control,
.form-select,
.form-check-input,
.input-group-text,
.card,
.modal-content,
.dropdown-menu,
.list-group-item,
.alert,
.badge,
.progress,
.progress-bar,
.nav-link,
.toast,
.popover,
.tooltip-inner,
.table {
    border-radius: 0;
}

/* === 버튼 ===
   primary 는 잉크 배경/종이 글자, 나머지 윤곽 버튼은 1px 잉크 보더.
   파괴적 동작만 --hp-danger 를 쓴다. */
.btn-primary,
.btn-secondary,
.btn-success,
.btn-info,
.btn-warning {
    background: var(--hp-ink);
    border: 1px solid var(--hp-ink);
    color: var(--hp-bg);
}
.btn-primary:hover,
.btn-secondary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-warning:hover,
.btn-primary:focus,
.btn-secondary:focus {
    background: var(--hp-blue-dark);
    border-color: var(--hp-blue-dark);
    color: var(--hp-bg);
}
.btn-outline-primary,
.btn-outline-secondary,
.btn-outline-success,
.btn-outline-info,
.btn-outline-warning,
.btn-outline-light,
.btn-outline-dark {
    background: transparent;
    border: 1px solid var(--hp-ink);
    color: var(--hp-ink);
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover,
.btn-outline-success:hover,
.btn-outline-info:hover,
.btn-outline-warning:hover,
.btn-outline-light:hover,
.btn-outline-dark:hover {
    background: var(--hp-paper-tint);
    border-color: var(--hp-ink);
    color: var(--hp-ink);
}
/* 파괴적 동작(삭제·취소·폐기) — 이 갈래에서 유채색이 허용되는 유일한 자리 */
.btn-danger,
.btn-outline-danger {
    background: transparent;
    border: 1px solid var(--hp-danger);
    color: var(--hp-danger);
}
.btn-danger:hover,
.btn-outline-danger:hover {
    background: var(--hp-danger);
    border-color: var(--hp-danger);
    color: var(--hp-bg);
}
/* 비활성 — 색이 아니라 대비를 낮춰 알린다 */
.btn:disabled,
.btn.disabled {
    background: transparent;
    border-color: var(--hp-border);
    color: var(--hp-faint);
    opacity: 1;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background: var(--hp-border);
    border-color: var(--hp-border);
    color: var(--hp-muted);
}
/* 초점 표시 — 부트스트랩의 파랑 글로우 대신 잉크 윤곽 */
.btn:focus,
.btn:focus-visible {
    outline: 2px solid var(--hp-ink);
    outline-offset: 1px;
    box-shadow: none;
}

/* === 폼 ===
   각진 1px 보더에, 초점은 잉크 보더로 알린다. */
.form-control,
.form-select {
    border: 1px solid var(--hp-border);
    background: var(--hp-card);
    color: var(--hp-text);
}
.form-control:focus,
.form-select:focus {
    border-color: var(--hp-ink);
    box-shadow: none;
    outline: none;
}
.form-control::placeholder { color: var(--hp-faint); }
.form-control:disabled,
.form-select:disabled {
    background: var(--hp-paper-tint);
    color: var(--hp-muted);
}
.form-label {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hp-text-secondary);
}
/* 체크박스·라디오 — 켜진 칸은 잉크로 채운다(파랑 금지) */
.form-check-input:checked {
    background-color: var(--hp-ink);
    border-color: var(--hp-ink);
}
.form-check-input:focus {
    border-color: var(--hp-ink);
    box-shadow: none;
}
.input-group-text {
    background: var(--hp-paper-tint);
    border: 1px solid var(--hp-border);
    color: var(--hp-text-secondary);
}
/* 슬라이더 — 브라우저 기본 파랑 대신 잉크로. 3D 장면의 색을 가리키는
   슬라이더(실내로봇의 위험·경고 거리)는 각자 인라인으로 그 색을 박아 두어
   여기에 걸리지 않는다. */
input[type="range"],
.form-range {
    accent-color: var(--hp-ink);
}

/* === 표 ===
   위는 2px 잉크 룰, 행 사이는 1px. 머리글은 자간 넓힌 작은 라벨이고,
   호버는 종이 그림자만 남긴다(들림 효과 없음). */
.table {
    --bs-table-bg: transparent;
    --bs-table-striped-bg: transparent;
    --bs-table-hover-bg: var(--hp-paper-tint);
    --bs-table-color: var(--hp-text);
    --bs-table-border-color: var(--hp-border);
    border-top: 2px solid var(--hp-rule-strong);
    color: var(--hp-text);
}
.table > thead > tr > th {
    border-bottom: 1px solid var(--hp-rule-strong);
    padding: 10px 8px;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--hp-muted);
    background: transparent;
    white-space: nowrap;
}
.table > tbody > tr > td {
    border-bottom: 1px solid var(--hp-border);
    font-size: 13px;
    color: var(--hp-text);
    vertical-align: middle;
}
.table > tbody > tr:last-child > td { border-bottom: none; }

/* === 패널 머리 ===
   회색 배경 띠 대신 아래 1px 잉크 룰과 자간 넓힌 소제목을 쓴다.
   화면별 CSS(cubemaker·operation-workbench)가 이 클래스를 얹어 쓴다. */
.wb-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding-bottom: 0.6rem;
    border-bottom: 1px solid var(--hp-rule-strong);
}
.wb-head h2,
.wb-head h3,
.wb-head h4,
.wb-head h5,
.wb-head h6 {
    margin: 0;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hp-ink);
}
.wb-head span { font-size: 0.78rem; color: var(--hp-muted); }

/* === 작업 표제부 ===
   도구 화면 맨 위의 화면 이름과 보조 동작. 읽는 화면의 .page-head 보다
   훨씬 얇다 — 작업 화면에서 세로 공간은 정보 몫이다. */
.wb-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 0 10px;
    border-bottom: 2px solid var(--hp-rule-strong);
    margin-bottom: 18px;
}
.wb-title h1,
.wb-title h2,
.wb-title h3,
.wb-title h4 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--hp-ink);
}

/* === 상태 표시 — 네 단계 ===
   작업 상태를 일곱 색(대기 노랑·준비 파랑·변환 하늘·저장 파랑·성공 초록·
   실패 빨강·취소 회색)으로 말하던 것을 네 단계로 줄인다. 단일 강조색
   규칙 때문이기도 하고, 색을 못 읽는 사람에게 일곱 색은 애초에 정보가
   아니어서다 — 뜻은 라벨 텍스트가 진다.

   같은 네 단계를 analysis-job-ui.css 가 자기 배지(.job-badge-*)에 다시
   적는다. 그 파일은 마이페이지도 불러오는데 마이페이지는 이 파일을
   불러오지 않기 때문이다. 값을 바꿀 땐 두 곳을 함께 고친다. */
.wb-status {
    display: inline-block;
    padding: 2px 8px;
    border: 1px solid var(--hp-border);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hp-muted);
    white-space: nowrap;
}
.wb-status--wait { border-color: var(--hp-border); color: var(--hp-muted); }
.wb-status--run { border-color: var(--hp-ink); color: var(--hp-ink); }
.wb-status--done { border-color: var(--hp-blue); color: var(--hp-blue); }
.wb-status--fail { border-color: var(--hp-danger); color: var(--hp-danger); }

/* === 진행률 ===
   막대는 각지게, 채움은 잉크. 완료된 막대만 딥그린으로 바꿔 끝을 알린다. */
.progress {
    background: var(--hp-paper-tint);
    border: 1px solid var(--hp-border);
    height: 6px;
}
.progress-bar {
    background: var(--hp-ink);
}
.progress-bar.bg-success,
.progress--done .progress-bar {
    background: var(--hp-blue);
}
.progress-bar.bg-danger { background: var(--hp-danger); }

/* === 알림 띠 ===
   노란 경고 박스(#fff3cd/#ffc107)를 종이 바탕 + 잉크 룰로 바꾼다.
   파괴적·오류 알림만 --hp-danger 로 테두리를 준다. */
.alert {
    background: var(--hp-paper-tint);
    border: 1px solid var(--hp-border);
    border-left: 2px solid var(--hp-ink);
    color: var(--hp-text);
    font-size: 0.9rem;
}
.alert-danger {
    border-left-color: var(--hp-danger);
    color: var(--hp-danger);
}
.alert-success { border-left-color: var(--hp-blue); }

/* === 다이얼로그 ===
   모서리를 각지게 하고 머리·바닥의 회색 띠를 1px 룰로 바꾼다.
   드래그 이동은 CmDialog 가 맡는다(이 파일은 생김새만 맡는다). */
.modal-content {
    border: 1px solid var(--hp-ink);
    background: var(--hp-card);
}
.modal-header,
.modal-footer {
    border-color: var(--hp-border);
    background: transparent;
}
.modal-title {
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--hp-ink);
}

/* === 패널 ===
   목록·상세처럼 한 덩어리로 묶이는 영역. 읽는 화면의 옛 .content-section
   (라운드 8px)을 대신한다 — 그 클래스는 연구단소개 화면들이 아직 쓰고 있어
   지우지 못하므로, 도구 화면은 이 클래스로 갈아탄다. */
.wb-panel {
    background: var(--hp-card);
    border: 1px solid var(--hp-border);
}
.wb-panel__head {
    margin: 0;
    padding: 12px 16px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hp-ink);
    border-bottom: 1px solid var(--hp-rule-strong);
}
.wb-panel__body { padding: 16px; }
/* 아직 아무것도 못 고른 자리에 놓이는 안내 문구 */
.wb-empty {
    padding: 20px;
    text-align: center;
    font-size: 13px;
    color: var(--hp-muted);
}

/* === 알림 띠 ===
   노란 경고 박스(#fff3cd/#ffc107)를 대신한다. 색이 아니라 왼쪽 2px 룰로
   "여기 읽을 것이 있다"를 알린다. */
.wb-notice {
    padding: 10px 16px;
    margin-bottom: 16px;
    background: var(--hp-paper-tint);
    border: 1px solid var(--hp-border);
    border-left: 2px solid var(--hp-ink);
    font-size: 0.9rem;
    color: var(--hp-text);
}
.wb-notice--danger { border-left-color: var(--hp-danger); color: var(--hp-danger); }

/* === 자체 마크업 모달 ===
   부트스트랩 .modal 이 아니라 화면이 직접 그린 오버레이·상자. 데이터 관리의
   편집·공개범위 창이 쓴다. 각진 잉크 액자에 머리·바닥은 1px 룰로 끊는다.
   (드래그 이동은 CmDialog 몫이고 이 규칙은 생김새만 맡는다.) */
.wb-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: color-mix(in srgb, var(--hp-ink) 55%, transparent);
    justify-content: center;
    align-items: center;
}
.wb-modal {
    width: 90%;
    background: var(--hp-card);
    border: 1px solid var(--hp-ink);
    overflow: hidden;
}
.wb-modal__head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--hp-rule-strong);
}
.wb-modal__head h3 {
    flex: 1;
    margin: 0;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    color: var(--hp-ink);
}
.wb-modal__head i { font-size: 15px; color: var(--hp-ink); }
.wb-modal__close {
    background: none;
    border: none;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    color: var(--hp-muted);
}
.wb-modal__close:hover { color: var(--hp-ink); }
.wb-modal__body { padding: 20px; }
.wb-modal__foot {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 20px;
    background: transparent;
    border-top: 1px solid var(--hp-border);
}
.wb-label {
    display: block;
    margin-bottom: 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--hp-text-secondary);
}
.wb-req { color: var(--hp-danger); }
.wb-error {
    margin-top: 8px;
    font-size: 12px;
    color: var(--hp-danger);
}

/* === 선택지 목록 ===
   공개 범위처럼 라디오 하나를 고르는 자리. 고른 칸은 잉크 보더로 굵어지고,
   바탕은 종이 그대로 둔다(색 타일로 고름을 말하지 않는다). */
.visibility-option {
    display: flex;
    gap: 10px;
    align-items: flex-start;
    padding: 10px 12px;
    border: 1px solid var(--hp-border);
    cursor: pointer;
}
.visibility-option + .visibility-option { margin-top: 8px; }
.visibility-option:hover { background: var(--hp-paper-tint); }
.visibility-option:has(input:checked) {
    border-color: var(--hp-ink);
    background: var(--hp-paper-tint);
}
.visibility-option input { margin-top: 3px; }
.visibility-option strong { display: block; font-size: 13px; color: var(--hp-text); }
.visibility-option span { display: block; font-size: 12px; color: var(--hp-text-secondary); }

/* === 함께 공개할 기관 ===
   '기관 공개'를 고른 뒤에만 펼쳐지는 칸이다. 고른 칸 안에 딸린 것이라는 게
   보이도록 왼쪽 잉크 선 하나로 들여쓴다.

   `.visibility-option + .visibility-option` 의 위 여백은 이 블록이 사이에
   끼면서 끊긴다. 그래서 이 블록 다음에 오는 선택지에 같은 여백을 다시 준다. */
.visibility-share-section {
    margin-top: 8px;
    padding: 10px 12px;
    border: 1px solid var(--hp-border);
    border-left-width: 3px;
    border-left-color: var(--hp-ink);
    background: var(--hp-paper-tint);
}
.visibility-share-section + .visibility-option { margin-top: 8px; }
/* 접기/펼치기 손잡이. 기관이 스무 곳쯤 되면 펼친 목록만으로 모달이 화면을
   넘길 뻔하므로 기본은 접어 두고, 고른 개수를 이 줄에 적어 둔다. */
.visibility-share-toggle {
    display: flex;
    gap: 6px;
    align-items: center;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--hp-text);
    text-align: left;
    cursor: pointer;
}
.visibility-share-toggle .bi {
    font-size: 11px;
    transition: transform .12s ease;
}
.visibility-share-toggle[aria-expanded="true"] .bi { transform: rotate(90deg); }
.visibility-share-count { font-weight: 400; color: var(--hp-text-secondary); }
.visibility-share-hint {
    margin-top: 2px;
    font-size: 11.5px;
    color: var(--hp-text-secondary);
}
/* 기관이 많아도 모달이 화면을 넘지 않게 이 칸만 스크롤한다. */
.visibility-share-list {
    margin-top: 8px;
    max-height: 160px;
    overflow-y: auto;
}
.visibility-share-option {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 4px 2px;
    font-size: 12.5px;
    color: var(--hp-text);
    cursor: pointer;
}
.visibility-share-option:hover { background: var(--hp-paper); }

/* === 배지 ===
   부트스트랩 색 배지를 잉크 윤곽으로 통일한다. */
.badge {
    padding: 2px 8px;
    border: 1px solid var(--hp-border);
    background: transparent;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--hp-text-secondary);
}
.badge.bg-primary,
.badge.bg-secondary,
.badge.bg-info { background: transparent; border-color: var(--hp-ink); color: var(--hp-ink); }
.badge.bg-success { background: transparent; border-color: var(--hp-blue); color: var(--hp-blue); }
.badge.bg-danger { background: transparent; border-color: var(--hp-danger); color: var(--hp-danger); }
.badge.bg-warning { background: transparent; border-color: var(--hp-muted); color: var(--hp-muted); }