@charset "utf-8";
/* 여기 아래에 자유롭게 CSS 추가/수정/삭제 해주세요. */

/* React 이관 보정: 퍼블리싱에서 a 태그였던 요소를 button으로 렌더링하는 곳 */
button.header-admin,
button.pagination-link,
button.pagination-move,
button.page-back {
    background-color: transparent;
    cursor: pointer;
}

button.pagination-move:disabled {
    opacity: .35;
    cursor: default;
}

/* React 이관 보정: 목록 로딩/빈/에러 상태 문구 (퍼블리싱에 없는 상태) */
.page-state {
    padding: 60px 0;
    font-size: var(--font-size-md);
    color: var(--color-gray-deep);
    text-align: center;
}

.page-state.type-error {
    color: var(--color-delete);
}

/* React 이관 보정: 폼 안내/오류 문구 (퍼블리싱에 없는 상태) */
.form-hint {
    font-size: var(--font-size-xs);
    line-height: 1.5;
}

.form-hint.type-ok {
    color: var(--color-blue);
}

.form-hint.type-error {
    color: var(--color-delete);
}

.form-error {
    margin-top: 20px;
    font-size: var(--font-size-xs);
    color: var(--color-delete);
    text-align: right;
    line-height: 1.5;
}

/* React 이관 보정: 게스트 상세의 긴 액션 버튼이 admin-form 의 64px 고정폭을 넘친다 */
.admin-form .foot-btn.type-delete,
.admin-form .foot-btn.type-edit {
    width: auto;
    min-width: 64px;
    padding: 0 16px;
}

/* React 이관 보정: 스테이지 배경을 kict_img02 로 교체 — 레이아웃이 배경의 원본 비율에
   의존하므로 기존 kict_img01(1452×660) 비율로 박스를 고정하고 cover 로 잘라 채운다 */
.write-case-photo {
    aspect-ratio: 1452 / 660;
    object-fit: cover;
}

/* React 이관 보정: 도면 레이어 이미지 — 서버 사진 비율이 제각각이라 퍼블리싱 도면(1084×580)
   비율로 박스를 고정한다. 치수 표기가 잘리면 안 되므로 contain 으로 전체를 보여준다 */
.write-case-map {
    aspect-ratio: 1084 / 580;
    object-fit: contain;
    background-color: var(--color-box-basic);
}

/* React: 수위계 배치 모드 — 버튼 토글 후 도면 클릭으로 위치 지정 */
.write-case-stage.is-picking .write-case-map {
    cursor: crosshair;
}

.write-case-map-btn.is-active {
    width: auto;
    padding: 0 14px;
    background-color: var(--color-point);
}

/* React 이관 보정: 제출 중/미지원 비활성 버튼 */
button.foot-btn:disabled,
button.modal-btn:disabled {
    opacity: .6;
    cursor: default;
}

/* React 이관 보정: 실험 상세 — 3D 는 화면 미정으로 비활성 */
.view-dimension-btn:disabled {
    opacity: .4;
    cursor: default;
}

/* React 이관 보정: 실험 상세 — 케이스 카드를 클릭해 선택한다 */
.view-case-list .case-card {
    cursor: pointer;
}

/* React 이관 보정: 로그인 실패 메시지 (퍼블리싱에 없는 상태) */
.login-error {
    margin-top: 12px;
    font-size: var(--font-size-xs);
    color: var(--color-delete);
    line-height: 1.5;
}

/* React 이관 보정: 로그인 버튼 비활성(입력 전·제출 중) 상태 */
.login-submit:disabled {
    opacity: .6;
    cursor: default;
}
.login-submit:disabled:hover {
    background-color: var(--color-point);
}

/* React 이관 보정: 센서 파일 목록 — 파일명이 길어도 그리드 칸이 늘어나지 않게 (1fr 의 min-content 확장 방지) */
.write-sensor-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* React 이관 보정: 상세 화면의 마커·핀은 표시 전용(span) — 클릭 커서 제거 (등록 화면 button 핀은 유지) */
span.view-marker,
span.view-pin {
    cursor: default;
}

/* React 이관 보정: 상세 도면 카드 — 스테이지+센서 파일 목록을 한 열로 묶어 목록이 스테이지 폭에 맞게 */
.view-map-main {
    flex: 1;
    min-width: 0;
}

/* React 이관 보정: 상세 센서 파일 목록 — 삭제 버튼 자리의 다운로드 버튼 (선 아이콘) */
.write-file-del.write-sensor-down svg {
    fill: none;
    stroke: var(--color-blue);
    stroke-width: 2;
}
.write-file-del.write-sensor-down:disabled {
    cursor: default;
    opacity: 0.4;
}

/* React 이관 보정: 상세 결과 그리드 — 최대수위 표 숨김 동안 실험 결과가 한 줄 전체 차지 */
.view-grid.type-result .view-field {
    grid-column: 1 / -1;
}

/* React 이관 보정: 수위계 등록 모달 — 첨부 버튼을 CSV/이미지·영상 2개로 가로 배치 */
.gauge-file-btns {
    display: flex;
    gap: 10px;
    margin-top: 21px;
}
.gauge-file-btns .gauge-file-btn {
    flex: 1;
    margin-top: 0;
}








/* ------------------------------------------------------------ */


@media screen and (min-width: 639px) {
}

@media screen and (min-width: 767px) {
}

@media screen and (min-width: 979px) {
}

@media screen and (min-width: 1239px) {
}

@media screen and (min-width: 1340px) {
}

@media screen and (min-width: 1439px) {
}

@media screen and (min-width: 1640px) {
}

@media screen and (min-width: 1840px) {
}