/* ui_template/cad_host — 웹캐드 iframe 칸 · 도각 편집 띠 (B07 · M02 공용). */

/* CAD 뷰어 호스트 (상세 페이지 영역) */
.cad-host {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  overflow: hidden;
  border-radius: var(--radius-cards);
  background-color: var(--color-surface);
}

/* 도면을 받는 동안 띄우는 표시. 이게 없으면 유역도처럼 2~3초 걸리는 도면에서
   화면이 멎은 것처럼 보이고, 실패해도 이전 도면이 남아 사용자가 모른다
   (2026-09-01 실측 — 코드는 data-loading을 붙이는데 받는 규칙이 없었다). */
.cad-host[data-loading="true"]::after {
  content: "도면을 불러오는 중…";
  position: absolute;
  z-index: 4;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  padding: 10px 18px;
  border-radius: var(--radius-cards);
  background-color: var(--color-surface);
  box-shadow: 0 2px 10px rgb(0 0 0 / 18%);
  color: var(--color-text);
  font-size: 13px;
}

.cad-host[data-error]:not([data-error=""])::before {
  content: attr(data-error);
  position: absolute;
  z-index: 5;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 70%;
  padding: 8px 16px;
  border: 1px solid var(--color-danger, #d33);
  border-radius: var(--radius-cards);
  background-color: var(--color-surface);
  color: var(--color-danger, #d33);
  font-size: 12px;
}

/* B07 독립형 CAD 앱 임베드 */
.cad-host__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.cad-host__license {
  position: absolute;
  z-index: 2;
  right: 10px;
  bottom: 7px;
  color: color-mix(in srgb, var(--color-text-muted) 55%, transparent);
  font-size: 9px;
  line-height: 1;
  text-decoration: none;
}

.cad-host__license:hover {
  color: var(--color-text-muted);
  text-decoration: underline;
}
/* 도각 편집 모드 띠 — 도면 목록 하단 액션 칸의 1행. CAD 위에 떠 있던 배치는 리본과
   겹쳐 문구가 접히고 버튼이 찌그러졌다(2026-09-02 사용자 지시로 사이드바로 옮김). */
.cad-frame-edit {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  padding: var(--spacing-8);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-cards);
  background-color: var(--color-surface);
}

.cad-frame-edit[hidden] {
  display: none;
}

.cad-frame-edit__label {
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--color-text);
}

.cad-frame-edit__buttons {
  display: flex;
  gap: var(--spacing-8);
}

.cad-frame-edit__buttons > button {
  flex: 1 1 0;
  min-width: 0;
  padding: 4px 8px;
  font-size: 0.78rem;
}