회의진행 화면 UI 개선

- 폰트 크기 통일: 다른 화면들(회의종료, 회의록수정, 회의록 상세조회)과 동일한 폰트 크기로 조정
- 회의 기본정보 영역 개선:
  * 라벨 너비 고정 (모바일 70px, 데스크톱 100px)
  * 라벨과 값 사이 구분선 추가 (border-right)
  * 모든 행의 구분선 위치 정렬
- 가독성 향상: align-items를 flex-start로 변경하여 여러 줄 콘텐츠에 대응

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
yabo0812 2025-10-27 17:00:28 +09:00
parent b15f0c7da0
commit 19fa569ad9
2 changed files with 43 additions and 1043 deletions

View File

@ -60,7 +60,7 @@
} }
.meeting-title { .meeting-title {
font-size: var(--font-large); font-size: var(--font-h2);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--gray-800); color: var(--gray-800);
margin: 0; margin: 0;
@ -100,7 +100,7 @@
} }
.recording-time { .recording-time {
font-size: var(--font-small); font-size: var(--font-body);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
} }
@ -173,9 +173,9 @@
.info-row { .info-row {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
align-items: center; align-items: flex-start;
gap: var(--space-sm); gap: 0;
padding: var(--space-xs) 0; padding: var(--space-sm) 0;
border-bottom: 1px solid var(--gray-300); border-bottom: 1px solid var(--gray-300);
} }
@ -186,14 +186,28 @@
.info-label { .info-label {
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--gray-600); color: var(--gray-600);
font-size: var(--font-caption); font-size: var(--font-small);
min-width: 60px; width: 70px;
min-width: 70px;
max-width: 70px;
flex-shrink: 0; flex-shrink: 0;
padding-right: var(--space-sm);
border-right: 1px solid var(--gray-300);
margin-right: var(--space-sm);
}
/* 데스크톱에서 라벨 폭 확장 */
@media (min-width: 768px) {
.info-label {
width: 100px;
min-width: 100px;
max-width: 100px;
}
} }
.info-value { .info-value {
color: var(--gray-800); color: var(--gray-800);
font-size: var(--font-small); font-size: var(--font-body);
line-height: 1.5; line-height: 1.5;
flex: 1; flex: 1;
} }
@ -229,7 +243,7 @@
background: transparent; background: transparent;
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: var(--font-small); font-size: var(--font-body);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--gray-600); color: var(--gray-600);
transition: all var(--transition-fast); transition: all var(--transition-fast);
@ -289,13 +303,13 @@
} }
.participant-section-title { .participant-section-title {
font-size: var(--font-small); font-size: var(--font-body);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
margin: 0; margin: 0;
} }
.participant-count { .participant-count {
font-size: var(--font-caption); font-size: var(--font-small);
color: var(--gray-600); color: var(--gray-600);
} }
@ -307,13 +321,13 @@
.invite-input { .invite-input {
flex: 1; flex: 1;
font-size: var(--font-small); font-size: var(--font-body);
padding: var(--space-sm); padding: var(--space-sm);
} }
.invite-btn { .invite-btn {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-md);
font-size: var(--font-small); font-size: var(--font-body);
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
@ -337,13 +351,13 @@
} }
.participant-name { .participant-name {
font-size: var(--font-small); font-size: var(--font-body);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--gray-800); color: var(--gray-800);
} }
.participant-email { .participant-email {
font-size: var(--font-caption); font-size: var(--font-small);
color: var(--gray-500); color: var(--gray-500);
margin-top: 2px; margin-top: 2px;
overflow: hidden; overflow: hidden;
@ -360,7 +374,7 @@
} }
.memo-input-label { .memo-input-label {
font-size: var(--font-small); font-size: var(--font-body);
font-weight: var(--font-weight-medium); font-weight: var(--font-weight-medium);
color: var(--gray-700); color: var(--gray-700);
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
@ -373,7 +387,7 @@
padding: var(--space-sm); padding: var(--space-sm);
border: 1px solid var(--gray-300); border: 1px solid var(--gray-300);
border-radius: var(--radius-md); border-radius: var(--radius-md);
font-size: var(--font-small); font-size: var(--font-body);
font-family: inherit; font-family: inherit;
resize: vertical; resize: vertical;
line-height: 1.5; line-height: 1.5;
@ -388,11 +402,11 @@
width: 100%; width: 100%;
margin-top: var(--space-xs); margin-top: var(--space-xs);
padding: var(--space-sm); padding: var(--space-sm);
font-size: var(--font-small); font-size: var(--font-body);
} }
.ai-suggestion-list-title { .ai-suggestion-list-title {
font-size: var(--font-body); font-size: var(--font-h3);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--gray-900); color: var(--gray-900);
margin-bottom: var(--space-sm); margin-bottom: var(--space-sm);
@ -416,7 +430,7 @@
} }
.ai-suggestion-time { .ai-suggestion-time {
font-size: var(--font-caption); font-size: var(--font-small);
color: var(--gray-500); color: var(--gray-500);
font-weight: var(--font-weight-regular); font-weight: var(--font-weight-regular);
} }
@ -446,7 +460,7 @@
} }
.ai-suggestion-text { .ai-suggestion-text {
font-size: var(--font-small); font-size: var(--font-body);
color: var(--gray-700); color: var(--gray-700);
line-height: 1.5; line-height: 1.5;
} }
@ -460,13 +474,13 @@
.term-search-input { .term-search-input {
flex: 1; flex: 1;
font-size: var(--font-small); font-size: var(--font-body);
padding: var(--space-sm); padding: var(--space-sm);
} }
.term-search-btn { .term-search-btn {
padding: var(--space-sm) var(--space-md); padding: var(--space-sm) var(--space-md);
font-size: var(--font-small); font-size: var(--font-body);
white-space: nowrap; white-space: nowrap;
flex-shrink: 0; flex-shrink: 0;
} }
@ -493,7 +507,7 @@
} }
.term-name { .term-name {
font-size: var(--font-small); font-size: var(--font-body);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--primary); color: var(--primary);
display: flex; display: flex;
@ -512,14 +526,14 @@
} }
.term-definition { .term-definition {
font-size: var(--font-small); font-size: var(--font-body);
color: var(--gray-700); color: var(--gray-700);
line-height: 1.5; line-height: 1.5;
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
} }
.term-context { .term-context {
font-size: 11px; font-size: var(--font-small);
color: var(--gray-500); color: var(--gray-500);
padding-top: var(--space-xs); padding-top: var(--space-xs);
border-top: 1px dashed #D0D0D0; border-top: 1px dashed #D0D0D0;
@ -546,7 +560,7 @@
} }
.related-doc-title { .related-doc-title {
font-size: var(--font-small); font-size: var(--font-body);
font-weight: var(--font-weight-bold); font-weight: var(--font-weight-bold);
color: var(--primary); color: var(--primary);
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
@ -555,7 +569,7 @@
.related-doc-meta { .related-doc-meta {
display: flex; display: flex;
gap: var(--space-xs); gap: var(--space-xs);
font-size: var(--font-caption); font-size: var(--font-small);
color: var(--gray-600); color: var(--gray-600);
margin-bottom: var(--space-xs); margin-bottom: var(--space-xs);
} }
@ -566,7 +580,7 @@
} }
.related-doc-text { .related-doc-text {
font-size: var(--font-small); font-size: var(--font-body);
color: var(--gray-700); color: var(--gray-700);
line-height: 1.5; line-height: 1.5;
} }

File diff suppressed because it is too large Load Diff