eomsangdonandClaude Opus 5.5
cd1ef69d2b
- 단가산출 로직 표 줄 누름 = 고른 줄 하이라이트(로직 키 · 다시 그려도 유지) · 넣을 값 모달은 새 [옵션] 단추 - 줄 단추 이름 위로 · 아래로 · 옵션 · 삭제(빨강) · 카드 갈래 = 옵션 · 삭제 - 공용 단추 묶음 `ui-btn-group` · 간격 토큰 `--btn-group-gap`(4px) — 이 표에만 적용 - 시험: test_m02_card_shell 낡은 글 맞춤 + 47-5 확인 · 화면 시나리오 ui_checks/47-5_일위대가_줄_고름.js Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01MgChuAcyBqUkhHMTXomQC7
99 lines
2.4 KiB
CSS
99 lines
2.4 KiB
CSS
.ui-general-layout {
|
|
min-height: calc(100vh - var(--spacing-64));
|
|
padding: var(--spacing-40) var(--spacing-24) var(--spacing-48);
|
|
background: var(--color-bg);
|
|
}
|
|
|
|
.ui-general-layout__inner {
|
|
width: 100%;
|
|
max-width: var(--page-max-width);
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.ui-general-layout__header {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
margin-bottom: var(--spacing-24);
|
|
}
|
|
|
|
.ui-general-layout__title {
|
|
color: var(--color-text);
|
|
font-family: var(--font-display);
|
|
font-size: var(--text-heading-sm);
|
|
}
|
|
|
|
.ui-general-layout__subtitle {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.ui-general-layout__content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-24);
|
|
}
|
|
|
|
.ui-general-block__section-header {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-16);
|
|
margin-bottom: var(--spacing-16);
|
|
}
|
|
|
|
.ui-general-block__actions {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* 붙은 단추 묶음(표 줄 위로 · 아래로 · 옵션 · 삭제 등) — 사이 간격은 `--btn-group-gap` 하나 */
|
|
.ui-btn-group {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--btn-group-gap);
|
|
}
|
|
|
|
.ui-general-block__table-wrap {
|
|
overflow-x: auto;
|
|
}
|
|
|
|
/* 목록이 길어져도 컨테이너는 정해진 행 수만큼만 차지한다 — 나머지는 안쪽 스크롤.
|
|
max-height는 limitVisibleRows()가 실제 행 높이를 재서 넣는다(CSS에 상수를 박지 않는다). */
|
|
.ui-general-block__scroll-limit {
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* 스크롤 중에도 어느 열인지 알아야 하므로 머리행을 위에 붙인다. */
|
|
.ui-general-block__table-wrap--sticky-head .ui-general-block__table thead th {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 1;
|
|
/* 아래 행이 비쳐 보이지 않게 불투명 배경이 필요하다. */
|
|
background: var(--color-surface);
|
|
}
|
|
|
|
.ui-general-block__table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
}
|
|
|
|
.ui-general-block__table th,
|
|
.ui-general-block__table td {
|
|
padding: var(--spacing-12, var(--spacing-8)) var(--spacing-16);
|
|
border-bottom: 1px solid var(--color-border);
|
|
text-align: left;
|
|
}
|
|
|
|
.ui-general-block__empty {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
@media (max-width: 720px) {
|
|
.ui-general-layout {
|
|
padding: var(--spacing-24) var(--spacing-16) var(--spacing-40);
|
|
}
|
|
}
|