Files
Aislo/M02_MasterTemplete/M02_MasterTemplete_Hopyo.css
T
eomsangdonandClaude Opus 5.5 520bb33909 feat(827-3): 불러오기 재료 걸음 3 — 고를 재료 판 · 그 파일 안 고름(별칭 아님) · SK 상세 같은 파일 물음
- 새 M02_San_MatPick: 종 열쇠(이름 · 규격 · 단위 · 단서) · 고름 자리 = 개인 층 실무자료/재료고름/<파일 지문>.json([끝내기] 뒤 남음 · 같은 파일 다시 올리면 그대로) · 판(블록마다 재료찾기 판정 → 종 · 첫 판 한 번 셈 → 산근 저장본 칸) · 만들 때 얹기 · 이미 만든 SK 얹기(가져온 그대로인 줄만 · 바꿈 · 따로 고른 줄 그대로 · 풀면 가져온 그대로)
- 만들기: from-hopyo 가 그 파일 고름째 만듦(저장 안 한 판 고름 = 만들 때 저장) · 원본 지문 · 고른 줄 = 이음 + 재료찾기.고름 · 문서 셈 우리 값(엑셀 값 기억 없음) · 별도계상 = 품목만(줄 이음 · 단가 0 그대로)
- 문서 머리 가져온.재료(판정 · 후보 · 단서 · 처음 연결) · 가져온.지문
- 길: GET/POST hopyo-materials/{HP}(판 · [저장] · 만든 것 적용은 물음 예일 때만) · GET/POST material-picks/{지문}(SK 상세 물음)
- 화면: 단가산출 목록 위 「고를 재료」 판(후보 고름 · 찾기 · 고름 풀기 · n 블록에 적용 · 이어진 재료 접힘 · [저장]) · 저장 안 한 고름 = 떠날 때 물음 · 줄 쌓기 재료 줄 판정 배지 · 풍선말(판정 · 단서 · 후보) · 이름 단추 · [이음 고르기] 뒤 「같은 파일 n 줄」 물음
- 별도계상 설명 = 「별도계상 · 품목: 이름 규격」(엔진 이은 품목은 자재표 이름) — test_827_2 기대 글 고침(품목 이음 → 품목 이름)
- 시험 test_827_3 셋(파일 고름 블록 둘 · 다른 파일 0 · 별칭 · 마스터 그대로 · 풀기 · 다시 올림 유지 · 물음 예일 때만 · 따로 바꾼 줄 보존 · 별도계상 품목 + 단가 0)

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
2026-11-13 12:51:04 +09:00

268 lines
5.8 KiB
CSS

