eomsangdonandClaude Sonnet 5
527e68db85
- ui-modal 뒤 배경을 공용 확인 창처럼 어둡게 가리고 창에 테두리와 테마 그림자(--shadow-lg)를 줌 — 창이 겹치면 앞 창이 또렷이 섬 - M01 LogicLab 창(.m01-logic__backdrop · .m01-logic__pick) 도 같은 겉모양으로 맞춤 - 단추 아래 뜨는 작도 영역 작은 창(.m02-pop)은 뒤를 가리지 않음 - 스프레드시트 도구 막대 표시 형식 입력 칸에 흐린 글 「표시 형식」 Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_019Kyw9qnkJ94pC1A4PfpDtA
38 lines
815 B
CSS
38 lines
815 B
CSS
.ui-modal__backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 1000;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: rgba(38, 17, 74, 0.35); /* 공용 확인 창(.ui-confirm)과 같이 뒤를 가림 */
|
|
}
|
|
|
|
.ui-modal {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
width: min(720px, 92vw);
|
|
max-height: 80vh;
|
|
padding: var(--spacing-16);
|
|
border-radius: var(--radius-xl);
|
|
border: 1px solid var(--color-border);
|
|
background: var(--color-surface-raised);
|
|
box-shadow: var(--shadow-lg);
|
|
font-size: var(--text-body-sm);
|
|
overflow: auto;
|
|
}
|
|
|
|
.ui-modal__top {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.ui-modal__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
}
|