feat: 운영 안정성과 세션 음성 경험 개선
This commit is contained in:
Yun Chan
parent
facc4ad2d9
commit
c788343467
95 changed files with 8431 additions and 1785 deletions
|
|
@ -67,6 +67,28 @@
|
|||
.sr-head__meta .sr-mono {
|
||||
font-family: var(--font-num);
|
||||
}
|
||||
/* D3: 날짜 줄과 분리한 페르소나·상태 칩 줄. 가운뎃점 대신 칩 간격으로 구분한다. */
|
||||
.sr-head__tags {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
gap: 6px;
|
||||
margin-top: 7px;
|
||||
}
|
||||
.sr-head__tag {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
min-height: 22px;
|
||||
padding: 0 8px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text-muted);
|
||||
background: var(--bg-surface-2);
|
||||
font-size: var(--fs-xs);
|
||||
font-weight: 650;
|
||||
line-height: 1.35;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.sr-meta-sep {
|
||||
width: 3px;
|
||||
height: 3px;
|
||||
|
|
@ -88,11 +110,12 @@
|
|||
border-radius: var(--radius);
|
||||
background: var(--bg-surface-2);
|
||||
}
|
||||
/* D2: 라벨이 한글(회기·지도)이 되면서 영문 대문자용 자간·숫자 서체는 무의미해 제거 */
|
||||
.sr-stat__lab {
|
||||
font-family: var(--font-num);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-kicker);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.06em;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
.sr-stat__val {
|
||||
|
|
@ -212,6 +235,7 @@
|
|||
background: var(--bg-surface-2);
|
||||
}
|
||||
.sr-tabs button {
|
||||
position: relative;
|
||||
flex: 1 1 0;
|
||||
min-width: 0;
|
||||
padding: 9px 12px;
|
||||
|
|
@ -223,6 +247,19 @@
|
|||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
}
|
||||
/* D6: 비활성 탭이 배경과 붙어 보이지 않으므로 탭 사이마다 얇은 구분선을 세워
|
||||
"여러 개 중 하나"임을 드러낸다. 가운데 탭이 활성일 때도 구분이 남도록 항상 그리고,
|
||||
활성 탭 카드와 겹치지 않게 6px 간격 한가운데(-4px)에 둔다. */
|
||||
.sr-tabs button + button::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: -4px;
|
||||
top: 24%;
|
||||
bottom: 24%;
|
||||
width: 1px;
|
||||
background: var(--border-strong);
|
||||
opacity: 0.8;
|
||||
}
|
||||
.sr-tabs button:hover {
|
||||
color: var(--text-strong);
|
||||
}
|
||||
|
|
@ -263,6 +300,10 @@
|
|||
font-size: var(--fs-body);
|
||||
line-height: 1.35;
|
||||
}
|
||||
/* D4: 중복 배지를 없앤 대신 완료·승인 상태만 강조색으로 남긴다 */
|
||||
.sr-teacher-review__head b.is-done {
|
||||
color: var(--accent-deep);
|
||||
}
|
||||
.sr-teacher-review__head--sub {
|
||||
margin-bottom: var(--sp-2);
|
||||
}
|
||||
|
|
@ -508,13 +549,13 @@
|
|||
gap: 8px;
|
||||
align-items: center;
|
||||
}
|
||||
/* D2: 한글 라벨(척도·사전·사후)에는 대문자 변환·영문 자간이 무의미해 제거 */
|
||||
.sr-prepost__row--head {
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-num);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 10.5px;
|
||||
font-weight: 750;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.sr-prepost__row--head span:not(:first-child) {
|
||||
text-align: center;
|
||||
|
|
@ -701,13 +742,6 @@
|
|||
.sr-phase:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
.sr-phase__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background: var(--accent-bright);
|
||||
flex: none;
|
||||
}
|
||||
.sr-phasebar__axis {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
|
@ -995,7 +1029,6 @@
|
|||
font-size: 10px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.04em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
.sr-note__body {
|
||||
display: grid;
|
||||
|
|
@ -1301,28 +1334,20 @@
|
|||
background: linear-gradient(135deg, rgba(30, 39, 36, .95), rgba(30, 39, 36, .82));
|
||||
box-shadow: var(--shadow-sm);
|
||||
}
|
||||
/* D1·D2: 장식 점과 영문용 넓은 자간을 빼고 한글 섹션 라벨로 맞춘다 */
|
||||
.sr-feedback__kicker {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
margin-bottom: var(--sp-3);
|
||||
color: var(--text-muted);
|
||||
font-family: var(--font-num);
|
||||
font-family: var(--font-sans);
|
||||
font-size: var(--fs-kicker);
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.08em;
|
||||
}
|
||||
.sr-feedback__kicker .sr-technique__dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: var(--text-muted);
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.sr-feedback--filled .sr-feedback__kicker {
|
||||
color: var(--accent-bright);
|
||||
}
|
||||
.sr-feedback--filled .sr-feedback__kicker .sr-technique__dot {
|
||||
background: var(--accent-bright);
|
||||
}
|
||||
.sr-feedback__quote {
|
||||
margin: 0;
|
||||
color: var(--text-body);
|
||||
|
|
@ -1353,25 +1378,11 @@
|
|||
display: grid;
|
||||
gap: var(--sp-4);
|
||||
}
|
||||
/* D1: 항목 앞 고정색 점을 없애 단일 컬럼으로 정리 */
|
||||
.sr-point {
|
||||
min-width: 0;
|
||||
display: grid;
|
||||
grid-template-columns: auto minmax(0, 1fr);
|
||||
column-gap: 11px;
|
||||
align-items: start;
|
||||
}
|
||||
.sr-point__mk {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
margin-top: 7px;
|
||||
border-radius: 50%;
|
||||
flex: none;
|
||||
}
|
||||
.sr-points--good .sr-point__mk {
|
||||
background: var(--pos-solid);
|
||||
}
|
||||
.sr-points--grow .sr-point__mk {
|
||||
background: var(--warn-solid);
|
||||
grid-template-columns: minmax(0, 1fr);
|
||||
}
|
||||
.sr-point__h {
|
||||
margin-bottom: 2px;
|
||||
|
|
@ -1405,14 +1416,14 @@
|
|||
border-radius: var(--radius);
|
||||
background: color-mix(in srgb, var(--warn-tint) 58%, var(--bg-surface-2));
|
||||
}
|
||||
/* D2: 한글 라벨이라 대문자 변환·영문 자간 제거 */
|
||||
.sr-nextline__lab {
|
||||
margin-bottom: 7px;
|
||||
color: var(--accent-deep);
|
||||
font-family: var(--font-num);
|
||||
font-family: var(--font-sans);
|
||||
font-size: 11px;
|
||||
font-weight: 650;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
.sr-nextline__q {
|
||||
color: var(--text-strong);
|
||||
|
|
@ -1426,12 +1437,21 @@
|
|||
border-radius: var(--radius-sm);
|
||||
background: var(--accent-tint);
|
||||
}
|
||||
/* 배경 잎사귀 이미지 위에 그냥 얹히면 대비가 부족해 읽히지 않는다.
|
||||
내용만큼만 차지하는 불투명 칩으로 감싸 본문 대비를 확보한다. */
|
||||
.sr-session-id {
|
||||
min-width: 0;
|
||||
width: fit-content;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
color: var(--text-muted);
|
||||
padding: 6px 10px;
|
||||
border: 1px solid var(--border-subtle);
|
||||
border-radius: var(--radius-sm);
|
||||
background: var(--bg-surface);
|
||||
color: var(--text-body);
|
||||
font-family: var(--font-num);
|
||||
font-size: var(--fs-xs);
|
||||
line-height: 1.45;
|
||||
overflow-wrap: anywhere;
|
||||
}
|
||||
|
||||
|
|
@ -1632,9 +1652,6 @@
|
|||
padding: 0 5px;
|
||||
font-size: 11px;
|
||||
}
|
||||
.sr-phase__dot {
|
||||
display: none;
|
||||
}
|
||||
.sr-tx__head {
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue