/* EmptyState — 마ì´íŽ˜ì´ì§€ 리스트류 ë°ì´í„° ì—†ìŒ ê³µí†µ ìƒíƒœ */
.empty-state {
display: flex;
flex-direction: column;
align-items: center;
gap: 20px;
padding: 80px 16px;
background: #ffffff;
}
.empty-state__icon-text {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
}
.empty-state__message {
font-family: Pretendard, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.0014em;
color: #9b9b9b;
text-align: center;
margin: 0;
}
.empty-state__button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
padding: 7px 20px;
border: none;
border-radius: 8px;
text-decoration: none;
cursor: pointer;
}
.empty-state__button--dark {
background: #202020;
}
.empty-state__button--dark .empty-state__button-label {
color: #ffffff;
}
/* accent(1:1ë¬¸ì˜ Empty 등) — Figma CS-003: 빈 안내는 하단 80px 패딩으로 ëë‚˜ê³ ,
ê·¸ 아래 ë³„ë„ ButtonArea(pad 16/16/20)ì— 328×52 ì „í ë²„íŠ¼ì´ ë†“ìž„.
컨테ì´ë„ˆ gap 96 = 빈 안내 하단 80 + ButtonArea ìƒë‹¨ 16 */
.empty-state--accent {
gap: 96px;
padding: 80px 16px 20px;
}
.empty-state__button--accent {
width: 100%;
height: 52px;
border-radius: 8px;
background: #f0f4fe;
}
/* Figma Button/Buttons ë¼ë²¨ 16px/500 (dark variant 14px/500ê³¼ 구분) */
.empty-state__button--accent .empty-state__button-label {
font-size: 16px;
line-height: 24px;
color: #3c56d6;
}
.empty-state__button-label {
font-family: Pretendard, sans-serif;
font-size: 14px;
font-weight: 500;
line-height: 18px;
letter-spacing: 0.0014em;
white-space: nowrap;
}