Aislo/B03_FileInput/B03_FileInput_UI_Style.css

.b03-file {
  min-height: calc(100dvh - var(--app-header-height, 0px));
  background: linear-gradient(180deg, var(--color-canvas) 0%, var(--color-accent-soft) 100%);
  padding: 0 var(--spacing-24) var(--spacing-48) var(--spacing-24); /* 상단 여백은 main-layout 마진으로 조정하므로 padding-top은 0 */
}

.b03-file__main-layout {
  max-width: var(--page-max-width, 1200px);
  margin: var(--spacing-40) auto 0 auto; /* 상단 구분선(헤더)과의 간격을 확실하게 40px 벌림 */
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  /* ⚠ flex 자식은 기본이 `min-width: auto` 라 **내용보다 안 줄어든다** — 그래서 안쪽
     격자가 넘치면 페이지 몸통이 통째로 가로로 밀렸다(2026-09-08). 여기서 끊는다. */
  min-width: 0;
}

.b03-file__main-layout > * {
  min-width: 0;
}

.b03-file__control-panel {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
}

.b03-file__cards-container-panel {
  margin-top: 0; /* 단일 layout gap에 의해 제어되도록 설정 */
}

.b03-file__native-input,
.b03-file__slot-input {
  display: none;
}

/* 고르는 자리 한 줄 — [입력 파일 선택] · [임시 보관함] · [파일 업로드](2026-09-03).
   좁아지면 아래로 접히되, 선택 영역이 남는 폭을 먹는다. */
/* 셋을 같은 폭·같은 높이로 나눈다 — 열 1:1:1(2026-09-03 사용자 지시).
   flex 로는 버튼·드롭존의 내용 폭이 배분에 섞여 288·254·288 로 어긋났다. 격자는
   칸을 먼저 나누므로 내용과 무관하게 정확히 1:1:1 이 된다. 좁아지면 칸이 접힌다. */
.b03-file__pick-row {
  display: grid;
  /* ⚠ 좁은 폭에서는 200px 도 넘친다 — `min(200px, 100%)` 로 컨테이너까지만 줄인다. */
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  align-items: stretch;
  gap: var(--spacing-8);
}

.b03-file__pick-row > * {
  min-width: 0;
}

/* 칸을 꽉 채워야 세 칸의 높이가 같아진다 — 버튼은 기본이 내용 크기다. */
.b03-file__pick-row .b03-file__temp-picker > .ui-btn,
.b03-file__pick-row > .ui-btn {
  width: 100%;
  height: 100%;
}

/* 한 줄 바(2026-09-03) — 종전 160px 블록은 안내 문구를 담느라 컸다. 문구는 좌측
   패널로 갔으므로 여기는 「끌어 놓거나 눌러서 고르는 자리」 표시만 한다. */
.b03-file__dropzone {
  padding: var(--spacing-12) var(--spacing-16);
  border: 1px dashed var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: var(--spacing-8);
  cursor: pointer;
  text-align: center;
  transition:
    background var(--transition-base),
    border-color var(--transition-base),
    box-shadow var(--transition-base);
}

.b03-file__dropzone:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
}

.b03-file__dropzone:focus-visible,
.b03-file__dropzone.is-dragging {
  outline: none;
  background: var(--color-accent-soft);
  border-color: var(--color-accent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-accent) 15%, transparent);
}

.b03-file__dropzone strong {
  color: var(--color-text);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-medium);
}

.b03-file__dropzone span {
  font-size: var(--text-body-sm);
  color: var(--color-text-secondary);
}

/* 빈 오류 줄이 자리를 잡고 있으면 토글 아래가 통째로 비어 보인다 — 글자가 있을 때만 자리를 차지한다. */
.b03-file__error:empty {
  display: none;
}

/* 띠 알림(부품)을 담는 자리 — 글이 있을 때(is-visible)만 선다. */
.b03-file__resume,
.b03-file__overview {
  display: none;
  flex-direction: column;
  gap: var(--spacing-4);
  margin-top: var(--spacing-8);
}

