feat: 운영 안정성과 세션 음성 경험 개선
This commit is contained in:
Yun Chan
parent
facc4ad2d9
commit
c788343467
95 changed files with 8431 additions and 1785 deletions
|
|
@ -147,13 +147,30 @@
|
|||
font-size: 13px;
|
||||
line-height: 1.15;
|
||||
}
|
||||
/* D3 — "이름 · 단계 · 경과" 한 줄(· 2개)을 "이름 · 단계" + "경과" 두 칸으로 분리했다.
|
||||
두 칸을 gap 으로 띄워 가운뎃점 없이도 구분되게 한다. */
|
||||
.sx-sessionbar__meta small {
|
||||
color: rgba(238, 244, 242, 0.55);
|
||||
font: 600 11px/1.2 var(--font-sans);
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
}
|
||||
.sx-sessionbar__meta small span {
|
||||
min-width: 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 바깥 .sx-sessionbar__meta span:last-child(세로 스택) 규칙이 안쪽 span 까지 잡지
|
||||
않도록 여기서 다시 눌러 준다. */
|
||||
.sx-sessionbar__meta small span:last-child {
|
||||
display: block;
|
||||
flex: none;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.sx-sessionbar__dot {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
|
|
@ -504,6 +521,10 @@
|
|||
margin-top: 1px;
|
||||
line-height: 1.35;
|
||||
}
|
||||
/* D3 — 한 줄에 · 가 몰리지 않도록 소개를 여러 줄로 흘린다 */
|
||||
.sx-ctx__mt span {
|
||||
display: block;
|
||||
}
|
||||
.sx-ctx__meta {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
|
@ -2692,6 +2713,9 @@
|
|||
radial-gradient(circle at 20% 22%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 32%);
|
||||
pointer-events: none;
|
||||
}
|
||||
/* 중복 목록을 걷어내 카드 내용이 초상+이름+한 줄 소개로 줄었다. 예전처럼 열 전체 높이로
|
||||
늘리면(align-self:stretch) 위아래가 크게 비어 허전해 보여서, 내용 높이만큼만 차지하고
|
||||
부모 그리드의 align-items:center 로 세로 가운데에 놓이게 바꿨다. */
|
||||
.sx-prestart__visual {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
|
|
@ -2699,28 +2723,21 @@
|
|||
gap: var(--sp-3);
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
align-self: stretch;
|
||||
align-self: center;
|
||||
align-content: center;
|
||||
padding: var(--sp-4);
|
||||
padding: var(--sp-4) var(--sp-3) var(--sp-5);
|
||||
border-radius: var(--radius);
|
||||
}
|
||||
/* 아바타 카드는 이름 + 한 줄 소개만 남긴다. 호소·대상·난도 목록(ul)과 이니셜 원은
|
||||
본문 사실 목록/초상과 중복이라 제거했다(관련 규칙도 함께 삭제).
|
||||
내용이 줄어든 만큼 초상 바로 아래 가운데 정렬로 붙여 허전해 보이지 않게 한다. */
|
||||
.sx-prestart__case {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
.sx-prestart__case-initial {
|
||||
width: 76px;
|
||||
height: 76px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
border-radius: 50%;
|
||||
background: var(--clay-tint);
|
||||
color: var(--clay-deep);
|
||||
font-size: 28px;
|
||||
font-weight: 780;
|
||||
box-shadow: inset 0 0 0 1px rgba(204, 143, 119, 0.25);
|
||||
gap: 4px;
|
||||
justify-items: center;
|
||||
text-align: center;
|
||||
}
|
||||
.sx-prestart__case b {
|
||||
display: block;
|
||||
|
|
@ -2729,64 +2746,25 @@
|
|||
line-height: 1.35;
|
||||
}
|
||||
.sx-prestart__case p {
|
||||
margin: 5px 0 0;
|
||||
margin: 0;
|
||||
color: var(--text-body);
|
||||
font-size: 13px;
|
||||
line-height: 1.45;
|
||||
line-height: 1.5;
|
||||
max-width: 24ch;
|
||||
}
|
||||
.sx-prestart__case ul {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: grid;
|
||||
gap: 8px;
|
||||
}
|
||||
.sx-prestart__case li {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
gap: 3px;
|
||||
padding: 9px 10px;
|
||||
border-radius: var(--radius-sm);
|
||||
}
|
||||
.sx-prestart__case li span {
|
||||
color: var(--text-muted);
|
||||
font-size: 11px;
|
||||
font-weight: 760;
|
||||
}
|
||||
.sx-prestart__case li em {
|
||||
color: var(--text-strong);
|
||||
font-size: 12.5px;
|
||||
font-style: normal;
|
||||
font-weight: 680;
|
||||
line-height: 1.35;
|
||||
overflow: hidden;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
/* D3 — 줄당 가운뎃점 1개가 되도록 나눠 흘린 소개 줄 */
|
||||
.sx-prestart__case p span {
|
||||
display: block;
|
||||
}
|
||||
.sx-prestart__main {
|
||||
min-width: 0;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.sx-prestart__eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
color: var(--accent-deep);
|
||||
font-family: var(--font-num);
|
||||
font-size: var(--fs-kicker);
|
||||
font-weight: 700;
|
||||
}
|
||||
.sx-prestart__eyebrow span {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-bright);
|
||||
flex: none;
|
||||
}
|
||||
/* D4 — .sx-prestart__eyebrow("○○ 단계 준비") 는 페이지 제목과 같은 말이라 마크업과
|
||||
함께 제거했다. 이제 제목이 본문 첫 요소라 위 여백을 지운다. */
|
||||
.sx-prestart__title {
|
||||
margin-top: var(--sp-3);
|
||||
margin-top: 0;
|
||||
font-size: var(--fs-h2);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
|
|
@ -3070,6 +3048,11 @@
|
|||
.sx-prestart {
|
||||
grid-template-columns: minmax(180px, 230px) minmax(0, 1fr);
|
||||
}
|
||||
/* 2열 구간은 본문 열이 훨씬 길어서 초상 카드를 세로 가운데에 두면 혼자 아래로 처진다.
|
||||
제목과 같은 높이에서 시작하도록 위쪽에 붙인다. */
|
||||
.sx-prestart__visual {
|
||||
align-self: start;
|
||||
}
|
||||
.sx-prestart__plan {
|
||||
grid-column: 1 / -1;
|
||||
padding-top: var(--sp-4);
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue