eomsangdonandClaude Opus 5.5
fda2527c4b
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01W4uKaV4ZBhsJN4GHG7yRj4
88 lines
2.1 KiB
CSS
88 lines
2.1 KiB
CSS
/* M02 면적산출 상세 오른쪽 패널(일위대가 담은 로직 · 자재목록) · 칸 지정 모달 — 틀은 공용 사이드바 카드 ·
|
|
접기 · 폭 손잡이 · 접기 손잡이 */
|
|
|
|
/* 편집 칸 = 시트 | 패널 — 패널 폭은 손잡이가 `--m02-apanel-width` 로 줌 */
|
|
.m02-apanel {
|
|
position: relative;
|
|
display: flex;
|
|
flex: 0 0 auto;
|
|
flex-direction: column;
|
|
width: var(--m02-apanel-width, 36rem); /* 금액 칸 넷이 가로 굴림 없이 보이게 */
|
|
min-width: 280px;
|
|
max-width: 60%;
|
|
min-height: 0;
|
|
border-left: 1px solid var(--color-border);
|
|
}
|
|
|
|
.m02-apanel.is-resizing {
|
|
transition: none;
|
|
}
|
|
|
|
.m02-apanel.is-collapsed {
|
|
width: 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
.m02-apanel.is-collapsed > .m02-apanel__body,
|
|
.m02-apanel.is-collapsed > .ui-resizer {
|
|
display: none;
|
|
}
|
|
|
|
/* 접기 손잡이 — 패널 왼쪽 밖 세로 가운데(시트 위로) */
|
|
.m02-apanel > .ui-workflow-overlay__handle--side {
|
|
z-index: 6;
|
|
right: auto;
|
|
left: calc(-1 * var(--spacing-24));
|
|
border-right: 0;
|
|
border-radius: var(--radius-buttons) 0 0 var(--radius-buttons);
|
|
}
|
|
|
|
/* 안쪽만 굴림 — 페이지 스크롤 안 생김 */
|
|
.m02-apanel__body {
|
|
flex: 1 1 0;
|
|
min-height: 0;
|
|
overflow: auto;
|
|
padding: var(--spacing-8);
|
|
}
|
|
|
|
/* 칸 지정 모달 — 지금 연결 한 줄 · [지금 고른 칸으로] [풀기] · 주소 칸 [잇기] */
|
|
.m02-area-link__now {
|
|
margin: 0 0 var(--spacing-12);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.m02-area-link__row {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--spacing-8);
|
|
margin-bottom: var(--spacing-12);
|
|
}
|
|
|
|
.m02-area-link__row > .ui-field {
|
|
flex: 1 1 auto;
|
|
margin: 0;
|
|
}
|
|
|
|
/* 엑셀 칸 고르기 모달 — 머리(지금 연결 · [연결 풀기]) · 알림 · 읽기만 시트(높이를 정해야 시트가 보임) */
|
|
.m02-cellpick {
|
|
width: min(960px, 92vw);
|
|
}
|
|
|
|
.m02-cellpick__head {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.m02-cellpick__now,
|
|
.m02-cellpick__hint {
|
|
margin: 0 0 var(--spacing-8);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.m02-cellpick__sheet {
|
|
height: min(60vh, 520px);
|
|
min-height: 240px;
|
|
}
|