.b03-file__resume.is-visible,
.b03-file__overview.is-visible {
  display: flex;
}

/* 완료 슬롯 재업로드 확인 모달 — 페이지 위를 덮는 단순 확인창. */
.b03-file__modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-scrim);
}

.b03-file__modal {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  max-width: 420px;
  padding: var(--spacing-24);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background: var(--color-surface-raised);
  box-shadow: var(--shadow-lg);
}

.b03-file__modal p {
  margin: 0;
  color: var(--color-text-secondary);
  white-space: pre-line;
}

.b03-file__modal-actions {
  display: flex;
  gap: var(--spacing-8);
  justify-content: flex-end;
}

/* 계획노선 | 지형(LAS) — 컨테이너를 둘로 나눈다(2026-08-31 사용자 지시).
   노선은 카드 5장(shapefile 한 벌), 지형은 4장이라 폭을 5:4 비슷하게 준다.

   ⚠ **좁아지면 한 줄로 접는다**(2026-09-08 사용자 지적) — 2열을 고정하면 좁은 폭에서
   각 열이 카드 하나도 못 담아 내용이 컨테이너 밖으로 넘치고 글자가 안 읽혔다.
   `auto-fit` + `min(360px, 100%)` 이라, 폭이 모자라면 칸 수가 스스로 1로 줄고
   **최소폭이 컨테이너를 넘지 않는다**(고정 minmax 는 그 아래에서 넘친다). */
.b03-file__columns {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr));
  gap: var(--spacing-16);
  align-items: start;
}

/* LAS 없이 설계 — 켜기 부품(스위치) · 자리만 정함 */
.b03-file__lasfree {
  align-self: flex-start;
}

/* LAS 없이 설계를 켜면 지형 컨테이너는 받지 않는다 — 잠긴 것이 보이게 흐린다. */
.b03-file__group--disabled {
  opacity: 0.55;
}

.b03-file__card--disabled {
  background: var(--color-surface);
  border-style: dashed;
}

.b03-file__card--disabled .b03-file__card-select {
  cursor: not-allowed;
}

/* 좌측 안내 패널이 열리면 본문을 그만큼 밀어낸다 — 공용 워크플로 레이아웃(B04·B05)의
   `.ui-workflow-layout__body` 규칙과 같은 값. 접히면 손잡이 폭만 남긴다. */
.b03-file__main-layout {
  transition: padding-left var(--transition-base);
}

.b03-file.is-options-open .b03-file__main-layout {
  padding-left: min(var(--wf-left-panel-width), calc(100vw - var(--spacing-48)));
}

.b03-file:not(.is-options-open) .b03-file__main-layout {
  padding-left: var(--spacing-24);
}

@media (max-width: 860px) {
  .b03-file.is-options-open .b03-file__main-layout {
    padding-left: 0;
  }
}

/* --- 좌측 패널 — 현황 배너 + 아래 단추 줄(안내 글은 [?] 설명서로 옮김 · 54-2) --- */
.b03-file__form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  padding: var(--spacing-16);
}

.b03-file__group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
}

/* 카드가 좁아지면 한 줄에 제목·상태·[선택]이 못 들어가 제목이 글자 단위로 접힌다
   (2026-09-03 실측: 안내 패널을 연 상태에서 카드 폭 210px). 폭이 모자라면 열을 줄인다. */
/* ⚠ `minmax(260px, …)` 는 **칸이 260px 보다 좁아질 수 없다**는 뜻이라, 컨테이너가
   그보다 좁아지면 카드가 밖으로 넘친다(2026-09-08 좁은 폭 실측). `min(260px, 100%)`
   으로 두면 좁을 때 **컨테이너 폭까지 줄어들어** 넘치지 않는다. */
.b03-file__group-content {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr));
  gap: var(--spacing-12);
}