eomsangdonandClaude Opus 5.5
81380c6f3e
Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01JywHxQuWPk6UYXTebyrBoU
116 lines
2.9 KiB
CSS
116 lines
2.9 KiB
CSS
/* =============================================================================
|
|
* B06_Section_UI_Style_Cross_Detail.css
|
|
* 횡단 카드 [상세] 단추 · 모달(138-4) — 투명 막(누름 통과) · 글 칸 · CAD 꼴 그림 · B07 수량표.
|
|
* ========================================================================== */
|
|
|
|
/* 측구 줄 맨 오른쪽 — ⋯ 가 보이면 그 옆, 숨으면 혼자 오른쪽 끝 */
|
|
.b06-design__detail {
|
|
flex: 0 0 auto;
|
|
margin-left: auto;
|
|
}
|
|
|
|
.b06-design__more:not([hidden]) ~ .b06-design__detail {
|
|
margin-left: 0;
|
|
}
|
|
|
|
/* 막은 투명 · 누름은 아래 화면으로 — 모달 몸만 받음 */
|
|
.ui-modal__backdrop.b06-detail__backdrop {
|
|
background-color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.b06-detail__backdrop > .ui-modal.b06-detail {
|
|
pointer-events: auto;
|
|
overflow: auto;
|
|
box-shadow: var(--shadow-lg);
|
|
}
|
|
|
|
.b06-detail__note {
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
resize: vertical;
|
|
font: inherit;
|
|
}
|
|
|
|
/* 가벼운 CAD 꼴 — 어두운 바탕 · 카드 그림 복제에 다크 색 토큰을 덮어씀 */
|
|
.b06-detail__cad {
|
|
--color-bg: #111111;
|
|
--color-surface: #111111;
|
|
--color-surface-raised: #1a1a1a;
|
|
--color-border: #3a3a3a;
|
|
--color-text: #f2f2f2;
|
|
--color-text-body: #e6e6e6;
|
|
--color-text-secondary: #b8b8b8;
|
|
--color-text-muted: #8b8b8b;
|
|
--color-primary: #c9a8ff;
|
|
--color-warning: #ffd34d;
|
|
--color-danger: #ff5f57;
|
|
--color-success: #4cd37b;
|
|
border-radius: var(--radius-cards);
|
|
background: #111111;
|
|
color: #f2f2f2;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b06-detail__cad > svg {
|
|
display: block;
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
/* B07 횡단 수량 산출표 — 칸 배치 그대로 */
|
|
.b06-detail__table.is-loading {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.b06-detail__qtable {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
font-size: var(--text-caption);
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
.b06-detail__qtable th,
|
|
.b06-detail__qtable td {
|
|
padding: 2px 4px;
|
|
border: 1px solid var(--color-border);
|
|
text-align: center;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.b06-detail__qtable th {
|
|
font-weight: 500;
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-detail__qtable tr:first-child > th {
|
|
text-align: left;
|
|
color: var(--color-text);
|
|
}
|
|
|
|
/* 표 칸 누름 ↔ 그림 강조(150-4) — 짝 있는 칸만 손가락 · 고른 칸 강조 */
|
|
.b06-detail__qtable [data-key] {
|
|
cursor: pointer;
|
|
}
|
|
|
|
.b06-detail__qtable [data-key]:hover,
|
|
.b06-detail__qtable .is-picked {
|
|
background: color-mix(in srgb, var(--color-primary) 18%, transparent);
|
|
}
|
|
|
|
/* 그림 복제에만 있는 강조 둘 — 중심 십자(높이 넷) · 사토장 선 */
|
|
.b06-detail__cad .b06-chart__center.is-active line {
|
|
stroke: var(--color-warning);
|
|
stroke-width: 3;
|
|
}
|
|
|
|
.b06-detail__cad .b06-chart__spoil-fill.is-active {
|
|
stroke-width: 4;
|
|
}
|
|
|
|
/* 판정 선은 복제에서 누를 일 없음 — 손가락 지움 */
|
|
.b06-detail__cad .b06-chart__design-hit,
|
|
.b06-detail__cad .b06-chart__area > polygon {
|
|
cursor: default;
|
|
}
|