/* M02 일위대가 실무자료(PLAN 324-4) — 좌측 판 · 본 화면(호표 표 · 줄 맞춤) · 색은 공용 토큰(밝음 · 어두움 같이) */
.m02-hopyo-side {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.m02-hopyo {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
min-width: 0;
}
.m02-hopyo__bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-8);
}
/* 겉 = 보조 글 부품(ui-text--warning) · 여기는 줄바꿈 살림만 */
.m02-hopyo__warn {
white-space: pre-wrap;
}
.m02-hopyo__search {
max-width: 320px;
}
/* 실무자료 표 — 한글은 낱말 단위로만 줄바꿈(두세 글자마다 안 갈라짐) · 너무 긴 낱말만 쪼갬 */
.m02-hopyo__table :is(th, td) {
word-break: keep-all;
overflow-wrap: break-word;
}
/* 우리 로직 칸 — 대상 여럿 = 칸 안 여러 줄(이름 · 키 · 몫 · 배 칸 · [옵션]) */
.m02-hopyo__parts {
min-width: 11em;
}
.m02-hopyo__part {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--spacing-4);
}
.m02-hopyo__part + .m02-hopyo__part {
margin-top: var(--spacing-4);
}
.m02-hopyo__times {
width: 6em;
}
.m02-hopyo__unit {
display: inline-flex;
align-items: center;
gap: var(--spacing-4);
}
/* 단위 환산 칸 앞뒤 글 — 「엑셀 1 ㎡ = 우리 [ ] 본」 */
.m02-hopyo__unit-text {
color: var(--color-text-secondary);
font-size: var(--text-sm);
white-space: nowrap;
}
.m02-hopyo__acts {
white-space: nowrap;
}
.m02-hopyo__acts > button + button {
margin-left: var(--spacing-4);
}
/* 엑셀 보기(329) — 왼쪽 읽기 전용 시트 · 오른쪽 호표 목록 */
.m02-hopyo-sheet {
display: grid;
grid-template-columns: minmax(0, 1fr) 22rem;
gap: var(--spacing-8);
flex: 1;
min-height: 0;
}
/* 좁은 폭(730-2) — 오른쪽 목록 22rem 이 시트 칸을 폭 0 으로 짓누름 → 위(시트) · 아래(목록) 쌓기 */
@media (max-width: 900px) {
.m02-hopyo-sheet {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: minmax(0, 3fr) minmax(0, 2fr);
}
}
/* 불러오기 본 칸(785-4) — 본 칸을 화면 높이로 채움(도면 양식 앞선 꼴 한 벌) · 시트 아래 줄 판 자리 */
.m02-main:has(> .m02-main__host > .m02-hopyo-import) {
box-sizing: border-box;
height: calc(100dvh - var(--app-header-h));
min-height: 0;
}
.m02-main__host:has(> .m02-hopyo-import) {
display: flex;
flex: 1 1 0;
min-height: 0;
}
.m02-hopyo-import {
display: flex;
flex: 1 1 0;
flex-direction: column;
gap: var(--spacing-8);
width: 100%;
min-width: 0;
min-height: 0;
}
.m02-hopyo-import > .m02-hopyo-sheet {
flex: 1 1 0;
}
.m02-hopyo-sheet__col {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
min-width: 0;
min-height: 0;
}
.m02-hopyo-sheet__col > .m02-hopyo-sheet__grid {
flex: 1 1 0;
min-height: 8rem;
}
/* 세 보기 막대 · 범례(779-4) — 시트 위 한 줄씩 · 넘치면 감김 */
.m02-hopyo-sheet__nav {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.m02-hopyo-sheet__grid {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
overflow: hidden;
}
.m02-hopyo-sheet__side {
display: flex;
flex-direction: column;
gap: var(--spacing-8);
min-height: 0;
}
/* 단가산출 탭 오른쪽 = 단가산출 목록(780-2) — 판 넓힘 · 숨김이 display 에 안 덮이게 · 강조 줄 */
@media (min-width: 901px) {
.m02-hopyo-sheet.is-sk {
grid-template-columns: minmax(0, 1fr) minmax(24rem, 44%);
}
}
.m02-hopyo-sheet__side[hidden] {
display: none;
}
/* 목록만 굴림 — 거르기 · [확인한 것 옮기기] 막대는 늘 보임 */
.m02-hopyo-sheet__sk > .m02-hopyo {
flex: 1;
min-height: 0;
}
.m02-hopyo-sheet__sk [data-wiz-sk] {
flex: 1;
min-height: 0;
overflow: auto;
}
.m02-hopyo-sheet__sk tr[data-sk-block] {
cursor: pointer;
}
.m02-hopyo-sheet__sk tr.is-current > td {
background: var(--color-accent-soft);
}
.m02-hopyo-sheet__sk tr.is-current > td:first-child {
box-shadow: inset 3px 0 0 var(--color-accent);
}
/* 827-3 고를 재료 판 — 단가산출 목록 위 · 판만 굴림(목록은 늘 보임) */
.m02-hopyo-matpick {
flex: none;
max-height: 45%;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: var(--spacing-4) var(--spacing-8);
}
.m02-hopyo-matpick__body {
display: flex;
flex-direction: column;
gap: var(--spacing-4);
}
.m02-hopyo-sheet__list {
flex: 1;
min-height: 0;
overflow: auto;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
}
.m02-hopyo-sheet__item {
display: flex;
align-items: center;
gap: var(--spacing-4);
padding: var(--spacing-4) var(--spacing-8);
border-left: 3px solid transparent;
cursor: pointer;
}
.m02-hopyo-sheet__item:hover {
background: var(--color-surface);
}
.m02-hopyo-sheet__item.is-current {
border-left-color: var(--color-accent);
background: var(--color-accent-soft);
}
.m02-hopyo-sheet__no {
min-width: 4.5em; /* [수정] 단추가 줄마다 같은 자리 */
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.m02-hopyo-sheet__name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* 목록 숫자 — 다 연결(359-2)이면 녹색 · [수정] 은 번호 바로 오른쪽 · 줄 높이 안 커짐 */
.m02-hopyo-sheet__item .ui-text.is-linked {
color: var(--color-success);
}
.m02-hopyo-sheet__item > .ui-btn {
flex-shrink: 0;
}
/* 머리 글 ↔ [파일 업로드] — 구조물 조합 머리 ↔ 층 단추와 같은 12 px */
.m02-hopyo-side > .m02-side__row {
margin-top: var(--spacing-12);
}
/* 줄 바꿈 도구 막대(가져온 식 · 소요량 이음) */
.m02-judge__wrap {
flex-wrap: wrap;
}