회기 전 자기점검 게이트 화면 재설계와 시간 만료 상태 대비·오버레이 수정
pre 게이트 카드가 행 높이만큼 늘어나면서 base flex의 align-items:center가 살아남아 3축 블록이 1fr 행 한가운데 떠 있었다. 1920x1080에서 카드의 66.5%가 빈 공간이고 축 위아래로 각 277px의 죽은 여백이 생겼다. 척도 라벨은 0.54rem에 nowrap+ellipsis라 901~1279px에서 최대 12개가 잘렸고, 620px 이하에서는 15개 전부 display:none으로 사라져 숫자만 남았다. 320x568에서는 접힌 mid 전용 40px 고정 행이 게이트에도 걸려 카드가 눌리고 헤더와 축이 겹쳤다. - 게이트 카드는 align-self:center + max-height:100% + 내부 스크롤로 중앙에 서고 높이는 내용이 정한다 - 3열 격자를 축별 세로 스택(질문 한 줄 + 전폭 5칸 척도)으로 바꿔 어느 폭에서도 라벨을 자르거나 숨기지 않는다. word-break:keep-all + overflow-wrap:normal로 어절 경계에서만 줄바꿈한다 - 정보가 없던 3 AXES 배지를 제출 버튼이 왜 잠겨 있는지 답하는 0/3 진행 표시로 교체한다 - 40px 고정 행 규칙을 :not(.sx-alliance-gated)로 접힌 mid 전용으로 되돌린다 - 선택 상태 글자색을 반투명 --surface에서 --text-on-accent로 고친다 시간 만료 상태에서 드러난 네 결함도 함께 닫는다. sx-timebar와 종료 모달 패널은 다크 stage 팔레트 시절 잔재로, 정의된 적 없는 --bg-panel의 하드코딩 다크 폴백 위에 테마 토큰 글자를 얹어 라이트에서 대비가 1.13:1까지 떨어졌다. 의미색 토큰과 불투명 표면으로 되돌렸다. sx-page--active > * 의 position:relative가 같은 특이도로 뒤에 있어 종료 모달의 fixed를 덮어써 오버레이가 1532x32px 띠로 눌렸고, 게이트 행 정의는 :has() 두 개짜리 규칙보다 특이도가 낮아 시간 만료 바가 뜨면 밀려나 빈 트랙이 남았다. 둘 다 선택자를 맞춰 정정했다. 계측: 빈 공간 0.665→0.127, 라벨 잘림 12→0, 숨김 15→0, 최소 탭 46x60, 가로 오버플로 0. 배너 대비 1.13→13.88, 모달 제목 2.68→15.79(다크 13.86/15.18). 검증: typecheck, session-layout+alliance-pulse+layout-visual-gate 31/31, 시간만료 종료 다이얼로그 2/2, pre/mid 잠금 2/2, full-sweep+self-directed 30 pass. 남은 음성 4건은 baseline에서도 동일 실패하는 기존 회귀다.
This commit is contained in:
Yun Chan
parent
b866a48b01
commit
f0c2240ffa
12 changed files with 359 additions and 108 deletions
|
|
@ -62,29 +62,35 @@
|
|||
.sx-page--active:has(.sx-timebar) {
|
||||
grid-template-rows: min-content min-content min-content minmax(0, 1fr) min-content;
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated {
|
||||
/* 게이트 상태의 행 정의는 아래 :has() 두 개짜리 규칙(0,3,0)보다 특이도가 낮아
|
||||
시간 만료 바가 뜨는 순간 밀려났다. 그러면 숨긴 축어록·컨트롤바의 빈 트랙이
|
||||
그대로 남아 화면 절반이 비어 보인다. 같은 :has()를 붙여 항상 이기게 한다. */
|
||||
.sx-page--active.sx-alliance-gated,
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: min-content minmax(0, 1fr);
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-timebar):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: min-content min-content minmax(0, 1fr);
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated .sx-grid {
|
||||
display: none;
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated .sx-controlbar {
|
||||
display: none;
|
||||
}
|
||||
/* 게이트 카드는 행 높이만큼 늘리지 않는다. 예전에는 stretch + 1fr 축 행이라
|
||||
1920×1080에서 카드의 66%가 빈 공간이었고 축 블록이 허공에 떠 보였다.
|
||||
이제 카드는 내용 높이로 화면 중앙에 서고, 넘칠 때만 카드 안에서 스크롤한다. */
|
||||
.sx-page--active.sx-alliance-gated .sx-alliance-checkpoint {
|
||||
height: 100%;
|
||||
min-height: 0;
|
||||
margin-top: 0;
|
||||
overflow: hidden;
|
||||
align-self: stretch;
|
||||
max-height: 100%;
|
||||
margin: 0 auto;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
align-self: center;
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated .sx-alliance-checkpoint.is-expanded {
|
||||
display: grid;
|
||||
grid-template-rows: auto minmax(0, 1fr) auto auto;
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated .sx-alliance-checkpoint__axes {
|
||||
align-content: start;
|
||||
overflow-y: auto;
|
||||
display: block;
|
||||
}
|
||||
[data-theme="light"] .sx-page--active {
|
||||
color-scheme: light;
|
||||
|
|
@ -2556,15 +2562,16 @@
|
|||
background: rgba(3, 9, 8, 0.62);
|
||||
backdrop-filter: blur(8px);
|
||||
}
|
||||
/* 패널도 다크 stage 잔재였다. 배경만 하드코딩 다크였고 글자는 테마 토큰이라
|
||||
라이트에서 제목 2.68:1 · 본문 1.14:1로 사실상 보이지 않았다. 불투명 토큰
|
||||
표면으로 되돌린다(스크림 위라 유리 표면 대신 불투명 --bg-app 사용). */
|
||||
.sx-end-dialog__panel {
|
||||
width: min(100%, 420px);
|
||||
padding: var(--sp-5);
|
||||
border: 1px solid rgba(203, 227, 220, 0.16);
|
||||
border: 1px solid var(--glass-border);
|
||||
border-radius: var(--radius-lg);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(24, 38, 35, 0.98), rgba(13, 24, 21, 0.98)),
|
||||
var(--asset-warm-elements) center / cover no-repeat;
|
||||
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.42);
|
||||
background: var(--glass-specular), var(--bg-app);
|
||||
box-shadow: 0 26px 70px rgba(0, 0, 0, 0.34);
|
||||
color: var(--text-body);
|
||||
}
|
||||
.sx-end-dialog__head {
|
||||
|
|
@ -2580,8 +2587,8 @@
|
|||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: rgba(216, 100, 89, 0.15);
|
||||
color: #f1b2aa;
|
||||
background: var(--crit-tint);
|
||||
color: var(--crit-text);
|
||||
}
|
||||
.sx-end-dialog h2 {
|
||||
margin: 0;
|
||||
|
|
@ -2613,17 +2620,17 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
.sx-end-dialog__secondary {
|
||||
border: 1px solid rgba(203, 227, 220, 0.16);
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
border: 1px solid var(--border-subtle, var(--hair));
|
||||
background: var(--bg-surface-2);
|
||||
color: var(--text-body);
|
||||
}
|
||||
.sx-end-dialog__danger {
|
||||
border: 1px solid transparent;
|
||||
background: var(--crit-solid);
|
||||
color: #fff;
|
||||
color: var(--text-on-accent);
|
||||
}
|
||||
.sx-end-dialog__secondary:hover:not(:disabled) {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
background: var(--bg-tint);
|
||||
color: var(--text-strong);
|
||||
}
|
||||
.sx-end-dialog__danger:hover:not(:disabled) {
|
||||
|
|
@ -4554,6 +4561,10 @@
|
|||
.sx-page--active:has(> .sx-timebar) {
|
||||
grid-template-rows: min-content min-content minmax(0, 1fr) min-content;
|
||||
}
|
||||
/* 이 바는 세션이 다크 stage 팔레트를 강제하던 시절의 잔재였다. --bg-panel은
|
||||
어디에도 정의된 적이 없어 항상 하드코딩 다크 폴백으로 칠해졌고, 글자만
|
||||
테마 토큰을 따라가 라이트에서 제목 1.13:1 · 설명 1.76:1까지 떨어졌다.
|
||||
두 값 모두 의미색 토큰으로 되돌려 두 테마에서 같은 위계를 갖게 한다. */
|
||||
.sx-timebar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
@ -4562,11 +4573,9 @@
|
|||
margin: 0 0 10px;
|
||||
padding: 9px 14px;
|
||||
border-radius: var(--radius);
|
||||
border: 1px solid rgba(228, 179, 99, 0.5);
|
||||
background:
|
||||
linear-gradient(0deg, rgba(228, 179, 99, 0.12), rgba(228, 179, 99, 0.12)),
|
||||
var(--bg-panel, rgba(20, 26, 24, 0.92));
|
||||
color: var(--text-strong, #eef4f2);
|
||||
border: 1px solid color-mix(in srgb, var(--warn-solid) 46%, transparent);
|
||||
background: var(--warn-tint);
|
||||
color: var(--text-strong);
|
||||
font-size: 13px;
|
||||
}
|
||||
.sx-timebar b {
|
||||
|
|
@ -4574,7 +4583,7 @@
|
|||
letter-spacing: -0.01em;
|
||||
}
|
||||
.sx-timebar__desc {
|
||||
color: var(--text-body, rgba(238, 244, 242, 0.74));
|
||||
color: var(--text-body);
|
||||
font-weight: 560;
|
||||
min-width: 0;
|
||||
overflow-wrap: anywhere;
|
||||
|
|
@ -4583,33 +4592,31 @@
|
|||
width: 8px;
|
||||
height: 8px;
|
||||
border-radius: 50%;
|
||||
background: #e4b363;
|
||||
box-shadow: 0 0 0 0 rgba(228, 179, 99, 0.5);
|
||||
background: var(--warn-solid);
|
||||
box-shadow: 0 0 0 0 color-mix(in srgb, var(--warn-solid) 50%, transparent);
|
||||
animation: sx-timebar-pulse 1.8s ease-out infinite;
|
||||
}
|
||||
.sx-timebar.is-over {
|
||||
border-color: rgba(224, 122, 95, 0.55);
|
||||
background:
|
||||
linear-gradient(0deg, rgba(224, 122, 95, 0.14), rgba(224, 122, 95, 0.14)),
|
||||
var(--bg-panel, rgba(20, 26, 24, 0.92));
|
||||
border-color: color-mix(in srgb, var(--crit-solid) 48%, transparent);
|
||||
background: var(--crit-tint);
|
||||
}
|
||||
.sx-timebar.is-over .sx-timebar__dot {
|
||||
background: #e07a5f;
|
||||
box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.5);
|
||||
background: var(--crit-solid);
|
||||
box-shadow: 0 0 0 0 color-mix(in srgb, var(--crit-solid) 50%, transparent);
|
||||
}
|
||||
.sx-timebar__end {
|
||||
margin-left: auto;
|
||||
padding: 6px 12px;
|
||||
border-radius: calc(var(--radius-sm) - 1px);
|
||||
border: 1px solid rgba(224, 122, 95, 0.6);
|
||||
background: rgba(224, 122, 95, 0.16);
|
||||
color: inherit;
|
||||
border: 1px solid color-mix(in srgb, var(--crit-solid) 58%, transparent);
|
||||
background: color-mix(in srgb, var(--crit-solid) 12%, transparent);
|
||||
color: var(--crit-text);
|
||||
font-size: 12.5px;
|
||||
font-weight: 740;
|
||||
cursor: pointer;
|
||||
}
|
||||
.sx-timebar__end:hover {
|
||||
background: rgba(224, 122, 95, 0.26);
|
||||
background: color-mix(in srgb, var(--crit-solid) 22%, transparent);
|
||||
}
|
||||
@keyframes sx-timebar-pulse {
|
||||
0% { box-shadow: 0 0 0 0 rgba(228, 179, 99, 0.45); }
|
||||
|
|
@ -4811,9 +4818,13 @@
|
|||
.sx-page--active:has(> .sx-timebar):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: min-content min-content min-content minmax(0, 1fr) min-content;
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated {
|
||||
.sx-page--active.sx-alliance-gated,
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: min-content minmax(0, 1fr);
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-timebar):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: min-content min-content minmax(0, 1fr);
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
.sx-page--active:has(> .sx-alliance-checkpoint-slot) {
|
||||
|
|
@ -4822,9 +4833,13 @@
|
|||
.sx-page--active:has(> .sx-timebar):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: 80px min-content min-content minmax(0, 1fr) 116px;
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated {
|
||||
.sx-page--active.sx-alliance-gated,
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: 80px minmax(0, 1fr);
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-timebar):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: 80px min-content minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 1280px) and (max-height: 820px) {
|
||||
|
|
@ -4834,15 +4849,21 @@
|
|||
.sx-page--active:has(> .sx-timebar):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: 52px min-content min-content minmax(0, 1fr) 82px;
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated {
|
||||
.sx-page--active.sx-alliance-gated,
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: 52px minmax(0, 1fr);
|
||||
}
|
||||
.sx-page--active.sx-alliance-gated:has(> .sx-timebar):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: 52px min-content minmax(0, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
/* 320×568 같은 저높이 폰에서는 mid 자기점검의 설명/버튼 줄바꿈만으로
|
||||
축어록 행이 사라진다. G1 상태는 그대로 두고 collapsed 표현만 한 줄로 압축한다. */
|
||||
@media (max-width: 420px) and (max-height: 620px) {
|
||||
.sx-page--active:has(> .sx-alliance-checkpoint-slot) {
|
||||
/* 40px 고정 행은 접힌 mid 스트립 전용이다. pre 게이트에서는 이 카드가
|
||||
화면의 전부라, 같은 규칙이 걸리면 카드가 40px로 눌려 헤더와 축이 겹쳤다. */
|
||||
.sx-page--active:not(.sx-alliance-gated):has(> .sx-alliance-checkpoint-slot) {
|
||||
grid-template-rows: min-content 40px minmax(0, 1fr) min-content;
|
||||
}
|
||||
.sx-page--active > .sx-alliance-checkpoint.is-collapsed {
|
||||
|
|
@ -4945,7 +4966,10 @@
|
|||
background-position: -132px 33%, -148px 88%;
|
||||
transform: scaleX(-1);
|
||||
}
|
||||
.sx-page--active > * {
|
||||
/* 보태니컬 ::before/::after 위로 본문을 올리는 규칙이다. 다만 종료 모달은
|
||||
같은 직계 자식이라 이 규칙이 position:fixed를 relative로 덮어썼고, 오버레이가
|
||||
화면을 덮는 대신 그리드 한 칸(1532×32px)으로 눌려 들어갔다. 오버레이는 제외한다. */
|
||||
.sx-page--active > *:not(.sx-end-dialog) {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue