eomsangdonandClaude Fable 5
4cb1f30f33
직전 커밋(673487c)의 시인성 개선이 B07에만 보이던 원인(2026-08-06 사용자
보고): B04/B05/B06 페이지 CSS가 border 전체 선언(1px solid --color-border)을
갖고 있어, 로드 순서상 공통 클래스(ui-sidebar-section)의 진한 border-color를
덮었다. B07은 로컬 선언이 없어 공통이 그대로 보였던 것.
세 페이지의 로컬 border 선언을 제거해 테두리를 공통 클래스가 전담하도록
일원화. 라운드·패딩·배경 등 형태는 각 페이지에 그대로 둠.
실측: B04·B05·B06 사이드 컨테이너 외곽선 선명 확인, 콘솔 에러 0.
Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
299 lines
6.7 KiB
CSS
299 lines
6.7 KiB
CSS
/* =============================================================================
|
|
* B06_wf3_ProfileCross_UI_Style.css
|
|
* 3차 워크플로우(종·횡단 생성) 페이지 전용 스타일.
|
|
*
|
|
* 원칙(frontend.md §1): 하드코딩 색상 금지. theme.css 변수(var(--...))만 참조.
|
|
* 공통 컴포넌트 스타일은 ui_template_elements.ts가 주입하므로 여기서는
|
|
* B06 고유 레이아웃(옵션 그룹/결과 메트릭)만 정의한다.
|
|
* ========================================================================== */
|
|
|
|
/* --- 좌측 입력 폼 --- */
|
|
.b06-profile-layout {
|
|
height: calc(100vh - var(--spacing-64));
|
|
height: calc(100dvh - var(--spacing-64));
|
|
min-height: 0;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.b06-profile-layout .ui-workflow-layout__body,
|
|
.b06-profile-layout .ui-workflow-layout__main {
|
|
height: 100%;
|
|
min-height: 0;
|
|
}
|
|
|
|
.b06-profile-layout .ui-workflow-layout__main {
|
|
overflow: auto;
|
|
}
|
|
|
|
.b06-profile__form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
.b06-profile__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
margin: 0;
|
|
padding: var(--spacing-16);
|
|
/* 테두리는 공통 ui-sidebar-section이 전담 — 로컬 border 선언이 공통 색을 덮던
|
|
문제 제거(2026-08-06 사용자 보고). */
|
|
border-radius: var(--radius-cards);
|
|
background-color: var(--color-surface-raised);
|
|
}
|
|
|
|
.b06-profile__group-legend {
|
|
padding: 0 var(--spacing-8);
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* --- 읽기 전용 경로 컨텍스트 --- */
|
|
.b06-profile__info-line {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-8);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-body);
|
|
}
|
|
|
|
.b06-profile__info-line span {
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-profile__info-line strong {
|
|
font-family: var(--font-mono);
|
|
text-align: right;
|
|
}
|
|
|
|
/* --- 액션 버튼 행 --- */
|
|
.b06-profile__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-profile__actions > * {
|
|
flex: 1 1 0;
|
|
min-width: 0;
|
|
}
|
|
|
|
/* --- 표준 횡단면 설정 패널 --- */
|
|
.b06-std {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
.b06-std__body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
}
|
|
|
|
/* ─── 변수 위치 안내 모식도 (작업 C-5) ───────────────────────────── */
|
|
.b06-std__diagram {
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
padding: var(--spacing-8);
|
|
}
|
|
|
|
.b06-std__diagram-summary {
|
|
cursor: pointer;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
user-select: none;
|
|
}
|
|
|
|
.b06-std__diagram-svg {
|
|
width: 100%;
|
|
height: auto;
|
|
margin-top: var(--spacing-8);
|
|
}
|
|
|
|
.b06-std__diagram-caption {
|
|
margin: var(--spacing-8) 0 0;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
/* ─── 다른 프로젝트에서 불러오기 (작업 C-6) ───────────────────────── */
|
|
.b06-std__loader {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
padding: var(--spacing-8);
|
|
}
|
|
|
|
.b06-std__loader-summary {
|
|
cursor: pointer;
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
user-select: none;
|
|
}
|
|
|
|
.b06-std__loader-status {
|
|
margin: 0;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.b06-std__loader-preview {
|
|
margin: 0;
|
|
padding: var(--spacing-8);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface-raised);
|
|
color: var(--color-text-body);
|
|
font-size: var(--text-caption);
|
|
white-space: pre-wrap;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.b06-diag__ground {
|
|
fill: none;
|
|
stroke: var(--color-text-muted);
|
|
stroke-width: 1;
|
|
stroke-dasharray: 3 2;
|
|
}
|
|
|
|
.b06-diag__road {
|
|
fill: none;
|
|
stroke: var(--color-text-body);
|
|
stroke-width: 2;
|
|
}
|
|
|
|
.b06-diag__center {
|
|
stroke: var(--color-royal-amethyst, rgb(109 40 217));
|
|
stroke-width: 1;
|
|
stroke-dasharray: 4 3;
|
|
}
|
|
|
|
.b06-diag__tick {
|
|
stroke: var(--color-text-secondary);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-diag__ditch {
|
|
fill: color-mix(in srgb, rgb(37 99 235) 20%, transparent);
|
|
stroke: rgb(37 99 235);
|
|
stroke-width: 1;
|
|
}
|
|
|
|
.b06-diag__cut {
|
|
stroke: rgb(220 38 38);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.b06-diag__fill {
|
|
stroke: rgb(37 99 235);
|
|
stroke-width: 1.5;
|
|
}
|
|
|
|
.b06-diag__label {
|
|
fill: var(--color-text-body);
|
|
font-size: 14px;
|
|
}
|
|
|
|
.b06-diag__label-sm {
|
|
fill: var(--color-text-secondary);
|
|
font-size: 12px;
|
|
}
|
|
|
|
/* 구간 그룹(details/summary) — 상단 "변수 위치 안내" 모식도와 동일한 균일 8px 패딩으로
|
|
맞춰 접힘 시 좌측·하단 여백을 줄인다(N-4 후속). */
|
|
.b06-std__group {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
margin: 0;
|
|
padding: var(--spacing-8);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.b06-std__legend {
|
|
font-size: var(--text-caption);
|
|
font-weight: var(--font-weight-medium);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
/* 구간 그룹 접기(N-4-1) — details/summary. 기본 ▶ 마커로 접힘/펼침 표시. */
|
|
.b06-std__group > summary.b06-std__legend {
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.b06-std__grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, minmax(0, 1fr));
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
.b06-std__note {
|
|
margin: 0;
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-muted);
|
|
}
|
|
|
|
.b06-std__actions {
|
|
display: flex;
|
|
gap: var(--spacing-8);
|
|
}
|
|
|
|
/* --- 우측 결과 --- */
|
|
.b06-profile__result {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-16);
|
|
padding: var(--spacing-24);
|
|
}
|
|
|
|
.b06-profile__result-title {
|
|
font-size: var(--text-subheading);
|
|
color: var(--color-text);
|
|
}
|
|
|
|
.b06-profile__empty {
|
|
color: var(--color-text-muted);
|
|
font-size: var(--text-body-sm);
|
|
}
|
|
|
|
.b06-profile__result-body {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-8);
|
|
max-width: 480px;
|
|
}
|
|
|
|
.b06-profile__metric {
|
|
display: flex;
|
|
align-items: baseline;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-16);
|
|
padding: var(--spacing-8) var(--spacing-16);
|
|
border-radius: var(--radius-inputs);
|
|
background-color: var(--color-surface);
|
|
}
|
|
|
|
.b06-profile__metric-key {
|
|
font-size: var(--text-caption);
|
|
color: var(--color-text-secondary);
|
|
}
|
|
|
|
.b06-profile__metric-val {
|
|
font-family: var(--font-mono);
|
|
font-size: var(--text-body-sm);
|
|
color: var(--color-text-body);
|
|
word-break: break-all;
|
|
text-align: right;
|
|
}
|