/* 업로드 중에는 화면 조작을 막는다 — 중복 업로드·단계 이동 방지(2026-08-08 사용자 지시). */ .b03-file--busy { pointer-events: none; } .b03-file--busy .b03-file__card-select, .b03-file--busy .b03-file__card-remove, .b03-file--busy .b03-file__dropzone { opacity: 0.5; } /* 업로드 버튼 안에서 도는 원 — 공용 스피너를 버튼 글자 크기에 맞춰 줄인다. */ .b03-file__upload-spinner { width: 14px; height: 14px; border-width: 2px; border-color: color-mix(in srgb, var(--color-primary-text) 40%, transparent); border-top-color: var(--color-primary-text); } /* 카드 한 장 = 파일 한 칸(카드 부품) · 빈 칸은 **한 줄**로 끝난다(2026-09-03 사용자 지시) — 파일이 붙거나 올라가는 중에만 아래 내용(파일명·진행바)이 펼쳐진다. 상태는 선 색으로 가른다. */ .b03-file__card { display: flex; flex-direction: column; gap: var(--spacing-8); } .b03-file__card--selected { border-color: var(--color-accent); background: var(--color-surface); } .b03-file__card--uploading { border-color: var(--color-accent); box-shadow: var(--shadow-lg); } .b03-file__card--completed { border-color: var(--color-success); } .b03-file__card--error { border-color: var(--color-danger); } /* 카드가 좁아졌다(컨테이너 2열 × 카드 2열, 2026-08-31). 격자로 고정하면 제목이 글자 단위로 접히므로, 자리가 모자라면 배지·삭제 버튼이 다음 줄로 내려가게 한다. */ /* 제목·상태·[선택]이 **한 줄**에 선다(2026-09-03) — 줄바꿈을 허용하면 [선택]이 아래로 내려가 카드가 두 줄이 됐다. 자리가 모자라면 제목이 줄어든다(min-width: 0). */ /* ⚠ 좁은 폭에서 배지·[선택]·[×] 가 밀려 나가지 않게 **줄 자체가 넘치지 않도록** 막는다 (2026-09-08). 제목은 이미 말줄임이라, 넘치는 것은 늘 오른쪽 붙박이들이었다. */ .b03-file__card-header { display: flex; flex-wrap: nowrap; gap: var(--spacing-8); align-items: center; min-width: 0; max-width: 100%; } .b03-file__card-header > * { min-width: 0; } .b03-file__card-icon { flex: 0 0 auto; width: 28px; height: 28px; border-radius: var(--radius-icons); display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent); background: var(--color-accent-soft); font-size: var(--text-body-sm); margin-right: var(--spacing-8); /* 아이콘 우측 마진 추가 (아이콘 좌측 여유 확대 효과) */ } .b03-file__card-heading { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 1px; } .b03-file__card-label { color: var(--color-text); font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); /* 제목은 한 줄로 두고 모자라면 말줄임 — 접히면 카드가 세로로 길어진다(2026-09-03). */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .b03-file__card-ext, .b03-file__file-size, .b03-file__progress-info { color: var(--color-text-secondary); font-size: var(--text-caption); } .b03-file__card-badge-container { display: flex; align-items: center; margin-left: auto; margin-right: var(--spacing-4); } /* 파일 없는 칸에서는 지움 단추를 접는다(아이콘 단추 부품은 hidden 보다 display 가 앞섬) */ .b03-file__card-remove[hidden] { display: none; } .b03-file__card-content { display: flex; flex-direction: column; gap: var(--spacing-8); } /* 빈 칸은 제목 줄만 남긴다 — 파일이 붙으면 이름·크기가, 올라가는 중에는 진행바가 선다. */ .b03-file__card--empty .b03-file__card-content { display: none; } .b03-file__file-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .b03-file__file-name { color: var(--color-text); font-size: var(--text-body-sm); font-weight: var(--font-weight-medium); overflow-wrap: anywhere; } /* 진행바·속도·예상완료는 **올라가는 동안만** 보인다(2026-09-03) — 끝난 카드에 남겨 두면 읽을 일 없는 세 줄이 카드 높이를 그대로 차지했다. */ .b03-file__progress-section { display: none; flex-direction: column; gap: var(--spacing-8); } .b03-file__card--uploading .b03-file__progress-section { display: flex; } .b03-file__progress-info { display: flex; flex-direction: column; gap: 2px; } /* 오류 띠(띠 알림 부품)는 오류 난 카드에서만 보인다 */ .b03-file__card .b03-file__error-message { display: none; } .b03-file__card--empty .b03-file__file-info, .b03-file__card--empty .b03-file__preview, .b03-file__card--empty .b03-file__progress-section, .b03-file__card--empty .b03-file__error-message { display: none; } /* 업로드 자료 미리보기(2026-09-04) — 분석 메타데이터의 범위만으로 그리는 작은 도형. 값이 없으면 `is-visible` 이 안 붙어 자리를 차지하지 않는다. */ .b03-file__preview { display: none; margin-top: 6px; } /* 카드 한 행을 전부 쓰고 높이는 고정한다 (2026-09-04 사용자 지시) — 카드 높이가 파일마다 들쭉날쭉하지 않게. 그림·썸네일·값 표시가 모두 같은 상자를 쓴다. */ .b03-file__preview.is-visible { display: flex; grid-column: 1 / -1; align-items: center; justify-content: center; width: 100%; height: 120px; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-cards); background: var(--color-surface); } .b03-file__preview svg { display: block; width: 100%; height: 100%; } /* 라이다 탑뷰 점 그림 — 점이 5천 개라 선 하나로 묶어 그린다. */ .b03-file__preview-cloud { fill: none; stroke: var(--color-text-muted); stroke-linecap: round; stroke-opacity: 0.55; stroke-width: 0.7; } /* GeoTIFF 저해상 썸네일 — 원본 비율을 지켜 상자 안에 맞춘다. 썸네일이 곧 자료 범위라 다른 그림의 점선 사각형과 같은 테두리를 둘러 셋이 같은 모양으로 보이게 한다 (2026-09-04 사용자 지적). */ .b03-file__preview-thumb { max-width: 100%; max-height: 100%; border: 1px dashed var(--color-border); image-rendering: pixelated; object-fit: contain; } /* 그릴 도형이 없는 부속 파일 — 구분되는 값을 큰 글씨로. */ .b03-file__preview-facts { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px; text-align: center; } .b03-file__preview-fact { color: var(--color-text); font-size: var(--text-body, 15px); font-weight: 600; } .b03-file__preview-fact-sub { color: var(--color-text-muted); font-size: var(--text-caption); } .b03-file__preview-empty { color: var(--color-text-muted); font-size: var(--text-caption); } .b03-file__preview-extent { fill: color-mix(in srgb, var(--color-border) 12%, transparent); stroke: var(--color-border); stroke-dasharray: 4 3; stroke-width: 1; } .b03-file__preview-route { fill: none; /* 계획노선 선 색 — 녹색(2026-09-04 사용자 지시). 지형 범위를 벗어나면 아래에서 붉은색으로 덮어써 경고로 쓴다. */ stroke: var(--color-success); stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; } /* 계획노선이 지형 자료 범위를 벗어난 경우 — 눈으로 바로 잡히게 경고색. */ .b03-file__preview.is-warning .b03-file__preview-route { stroke: var(--color-danger); } .b03-file__preview.is-warning .b03-file__preview-extent { stroke: var(--color-danger); stroke-dasharray: 3 2; } .b03-file__card--selected .b03-file__progress-section { display: none; } /* 올리는 중에만 [파일 선택]을 감춘다. 끝난 카드에도 남겨 두어야 파일 하나를 갈아 끼우고 [파일 업로드]로 다시 돌릴 수 있다(2026-09-04 사용자 지시). */ .b03-file__card--uploading .b03-file__card-select { display: none; } .b03-file__card--error .b03-file__error-message { display: flex; } .b03-file__card--error .b03-file__progress-section { display: none; }