wrapper 가 들어와도 슬롯 높이(12/14/16) 를 따르도록 — Figma 141:11248 */
.bg-content-badge__icon > .bg-icon { height: 100%; width: auto; }
.bg-content-badge__icon > .bg-icon > svg { height: 100%; width: auto; }
/* Label slot — root에 font 속성이 이미 박혀 있어 시각적으로는 inherit만으로 충분.
라벨 단독 styling override 훅이 필요한 경우를 위해 BEM 일관성 차원에서 정의. */
.bg-content-badge__label {
display: inline-flex;
align-items: center;
color: inherit;
font: inherit;
letter-spacing: inherit;
white-space: nowrap;
}
/* ================================================
CONTENTS BADGE / VALUE — Figma 59:116
Sub-variant of ContentsBadge — monospaced value chip (e.g., tokens, KV values, code values)
Distinct from solid/outlined: SF Mono Medium 12px, px-6 py-2, radius-4, backdrop-blur 32
BG: Fill/Strong for Neutral, accent color @ 12% opacity for 13 color variants
Optional sub label (10px) — Neutral: Label/Alternative · Accent: label color @ 50% opacity
================================================ */
.bg-content-badge[data-variant="value"] {
/* Override size-based properties (Value has fixed size; works with any data-size) */
font-family: 'SF Mono', 'Menlo', 'Consolas', 'Liberation Mono', monospace;
font-weight: 500; /* Medium */
font-size: 12px;
line-height: 1.334;
letter-spacing: 0;
padding: 2px 6px;
border-radius: 4px;
gap: 4px;
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
overflow: clip;
text-align: center;
}
/* Neutral Value — Fill/Strong bg, Label/Normal text */
.bg-content-badge[data-variant="value"][data-color="neutral"] {
background: rgba(113, 113, 115, 0.16); /* Fill/Strong */
color: #131315; /* Label/Normal */
border: 0;
}
/* Accent Value — solid color bg @ 12% opacity, solid color text */
.bg-content-badge[data-variant="value"]:not([data-color="neutral"]) {
background: rgba(var(--badge-rgb), 0.12);
color: rgb(var(--badge-rgb));
border: 0;
}
/* Sub label (optional) — 10px / lh 1.2 */
.bg-content-badge[data-variant="value"] .bg-content-badge__sub {
font-family: inherit; /* SF Mono inherited */
font-weight: 500;
font-size: 10px;
line-height: 1.2;
letter-spacing: 0;
}
/* Sub label color — Neutral: Label/Alternative · Accent: label color @ 50% opacity */
.bg-content-badge[data-variant="value"][data-color="neutral"] .bg-content-badge__sub {
color: rgba(55, 56, 60, 0.61); /* Label/Alternative */
}
.bg-content-badge[data-variant="value"]:not([data-color="neutral"]) .bg-content-badge__sub {
color: inherit;
opacity: 0.5; /* Figma: opacity-50 (Accent sub label) */
}
/* ================================================
LIST CELL
================================================ */
.bg-list-cell {
position: relative;
display: flex;
align-items: center;
width: 100%;
max-width: 335px;
box-sizing: border-box;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-list-cell[data-fill-width="true"] { max-width: 100%; }
.bg-list-cell__container {
position: relative;
display: flex;
flex: 1;
gap: 8px;
width: 100%;
min-width: 0;
z-index: 1;
box-sizing: border-box;
}
.bg-list-cell[data-vpadding="none"] .bg-list-cell__container { padding: 0; }
.bg-list-cell[data-vpadding="small"] .bg-list-cell__container { padding: 8px 0; }
.bg-list-cell[data-vpadding="medium"] .bg-list-cell__container { padding: 12px 0; }
.bg-list-cell[data-vpadding="large"] .bg-list-cell__container { padding: 16px 0; }
.bg-list-cell[data-valign="top"] .bg-list-cell__container { align-items: flex-start; }
.bg-list-cell[data-valign="center"] .bg-list-cell__container { align-items: center; }
.bg-list-cell__leading { display: inline-flex; align-items: center; flex-shrink: 0; }
.bg-list-cell__leading-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; }
.bg-list-cell__leading-icon svg { width: 100%; height: 100%; display: block; color: #131315; }
.bg-list-cell__leading-icon > .bg-icon { width: 100%; height: 100%; }
.bg-list-cell__leading-icon > .bg-icon > svg { width: 100%; height: 100%; }
.bg-list-cell__content {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 4px;
overflow: hidden;
}
.bg-list-cell__label {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.0912px;
font-weight: 400;
color: #131315; /* Label/Normal */
min-height: 24px;
display: flex;
align-items: center;
}
.bg-list-cell__description {
font-size: 13px;
line-height: 1.385;
letter-spacing: 0.2522px;
font-weight: 400;
color: rgba(61,61,63,0.61); /* Label/Alternative */
}
/* Text ellipsis */
.bg-list-cell[data-text-ellipsis="true"] .bg-list-cell__label {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bg-list-cell[data-text-ellipsis="true"] .bg-list-cell__description {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Trailing */
.bg-list-cell__trailing {
display: inline-flex;
align-items: center;
padding-left: 8px;
flex-shrink: 0;
}
.bg-list-cell__trailing-value {
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.0912px;
color: rgba(61,61,63,0.61); /* Label/Alternative */
text-align: right;
white-space: nowrap;
}
/* Figma 141:11723: Trailing value 는 hug — 말줄임은 Text Ellipsis variant 에서만 */
.bg-list-cell[data-text-ellipsis="true"] .bg-list-cell__trailing-value {
overflow: hidden;
text-overflow: ellipsis;
max-width: 120px;
}
/* Figma 141:11808 Selected trailing: Icon/Normal/Check 24px (pl-8), fill Primary/Orange (자산 확인) */
.bg-list-cell__trailing-check {
display: inline-flex;
width: 24px;
height: 24px;
color: var(--semantic-primary-orange);
}
.bg-list-cell__trailing-check svg { width: 100%; height: 100%; display: block; }
/* Chevron — Figma 141:11723: 12×16 슬롯(pl-8) 안에 chevronRightTight 8×16 glyph, Label/Assistive(0.28) */
.bg-list-cell__chevron {
display: inline-flex;
align-items: center;
justify-content: center;
padding-left: 8px;
padding-top: 4px;
padding-bottom: 4px;
min-width: 20px;
box-sizing: border-box;
flex-shrink: 0;
}
.bg-list-cell__chevron svg {
height: 16px;
width: auto;
display: block;
color: var(--semantic-label-assistive);
}
/* Divider — 하단 border */
.bg-list-cell[data-divider="true"]::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 1px;
background: rgba(113,113,115,0.08);
pointer-events: none;
z-index: 2;
}
/* Interaction overlay (selected or hover) — Figma 141:12030:
outer absolute frame inset[0,-20] + px-8 → 실효 visible overlay: ±12px from cell (8px gap from container edge) */
.bg-list-cell::before {
content: '';
position: absolute;
inset: 0 -12px;
background: rgba(19,19,21,0.05);
border-radius: 12px;
pointer-events: none;
opacity: 0;
transition: opacity 0.15s;
z-index: 0;
}
/* Figma 141:11808 (Selected=True): Interaction opacity 0 → 배경 tint 없음. 라벨 Medium + Primary/Orange */
.bg-list-cell[data-selected="true"] .bg-list-cell__label {
font-weight: 500;
color: var(--semantic-primary-orange);
}
.bg-list-cell[data-interaction="true"][data-disabled="false"][data-selected="false"]:hover::before { opacity: 1; }
/* Disabled — Figma 141:11766: 컨테이너 opacity 0.43 + 라벨 Label/Alternative */
.bg-list-cell[data-disabled="true"] {
opacity: 0.43;
cursor: not-allowed;
}
.bg-list-cell[data-disabled="true"] .bg-list-cell__label {
color: var(--semantic-label-alternative);
}
.bg-list-cell[data-interaction="true"][data-disabled="false"] {
cursor: pointer;
}
/* ================================================
CATEGORY
================================================ */
.bg-category {
display: flex;
align-items: flex-start;
overflow: clip;
position: relative;
width: 100%;
max-width: 335px;
box-sizing: border-box;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-category[data-h-padding="true"] { max-width: 100%; padding: 0 20px; }
.bg-category__container {
display: flex;
flex: 1;
align-items: center;
gap: 20px;
min-width: 0;
}
.bg-category__leading {
display: flex;
flex: 1;
align-items: center;
overflow-x: auto;
overflow-y: hidden;
min-width: 0;
scrollbar-width: none;
}
.bg-category__leading::-webkit-scrollbar { display: none; }
.bg-category__leading-content {
display: flex;
flex-direction: column;
justify-content: center;
}
/* Figma 335:71085 / 70987 / 71183 / 71281: 탭 간 gap S 4 · M 6 · L 8 · XL 10 */
.bg-category__wrapper {
display: flex;
gap: 6px;
align-items: center;
}
.bg-category[data-size="small"] .bg-category__wrapper { gap: 4px; }
.bg-category[data-size="large"] .bg-category__wrapper { gap: 8px; }
.bg-category[data-size="xlarge"] .bg-category__wrapper { gap: 10px; }
/* verticalPadding 여백: S/M 8 · L/XL 10 */
.bg-category__v-space {
height: 8px;
flex-shrink: 0;
}
.bg-category[data-size="large"] .bg-category__v-space,
.bg-category[data-size="xlarge"] .bg-category__v-space { height: 10px; }
/* Tab chip */
.bg-category__tab {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
box-sizing: border-box;
cursor: pointer;
border: 0;
background: transparent;
position: relative;
border-radius: 9999px;
font-weight: 500; /* Medium */
white-space: nowrap;
transition: background-color 0.15s, border-color 0.15s, color 0.15s;
}
/* Size */
/* Figma 335:71085 (S) / 70987 (M) / 71183 (L) / 71281 (XL):
h-padding = 탭 px + 내부 px 합산 (S 7+1 / M 8+2 / L 11+2 / XL 12+2), v-padding L 7 / XL 9,
폰트 S Caption 1 Medium 12 · L/XL Body 2 Medium 15. inactive 1px border 는 inset box-shadow (같은 박스 안) */
.bg-category[data-size="small"] .bg-category__tab { height: 24px; padding: 4px 8px; font-size: 12px; line-height: 1.334; letter-spacing: 0.3024px; }
.bg-category[data-size="medium"] .bg-category__tab { height: 32px; padding: 6px 10px; font-size: 14px; line-height: 1.429; letter-spacing: 0.203px; }
.bg-category[data-size="large"] .bg-category__tab { height: 36px; padding: 7px 13px; font-size: 15px; line-height: 1.467; letter-spacing: 0.144px; }
.bg-category[data-size="xlarge"] .bg-category__tab { height: 40px; padding: 9px 14px; font-size: 15px; line-height: 1.467; letter-spacing: 0.144px; }
/* Alternative variant + Medium = 30px height (1단계 작은 font) */
.bg-category[data-variant="alternative"][data-size="medium"] .bg-category__tab {
height: 30px; font-size: 13px; line-height: 1.385; letter-spacing: 0.2522px;
}
/* Variant + Active/Inactive 색상 */
/* Normal Active: orange filled */
.bg-category[data-variant="normal"] .bg-category__tab[data-active="true"] {
background: #FF6121;
color: #F6F6F6;
border: 0;
}
/* Normal Inactive: outlined */
.bg-category[data-variant="normal"] .bg-category__tab[data-active="false"] {
background: var(--semantic-static-white); /* 2026-10-23 Figma: 안쪽 Static/White */
color: rgba(61,61,63,0.61);
border: 0;
box-shadow: inset 0 0 0 1px rgba(113,113,115,0.22);
}
/* Alternative Active: orange tinted */
.bg-category[data-variant="alternative"] .bg-category__tab[data-active="true"] {
background: linear-gradient(rgba(255,97,33,0.05), rgba(255,97,33,0.05)), var(--semantic-static-white); /* 틴트 + Static/White 바탕 */
color: #FF6121;
border: 0;
box-shadow: inset 0 0 0 1px rgba(255,97,33,0.43);
}
/* Alternative Inactive: outlined */
.bg-category[data-variant="alternative"] .bg-category__tab[data-active="false"] {
background: var(--semantic-static-white); /* Static/White */
color: rgba(61,61,63,0.61);
border: 0;
box-shadow: inset 0 0 0 1px rgba(113,113,115,0.22);
}
/* Tab interaction overlay (hover/active) — Figma의 absolute interaction div 재현
variant + active 조합에 따라 overlay 색상 분기 */
.bg-category__tab > * { position: relative; z-index: 1; }
.bg-category__tab::after {
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 0;
}
/* Normal Active: 흰 overlay (#F6F6F6 Inverse/Label) */
.bg-category[data-variant="normal"] .bg-category__tab[data-active="true"]::after { background: #F6F6F6; }
/* Normal Inactive: 어두운 overlay (#131315 Label/Normal) */
.bg-category[data-variant="normal"] .bg-category__tab[data-active="false"]::after { background: #131315; }
/* Alternative Active: orange overlay */
.bg-category[data-variant="alternative"] .bg-category__tab[data-active="true"]::after { background: #FF6121; }
/* Alternative Inactive: 어두운 overlay */
.bg-category[data-variant="alternative"] .bg-category__tab[data-active="false"]::after { background: #131315; }
/* Hover / Active(press) opacity — Figma Category/Resource/Chip 335:71404 = Interaction/Normal (70:190): 5% / 12% (결정 §4) */
.bg-category__tab:hover::after { opacity: 0.05; }
.bg-category__tab:active::after { opacity: 0.12; }
/* Trailing icon button */
.bg-category__trailing {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bg-category__icon-button {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
cursor: pointer;
border: 0;
background: transparent;
padding: 0;
color: #131315;
}
/* Figma iconButton 크기: S 20 · M 22 · L/XL 24 */
.bg-category[data-size="small"] .bg-category__icon-button { width: 20px; height: 20px; }
.bg-category[data-size="large"] .bg-category__icon-button,
.bg-category[data-size="xlarge"] .bg-category__icon-button { width: 24px; height: 24px; }
.bg-category__icon-button svg {
height: 100%; width: auto; display: block;
position: relative; z-index: 1;
}
.bg-category__icon-button > .bg-icon { height: 100%; width: auto; position: relative; z-index: 1; }
.bg-category__icon-button > .bg-icon > svg { height: 100%; width: auto; }
/* Icon button interaction overlay — inset:-8px hit area (Figma 명세) */
.bg-category__icon-button::before {
content: '';
position: absolute;
inset: -8px;
background: var(--semantic-label-normal); /* Label/Normal — 토큰 통일 (결정 §1) */
border-radius: 9999px;
opacity: 0;
pointer-events: none;
transition: opacity 0.15s;
z-index: 0;
}
/* Figma 335:71010 = Button/Icon/Normal → Interaction/Light: 4% / 9% (결정 §4) */
.bg-category__icon-button:hover::before { opacity: 0.04; }
.bg-category__icon-button:active::before { opacity: 0.09; }
/* ================================================
PAGINATION / NAVIGATION ← Figma 340:6822
Composes 4 resources:
- Page (337:77318) → .bg-pagination__page
- Button / Chevron (337:77323) → .bg-pagination__btn
- Limit chip (337:77332) → .bg-pagination__limit
- Navigation (337:77819) → .bg-pagination__nav
3 variants: Extended (760px, with Limit+Navigation), Compact (335px), Minimize
================================================ */
.bg-pagination {
box-sizing: border-box;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-pagination[data-variant="extended"] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
max-width: 760px;
}
.bg-pagination[data-variant="compact"] {
display: inline-flex;
align-items: center;
justify-content: center;
width: 335px;
}
.bg-pagination[data-variant="minimize"] {
display: inline-flex;
align-items: center;
justify-content: center;
}
.bg-pagination__container {
display: inline-flex;
align-items: center;
gap: 16px; /* Figma: between buttons */
min-height: 32px;
}
.bg-pagination[data-variant="minimize"] .bg-pagination__container { gap: 12px; }
/* --- Resource: Page (337:77318) --- */
.bg-pagination__page {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
width: 20px;
height: 30px;
padding: 4px 0;
border: 0;
background: transparent;
cursor: pointer;
box-sizing: border-box;
position: relative;
isolation: isolate;
font-family: inherit;
font-size: 15px;
line-height: 1.467;
letter-spacing: 0.144px;
font-weight: 400; /* Regular (Body 2 / Normal - Regular) */
color: rgba(46, 47, 51, 0.88); /* Label/Neutral */
text-align: center;
}
/* Active state — Medium weight + darker color (Label/Normal) */
.bg-pagination__page[data-active="true"] {
color: var(--semantic-label-normal); /* Label/Normal — 토큰 통일 (결정 §1) */
font-weight: 500; /* Medium (Body 2 / Normal - Medium) */
}
/* Hover/active overlay — Figma 337:77320 Interaction (±7px H, h:32, radius:6, bg Label/Normal) */
.bg-pagination__page::before {
content: "";
position: absolute;
left: -7px; right: -7px;
top: 50%;
transform: translateY(-50%);
height: 32px;
border-radius: 6px;
background: var(--semantic-label-normal); /* Label/Normal — 토큰 통일 (결정 §1) */
opacity: 0;
pointer-events: none;
transition: opacity 0.12s;
z-index: -1;
}
.bg-pagination__page:hover::before { opacity: 0.05; }
.bg-pagination__page:active::before { opacity: 0.12; }
.bg-pagination__page[data-active="true"]::before { opacity: 0.09; }
/* Ellipsis */
.bg-pagination__ellipsis {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 20px;
height: 30px;
color: rgba(55, 56, 60, 0.61); /* Label/Alternative */
font-size: 15px;
line-height: 1.467;
letter-spacing: 0.144px;
user-select: none;
}
/* --- Resource: Button / Chevron (337:77323) — 16x16 icon + ±8px hit area --- */
.bg-pagination__btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 16px;
height: 16px;
padding: 0;
border: 0;
background: transparent;
cursor: pointer;
position: relative;
isolation: isolate;
color: var(--semantic-label-alternative); /* Figma 337:77323: Label/Alternative (0.61) */
flex-shrink: 0;
}
.bg-pagination__btn svg { width: 100%; height: 100%; display: block; }
.bg-pagination__btn[disabled] {
cursor: not-allowed;
color: var(--semantic-label-disable); /* Figma: Label/Disable (0.16) */
}
/* Figma 340:6865 (Compact): Leading/Trailing Button h-24, chevron*TightSmall 12×24 (Ratio 1:2) */
.bg-pagination[data-variant="compact"] .bg-pagination__btn { width: 12px; height: 24px; }
/* Figma 340:6823 / 340:6865: container gap 4 + 첫/끝 페이지 wrapper pl/pr-16 → chevron↔page 20 (Minimize 는 12) */
.bg-pagination[data-variant="extended"] .bg-pagination__btn[data-dir="prev"],
.bg-pagination[data-variant="compact"] .bg-pagination__btn[data-dir="prev"] { margin-right: 4px; }
.bg-pagination[data-variant="extended"] .bg-pagination__btn[data-dir="next"],
.bg-pagination[data-variant="compact"] .bg-pagination__btn[data-dir="next"] { margin-left: 4px; }
/* Hit area extends ±8px outside icon (32x32 hit, circular overlay Label/Alternative) */
.bg-pagination__btn::before {
content: "";
position: absolute;
inset: -8px;
border-radius: 9999px;
background: rgba(55, 56, 60, 0.61); /* Label/Alternative */
opacity: 0;
pointer-events: none;
transition: opacity 0.12s;
z-index: -1;
}
.bg-pagination__btn:not([disabled]):hover::before { opacity: 0.04; }
.bg-pagination__btn:not([disabled]):active::before { opacity: 0.09; }
/* --- Resource: Limit chip (337:77332) — "10 ▼" + "씩 보기" --- */
.bg-pagination__limit {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
.bg-pagination__limit-chip {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 1px; /* Figma 337:77332: value ↔ caret gap-px */
padding: 6px 6px 6px 8px;
border: 0;
box-shadow: inset 0 0 0 1px rgba(112, 115, 124, 0.16); /* Line/Normal/Neutral, stroke-inside */
border-radius: 8px;
background: var(--semantic-static-white); /* 2026-10-23 Figma: 안쪽 Static/White */
cursor: pointer;
position: relative;
isolation: isolate;
font-family: inherit;
color: var(--semantic-label-normal); /* Label/Normal — 토큰 통일 (결정 §1) */
box-sizing: border-box;
}
.bg-pagination__limit-chip-value {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 0 2px;
font-size: 14px;
font-weight: 500; /* Medium */
line-height: 1.429;
letter-spacing: 0.203px;
}
.bg-pagination__limit-chip-icon {
width: 16px;
height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: inherit;
}
.bg-pagination__limit-chip-icon svg { width: 100%; height: 100%; display: block; }
.bg-pagination__limit-chip-icon > .bg-icon { width: 100%; height: 100%; }
.bg-pagination__limit-chip-icon > .bg-icon > svg { width: 100%; height: 100%; }
.bg-pagination__limit-chip::before {
content: "";
position: absolute;
inset: 0;
border-radius: 6px;
background: var(--semantic-label-normal); /* Label/Normal — 토큰 통일 (결정 §1) */
opacity: 0;
pointer-events: none;
transition: opacity 0.12s;
z-index: -1;
}
.bg-pagination__limit-chip:hover::before { opacity: 0.05; }
.bg-pagination__limit-chip:active::before { opacity: 0.12; }
.bg-pagination__limit-label {
font-size: 13px;
font-weight: 500;
line-height: 1.385;
letter-spacing: 0.2522px;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
white-space: nowrap;
}
/* --- Resource: Navigation (337:77819) — "페이지 이동" + Textfield --- */
/* Mirrors Figma's nested Textinput/Textfield: Container(px-6 py-4 r-8) > Content(min-h-24) > Text(px-4) > Field */
.bg-pagination__nav {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: 122px;
}
.bg-pagination__nav-label {
font-size: 13px;
font-weight: 500;
line-height: 1.385;
letter-spacing: 0.2522px;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
white-space: nowrap;
flex-shrink: 0;
}
/* Container — outer text-field box (Figma 337:77799;140:5917) */
.bg-pagination__nav-input {
flex: 1 0 0;
min-width: 0;
position: relative;
isolation: isolate;
display: inline-flex;
align-items: center;
justify-content: center;
padding: 4px 6px;
border-radius: 8px;
background: var(--semantic-static-white); /* 2026-10-23 Figma Textinput/Resource/Background: Static/White */
box-sizing: border-box;
cursor: text;
transition: box-shadow 0.12s;
}
/* Inner border — absolute, doesn't affect layout (Figma 140:7298 stroke-inside) */
.bg-pagination__nav-input::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px rgba(112, 115, 124, 0.16); /* Line/Normal/Neutral */
pointer-events: none;
transition: box-shadow 0.12s;
}
/* Focus state — darker border (Figma Active=True 패턴) */
.bg-pagination__nav-input:focus-within::before {
box-shadow: inset 0 0 0 1px rgba(46, 47, 51, 0.88); /* Label/Neutral */
}
/* Field — actual , transparent, padded px-4 (Figma 140:5923) */
.bg-pagination__nav-input > input {
flex: 1 0 0;
min-width: 0;
min-height: 24px;
padding: 0 4px;
border: 0;
background: transparent;
outline: none;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.429;
letter-spacing: 0.203px;
color: #131315; /* Label/Normal */
text-align: center;
box-sizing: border-box;
-moz-appearance: textfield;
}
/* Hide spinner buttons for number-style input */
.bg-pagination__nav-input > input::-webkit-outer-spin-button,
.bg-pagination__nav-input > input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
/* Extended variant positioning — Limit (leading) absolute-left, Navigation (trailing) absolute-right */
.bg-pagination[data-variant="extended"] .bg-pagination__limit {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
.bg-pagination[data-variant="extended"] .bg-pagination__nav {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
}
/* Minimize variant — page indicator (현재/총) */
.bg-pagination__indicator {
display: inline-flex;
align-items: center;
font-size: 13px;
font-weight: 500;
line-height: 1.385;
letter-spacing: 0.2522px;
color: rgba(46, 47, 51, 0.88); /* Label/Neutral */
white-space: nowrap;
}
/* ============================================================
SQUIRCLE ← Figma: Logo/Bilrigo/Squircle (134:357)
독립 DS 프리미티브. 어디서나 단독 사용 가능.
구조: outer (overflow-clip, size by data-size)
└ bg img (absolute inset-0 size-full) — 주황 squircle
└ inner wrapper (absolute inset 22.5/10.39/18.43/10.4%)
└ inner img (absolute inset-0 size-full) — 흰색 GO face
Figma 노드: 134:357 (Squircle 30x30 디폴트), inner Group 134:216
============================================================ */
.bg-squircle {
position: relative;
flex-shrink: 0;
overflow: clip;
display: inline-block;
}
.bg-squircle[data-size="30"] { width: 30px; height: 30px; }
.bg-squircle[data-size="100"] { width: 100px; height: 100px; }
.bg-squircle__bg {
position: absolute;
inset: 0;
width: 100%; height: 100%;
max-width: none;
display: block;
}
.bg-squircle__group {
position: absolute;
top: 22.5%;
right: 10.39%;
bottom: 18.43%;
left: 10.4%;
}
.bg-squircle__group > img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
max-width: none;
display: block;
}
/* ============================================================
BILO ← Figma: Logo/BILO (418:34623)
독립 DS 합성 프리미티브. .bg-squircle + wordmark wrapper(img 포함).
구조 (Figma 노드 1:1):
outer (flex items-center gap-[8px], relative)
└ .bg-squircle[data-size="30"] — 134:357
└ .bg-bilo__wordmark (relative 78.93×25.72) — 519:18451
└ ![]()
(absolute inset:0 size:full max-w:none)
canonical size: 116.93 × 30 (squircle 30 + gap 8 + wordmark 78.93).
변형 없음 (Figma prop 노출 없음).
============================================================ */
.bg-bilo {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
}
.bg-bilo__wordmark {
position: relative;
width: 78.93px;
height: 25.72px;
flex-shrink: 0;
}
.bg-bilo__wordmark > img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
max-width: none;
display: block;
}
/* ============================================================
BILO HORIZONTAL KR ← Figma: Logo/Bilrigo/Horizontal/KR (134:275)
독립 DS 프리미티브. 가로형 한글 BILO 로고. canonical 261×100.
구조: outer (relative 261×100)
└ .__bili (absolute inset 0 / 54.62% / 34.55% / 0)
└ ![]()
(absolute inset:0 size:full)
└ .__go (absolute inset 0.76% / 0 / 0 / 49.09%)
└ ![]()
(absolute inset:0 size:full)
Props: data-color = "Color" | "White" | "Black" (Figma 'color' prop 그대로)
JS가 data-color 변경 시 img src를 갱신 (Squircle 패턴과 동일하게 ![]()
사용).
============================================================ */
.bg-bilo-horizontal-kr {
position: relative;
width: 261px;
height: 100px;
display: inline-block;
}
.bg-bilo-horizontal-kr__bili {
position: absolute;
top: 0;
right: 54.62%;
bottom: 34.55%;
left: 0;
}
.bg-bilo-horizontal-kr__go {
position: absolute;
top: 0.76%;
right: 0;
bottom: 0;
left: 49.09%;
}
.bg-bilo-horizontal-kr__bili > img,
.bg-bilo-horizontal-kr__go > img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
max-width: none;
display: block;
}
/* ============================================================
BILO HORIZONTAL EN ← Figma: Logo/Bilrigo/Horizontal/EN (134:317)
독립 DS 프리미티브. 가로형 영문 BILRIGO 로고. canonical 317×100.
구조: outer (relative 317×100)
└ ![]()
(absolute inset:0 size:full) — 풀 BILRIGO + GO 단일 image
Props: data-color = "Color" | "White" | "Black" (Figma 'color' prop 그대로)
KR과 달리 단일 image (Figma export 결과 — 빌리/GO 분리 안 됨).
============================================================ */
.bg-bilo-horizontal-en {
position: relative;
width: 317px;
height: 100px;
display: inline-block;
}
.bg-bilo-horizontal-en > img {
position: absolute;
inset: 0;
width: 100%; height: 100%;
max-width: none;
display: block;
}
/* ============================================================
DIVIDER ← Figma: Divider/Divider (134:1269)
독립 DS 프리미티브. 어디서나 단독 사용 가능.
Props (Figma 그대로):
- data-variant: "Normal" | "Thick" (Figma 'variant' prop)
- data-vertical: "false" | "true" (Figma 'vertical' prop)
Variants:
- Normal · horizontal (134:1270): h-px, bg rgba(113,113,115,0.22) Line/Normal/Normal
- Thick · horizontal (134:1271): h-[12px], bg rgba(113,113,115,0.08) Line/Normal/Alternative
- Normal · vertical (134:1272): w-px, bg rgba(113,113,115,0.22) Line/Normal/Normal
기본은 부모 컨테이너 폭/높이 따라감 (w-full / h-full).
============================================================ */
.bg-divider {
flex-shrink: 0;
background: rgba(113, 113, 115, 0.22); /* Line/Normal/Normal (Normal variant 기본) */
}
/* Horizontal (Vertical=false 기본) */
.bg-divider[data-variant="Normal"][data-vertical="false"],
.bg-divider[data-variant="Normal"]:not([data-vertical="true"]) {
width: 100%;
height: 1px;
}
.bg-divider[data-variant="Thick"][data-vertical="false"],
.bg-divider[data-variant="Thick"]:not([data-vertical="true"]) {
width: 100%;
height: 12px;
background: rgba(113, 113, 115, 0.08); /* Line/Normal/Alternative */
}
/* Vertical */
.bg-divider[data-vertical="true"] {
width: 1px;
height: 100%;
}
.bg-divider[data-variant="Thick"][data-vertical="true"] {
width: 12px;
background: rgba(113, 113, 115, 0.08);
}
/* ============================================================
PAGE INDICATOR / COUNTER ← Figma: Page Indicator/Counter (337:77203)
독립 DS 프리미티브 — 이미지 묶음 페이지 카운터 (예: 1/10).
Props (Figma 그대로):
- data-size: "Small" | "Medium" (Figma 'size' prop)
- data-alternative: "false" | "true" (Figma 'alternative' prop · True는 Android only)
- data-current-page / data-total-page: 텍스트 내용 (currentPage/totalPage props)
Pill shape (radius 1000px), iOS Materials/Chrome backdrop-blur(32) — Alternative=False만.
폰트: Pretendard Variable + font-feature-settings 'ss10' (tabular numbers). Figma는 JP variant를 명시하지만 본 프로젝트는 Pretendard Variable 단일 패밀리 정책으로 통일.
============================================================ */
.bg-page-indicator-counter {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
isolation: isolate;
}
.bg-page-indicator-counter[data-alternative="false"] {
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
}
/* Background layer — pill, overflow-clip, absolute fill */
.bg-page-indicator-counter__bg {
position: absolute;
inset: 0;
overflow: clip;
border-radius: 1000px;
z-index: 0;
pointer-events: none;
}
/* Alternative=False: 흰색 plus-lighter 0.35 + 검정 0.28 — iOS chrome 분위기 */
.bg-page-indicator-counter[data-alternative="false"] .bg-page-indicator-counter__bg::before {
content: '';
position: absolute;
inset: 0;
border-radius: 1000px;
background: #FFFFFF;
opacity: 0.35;
mix-blend-mode: plus-lighter;
}
.bg-page-indicator-counter[data-alternative="false"] .bg-page-indicator-counter__bg::after {
content: '';
position: absolute;
inset: 0;
border-radius: 1000px;
background: #000000;
opacity: 0.28;
}
/* Alternative=True: Cool Neutral/30 #46474C @ 0.61 — Android material */
.bg-page-indicator-counter[data-alternative="true"] .bg-page-indicator-counter__bg::before {
content: '';
position: absolute;
inset: 0;
border-radius: 1000px;
background: #46474C;
opacity: 0.61;
}
/* Content — flex row of num / sep / num */
.bg-page-indicator-counter__content {
position: relative;
z-index: 1;
display: flex;
align-items: flex-start;
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-feature-settings: 'ss10' 1;
white-space: nowrap;
text-align: center;
}
/* Size variants — padding · font · gap · letter-spacing · line-height */
.bg-page-indicator-counter[data-size="Medium"] .bg-page-indicator-counter__content {
gap: 4px;
padding: 6px 12px;
font-size: 15px;
line-height: 1.467;
letter-spacing: 0.144px;
}
.bg-page-indicator-counter[data-size="Small"] .bg-page-indicator-counter__content {
gap: 3px;
padding: 4px 10px;
font-size: 13px;
line-height: 1.385;
letter-spacing: 0.2522px;
}
/* Text color — Alternative determines color */
.bg-page-indicator-counter[data-alternative="false"] .bg-page-indicator-counter__content {
color: #989BA2; /* Cool Neutral/70 */
}
.bg-page-indicator-counter[data-alternative="true"] .bg-page-indicator-counter__content {
color: #FFFFFF;
}
/* Number (SemiBold) */
.bg-page-indicator-counter__num {
font-weight: 600; /* SemiBold */
text-shadow: 0 0 6px rgba(0,0,0,0.08);
}
.bg-page-indicator-counter[data-alternative="false"] .bg-page-indicator-counter__num {
mix-blend-mode: plus-lighter;
opacity: 0.74;
}
.bg-page-indicator-counter[data-alternative="true"] .bg-page-indicator-counter__num {
opacity: 0.88;
}
/* Separator (Regular "/") */
.bg-page-indicator-counter__sep {
font-weight: 400; /* Regular */
}
.bg-page-indicator-counter[data-alternative="false"] .bg-page-indicator-counter__sep {
mix-blend-mode: plus-lighter;
opacity: 0.28;
}
.bg-page-indicator-counter[data-alternative="true"] .bg-page-indicator-counter__sep {
opacity: 0.52;
}
/* ============================================================
TOAST ← Figma: Toast/Toast (310:65928)
독립 DS 프리미티브 — 상태 안내 메시지 토스트.
Props (Figma 그대로 — 3개 모두 노출):
- data-variant: "Normal" | "Positive" | "Cautionary" | "Negative"
- data-leading-icon: "true" | "false" (Normal에서만 의미)
- text: 외부 텍스트 내용
Variants:
- Normal (310:65929): optional leading icon + text
- Positive (310:65938): CircleCheck #2BA66D + filler + text
- Cautionary (310:65949): TriangleExclamation #F3B83C + filler + text
- Negative (310:65960): CircleExclamation #E94848 + filler + text
외곽: w-[335px] max-w-[420px] px-[16px] py-[11px] rounded-[12px] overflow-clip flex gap-[12px] items-start
배경: backdrop-blur(32px) + #061F41 (Primary/Navy)
텍스트: Pretendard Variable Bold 15 / 1.467 / 0.144px / white
============================================================ */
.bg-toast {
position: relative;
display: flex;
gap: 12px;
align-items: flex-start;
width: 335px;
max-width: 420px;
flex-shrink: 0; /* 쇼케이스 preview 컨테이너 flex layout에서 폭 축소 방지 */
padding: 11px 16px;
border-radius: 12px;
overflow: clip;
isolation: isolate;
box-sizing: border-box;
}
/* Background — backdrop-blur(32) + #061F41 Primary/Navy. absolute fill. */
.bg-toast__bg {
position: absolute;
inset: 0;
z-index: 0;
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
background: #061F41; /* Primary/Navy */
pointer-events: none;
}
/* Container — flex items-center min-h-32 flex-1 */
.bg-toast__container {
position: relative;
z-index: 1;
display: flex;
align-items: center;
flex: 1 0 0;
min-height: 32px;
min-width: 0;
gap: 8px;
}
/* Icon (leading or status). 22x22 wrapping container.
Toast는 Icons/Icons 컴포넌트(.bg-icon) 인스턴스를 자식으로 가짐 — raw SVG 직접 삽입 X. */
.bg-toast__icon {
position: relative;
display: inline-flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
flex-shrink: 0;
}
/* 내부 .bg-icon 인스턴스: Toast의 22×22 박스에 맞춤 (.bg-icon 기본 height: 24 override) */
.bg-toast__icon > .bg-icon {
position: relative;
z-index: 1;
height: 100%;
width: 100%;
}
.bg-toast__icon > .bg-icon > svg {
width: 100%; height: 100%;
display: block;
}
/* Status icon filler — white circle inset-1/4 (forms 50% sized circle in center) behind icon */
.bg-toast__icon-filler {
position: absolute;
inset: 25%; /* 1/4 of 22 = 5.5; inset:25% on all sides → center 50% × 50% = 11×11 circle */
border-radius: 100px;
background: #FFFFFF;
z-index: 0;
}
/* Status variant icon colors (currentColor on SVG path) */
.bg-toast[data-variant="Positive"] .bg-toast__icon { color: #2BA66D; }
.bg-toast[data-variant="Cautionary"] .bg-toast__icon { color: #F3B83C; }
.bg-toast[data-variant="Negative"] .bg-toast__icon { color: #E94848; }
/* Normal leading icon color — white (Static/White) */
.bg-toast[data-variant="Normal"] .bg-toast__icon { color: #FFFFFF; }
/* Normal + leadingIcon=false → hide icon (no gap leftover since gap is on .__container) */
.bg-toast[data-variant="Normal"][data-leading-icon="false"] .bg-toast__icon { display: none; }
/* Message — Pretendard Variable Bold 15 / 1.467 / 0.144px / white */
.bg-toast__message {
flex: 1 0 0;
min-width: 0;
padding: 5px 2px; /* py-5 px-2 per Figma */
display: flex;
flex-direction: column;
justify-content: center;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
font-weight: 700; /* Bold */
font-size: 15px;
line-height: 1.467;
letter-spacing: 0.144px;
color: #FFFFFF;
word-break: break-word;
}
/* ============================================================
SNACKBAR ← Figma: Snackbar/Snackbar (310:65971)
독립 DS 프리미티브 — 메시지 + 액션 안내.
Props (Figma 7개 그대로):
- data-variant: "Normal"
- data-leading-icon: boolean
- data-heading: boolean
- data-description: boolean
- data-close-button: boolean
- text (heading 텍스트)
- text1 (description 텍스트)
합성: Icons/Icons (leading + close) · Button/Text (action)
외곽: w-[335px] max-w-[420px] px-[16px] py-[11px] rounded-[12px] gap-[32px] items-start overflow-clip
배경: backdrop-blur(32px) + #061F41 Primary/Navy
============================================================ */
.bg-snackbar {
position: relative;
display: flex;
gap: 32px;
align-items: flex-start;
width: 335px;
max-width: 420px;
flex-shrink: 0;
padding: 11px 16px;
border-radius: 12px;
overflow: clip;
isolation: isolate;
box-sizing: border-box;
}
/* Background — backdrop-blur + Primary/Navy */
.bg-snackbar__bg {
position: absolute;
inset: 0;
z-index: 0;
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
background: #061F41;
pointer-events: none;
}
/* Container — flex flex-1 gap-12 items-center min-h-32 */
.bg-snackbar__container {
position: relative;
z-index: 1;
display: flex;
align-items: center;
gap: 12px;
flex: 1 0 0;
min-height: 32px;
min-width: 0;
}
/* Content (left part: leading icon + message) — flex gap-8 items-center */
.bg-snackbar__content {
display: flex;
align-items: center;
gap: 8px;
flex: 1 0 0;
min-width: 0;
}
/* Leading Icon — Figma h-full max-h-[40px] + inner 22 */
.bg-snackbar__icon {
display: flex;
align-items: center;
height: 100%;
max-height: 40px;
flex-shrink: 0;
}
.bg-snackbar__icon > .bg-icon {
width: 22px; height: 22px;
}
/* 아이콘 색 — Figma 310:65971: leading / close 아이콘 fill = Static/White.
Snackbar 는 variant=Normal 만 있으므로 상태색 없이 흰색 고정. (아이콘 path 는 fill=currentColor) */
.bg-snackbar__icon,
.bg-snackbar__close-icon {
color: var(--semantic-static-white);
}
.bg-snackbar__icon > .bg-icon > svg {
width: 100%; height: 100%; display: block;
}
/* Hide leading icon when not enabled */
.bg-snackbar[data-leading-icon="false"] .bg-snackbar__icon { display: none; }
/* Message — flex-col items-start justify-center px-2 py-5 */
.bg-snackbar__message {
flex: 1 0 0;
min-width: 0;
padding: 5px 2px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
color: #FFFFFF;
}
/* Heading — Pretendard Variable Bold 15 / 1.467 / 0.144px / white */
.bg-snackbar__heading {
margin: 0; /* 브라우저 기본 margin 리셋 — Figma 명세에 없음 */
font-family: 'Pretendard Variable', -apple-system, sans-serif;
font-weight: 700;
font-size: 15px;
line-height: 1.467;
letter-spacing: 0.144px;
width: 100%;
word-break: break-word;
}
.bg-snackbar[data-heading="false"] .bg-snackbar__heading { display: none; }
/* Description — Pretendard Variable Regular 13 / 1.385 / 0.2522px / white opacity 0.88, SS10 tabular */
.bg-snackbar__description {
margin: 0; /* 브라우저 기본
margin 리셋 — Figma 명세에 없음 */
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-feature-settings: 'ss10' 1;
font-weight: 400;
font-size: 13px;
line-height: 1.385;
letter-spacing: 0.2522px;
opacity: 0.88;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.bg-snackbar[data-description="false"] .bg-snackbar__description { display: none; }
/* Action wrapper — px-2 flex justify-end shrink-0 */
.bg-snackbar__action {
display: flex;
align-items: center;
justify-content: flex-end;
padding: 0 2px;
flex-shrink: 0;
}
/* Snackbar context override for Button/Text — 15px Body 2 (Figma instance override) + white color */
.bg-snackbar__action .bg-text-button {
font-size: 15px;
font-weight: 700;
line-height: 1.467;
letter-spacing: 0.144px;
color: #FFFFFF;
--bt-int-color: #FFFFFF; /* hover overlay 흰색 (Figma 인터랙션) */
}
/* Close Button — p-2 outer, 20×20 inner */
.bg-snackbar__close {
display: flex;
flex-direction: column;
align-items: flex-start;
padding: 2px;
flex-shrink: 0;
background: transparent;
border: 0;
cursor: pointer;
}
.bg-snackbar__close-icon {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
flex-shrink: 0;
}
.bg-snackbar__close-icon > .bg-icon {
width: 100%; height: 100%;
opacity: 0.61; /* Figma inline opacity-[var(--opacity/61, 0.61)] */
}
.bg-snackbar__close-icon > .bg-icon > svg {
width: 100%; height: 100%; display: block;
}
/* Close button hover/active interaction overlay — inset -8 rounded-1000 bg-white opacity-0 */
.bg-snackbar__close-icon::before {
content: '';
position: absolute;
inset: -8px;
border-radius: 1000px;
background: #FFFFFF;
opacity: 0;
transition: opacity 0.15s;
pointer-events: none;
}
/* Figma 310:65986 close Icon Button = Interaction/Light: 4% / 9% (결정 §4) */
.bg-snackbar__close:hover .bg-snackbar__close-icon::before { opacity: 0.04; }
.bg-snackbar__close:active .bg-snackbar__close-icon::before { opacity: 0.09; }
.bg-snackbar[data-close-button="false"] .bg-snackbar__close { display: none; }
/* ============================================================
ALERT / RESOURCE / TEXT ← Figma: Alert/Resource/Text (320:69412)
Props (Figma 그대로 — typo 'discription' 포함):
- data-text-align: "Left" | "Center"
- data-discription: "true" | "false"
Layout: flex flex-col items-start w-[245px], description=true시 gap-[12px]
Title: Title 3/Bold (24 / 1.334 / -2.3% / #131315 Label/Normal)
Description: Body 1/Normal-Regular (16 / 1.5 / 0.57% / #2D2D2F Label/Neutral)
============================================================ */
.bg-alert-text {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 245px;
}
.bg-alert-text[data-discription="true"] { gap: 8px; } /* Figma 신규: 12 → 8 */
.bg-alert-text[data-text-align="Center"] { text-align: center; }
.bg-alert-text[data-text-align="Left"] { text-align: left; }
/* Title — Headline 1/Bold (18 / 1.445 / -2% / #131315) */
.bg-alert-text__title {
margin: 0;
width: 100%;
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 700;
font-size: 18px; /* Figma 신규: 24 → 18 */
line-height: 1.445; /* Figma 신규: 1.334 → 1.445 */
letter-spacing: -0.36px; /* Figma 신규: 18 × -2% */
color: #131315; /* Label/Normal */
}
/* Description — Label 1/Normal-Medium (14 / 1.429 / 1.45% / Label/Neutral) */
.bg-alert-text__description {
margin: 0;
width: 100%;
font-family: 'Pretendard Variable', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
font-weight: 500; /* Figma 신규: 400 → 500 (Medium) */
font-size: 14px; /* Figma 신규: 16 → 14 */
line-height: 1.429; /* Figma 신규: 1.5 → 1.429 */
letter-spacing: 0.203px; /* Figma 신규: 14 × 1.45% */
color: rgba(45, 45, 47, 0.88); /* Label/Neutral */
}
.bg-alert-text[data-discription="false"] .bg-alert-text__description { display: none; }
/* ============================================================
ALERT / RESOURCE / CONTENTS ← Figma: Alert/Resource/Contents (320:69461)
Props: data-contents = "Image" | "Icon"
Image variant (320:69459): 385×158 placeholder bg #e5e5e5 rounded-12
Icon variant (320:69460): pill 96×96 (auto, p-20 r-60), bg #ffea9f 기본 — 상황별 변경 가능
내부: Icons/Icons 56×56 인스턴스 (default Blank)
============================================================ */
.bg-alert-contents {
position: relative;
flex-shrink: 0;
}
/* Image variant — 385×158 placeholder */
.bg-alert-contents[data-contents="Image"] {
/* span 루트는 기본 inline 이라 width/height 가 먹지 않음 — Alert 밖(단독)에서도 크기가 나오도록 block */
display: block;
width: 385px;
height: 158px;
}
.bg-alert-contents__image {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
background: #e5e5e5;
border-radius: 12px;
}
.bg-alert-contents[data-contents="Icon"] .bg-alert-contents__image { display: none; }
/* Icon variant — pill 96×96 (96 = 56 icon + 20×2 padding), bg user-customizable (#ffea9f default) */
.bg-alert-contents[data-contents="Icon"] {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 20px;
border-radius: 60px;
overflow: clip;
/* 사용자가 inline style 또는 var override로 변경: --bg-alert-contents-icon-bg */
background: var(--bg-alert-contents-icon-bg, #ffea9f);
}
.bg-alert-contents__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
flex-shrink: 0;
}
.bg-alert-contents__icon > .bg-icon {
width: 100%;
height: 100%;
}
.bg-alert-contents__icon > .bg-icon > svg {
width: 100%; height: 100%; display: block;
}
.bg-alert-contents[data-contents="Image"] .bg-alert-contents__icon { display: none; }
/* ============================================================
ALERT / RESOURCE / ACTION ← Figma: Alert/Resource/Action (317:69026)
Props (Figma 그대로):
- data-sub-action: boolean — when true, 보조 Button/Text 가장 왼쪽
- data-alternative-action: boolean — when true, 대체 Button/Button outlined 가운데
Always-present: 메인 Button/Button solid/primary/**medium** (px-20 py-9 → 40 tall, Figma 320:69495) 가장 오른쪽
Layout: flex gap-[10px] items-center w-[206px], 각 자식 flex-1
============================================================ */
.bg-alert-action {
display: flex;
gap: 10px;
align-items: center;
width: 206px;
}
.bg-alert-action > * {
flex: 1 0 0;
min-width: 0;
}
/* Default: sub/alternative 숨김 */
.bg-alert-action[data-sub-action="false"] .bg-alert-action__sub { display: none; }
.bg-alert-action[data-alternative-action="false"] .bg-alert-action__alternative { display: none; }
/* Sub action wrapper — Button/Text는 본인 padding(py-4)을 가지므로 wrapper는 flex-center만 */
.bg-alert-action__sub {
display: flex;
align-items: center;
justify-content: center;
}
/* Alternative/Main action wrappers — Button/Button을 flex-1로 늘려 동일 너비 */
.bg-alert-action__alternative,
.bg-alert-action__main {
display: flex;
align-items: stretch;
}
.bg-alert-action__alternative > .bg-button,
.bg-alert-action__main > .bg-button {
flex: 1 0 0;
min-width: 0;
}
/* ============================================================
ALERT ← Figma: Alert (320:69490)
Props (Figma 그대로):
- data-contents: boolean (Alert/Resource/Contents 포함 여부)
- data-checkbox: boolean (Control/Checkbox 포함 여부)
Layout: flex flex-col gap-[40px] items-center p-[40px] rounded-[var(--radius-4xl,24px)]
bg #FFFFFF + border + drop-shadow + min-w-[360px]
Width 규칙 (Figma 320:69490 변형 프레임 측정값 — p-32 + min-w-360 hug):
contents=false, checkbox=false → 360 (320:69891)
contents=false, checkbox=true → 360 (320:69491)
contents=true → 449 (320:69465 / 320:69886 — Image 385 + 32×2)
자식 구성:
contents=true → Alert/Resource/Contents
항상 → Alert/Resource/Text
checkbox=true → Control/Checkbox (.bg-control-item or inline)
항상 → Alert/Resource/Action
============================================================ */
.bg-alert {
display: flex;
flex-direction: column;
gap: 20px; /* Figma 신규: 40 → 20 */
align-items: center;
padding: 32px; /* Figma 신규: 40 → 32 */
min-width: 360px;
flex-shrink: 0; /* 쇼케이스 preview 컨테이너의 flex layout에서 너비 축소 방지 */
background: #FFFFFF; /* Static/White */
border: 0;
border-radius: var(--radius-4xl, 24px);
/* inside stroke (Figma) — Line/Normal/Normal inset + Shadow/Spread/Small */
box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22), 0 0 60px 0 rgba(19, 19, 21, 0.10);
box-sizing: border-box;
}
/* Figma 검수 (2026-09-18): 465 는 p-40 시절 잔존값 → Figma 320:69491 = 360, 320:69465/69886 = 449 */
.bg-alert[data-contents="false"][data-checkbox="false"] { width: 360px; }
.bg-alert[data-contents="false"][data-checkbox="true"] { width: 360px; }
.bg-alert[data-contents="true"] { width: 449px; }
/* Alert 내 Text/Action 폭은 부모 따라 (w-full) */
.bg-alert > .bg-alert-text { width: 100%; }
.bg-alert > .bg-alert-action { width: 100%; }
/* Alert 내부의 Action은 Figma 인스턴스에서 gap-4 (canonical Resource는 gap-10) */
.bg-alert > .bg-alert-action { gap: 4px; }
/* Hide Contents/Checkbox when not enabled */
.bg-alert[data-contents="false"] > .bg-alert-contents { display: none; }
.bg-alert[data-checkbox="false"] > .bg-control-item { display: none; }
/* Alert 컨텍스트에서 Control/Checkbox 인스턴스 — gap-8 (Figma 명세 320:69494)
contents=true: w-full (라벨 좌측 정렬), contents=false: hug-content (중앙 정렬) */
.bg-alert > .bg-control-item {
display: flex;
gap: 8px;
align-items: flex-start;
}
.bg-alert[data-contents="true"] > .bg-control-item {
width: 100%; /* Figma isContentsAndCheckbox: w-full */
}
.bg-alert[data-contents="true"] > .bg-control-item .bg-control-item__label {
flex: 1 0 0;
min-width: 0;
}
.bg-alert[data-contents="false"] > .bg-control-item .bg-control-item__label {
flex: 0 0 auto; /* hug content */
white-space: nowrap;
}
/* ============================================================
MENU / MENU — Figma 224:50915
드랍다운 메뉴 컴포넌트. Cell들을 감싸는 dropdown panel.
Props: variant (Normal/Radio/Checkbox) × cellPadding (8|12) = 6 variants
+ actionArea (boolean) + scrollBar (boolean)
Layout:
Menu (w-320, h-416, py-8 outer)
└─ Container (#FFFFFF, border-#EAEBEC, radius-16, shadow, max-h-400, flex-1 flex-col overflow-clip)
├─ Content (px-20 py-8, flex-1, overflow)
│ ├─ [optional Scrollbar absolute right]
│ └─ Contents (flex-col gap-4)
│ └─ Cell (Menu/Resource/Item/Cell × N — uses .bg-menu-resource-cell)
└─ [optional Action Area] (border-top, p-12, gap-24)
============================================================ */
.bg-menu {
display: flex;
flex-direction: column;
align-items: flex-start;
min-width: 140px;
width: 320px;
padding: 8px 0;
box-sizing: border-box;
position: relative;
flex-shrink: 0; /* 쇼케이스 preview의 flex 레이아웃에서 폭 축소 방지 */
}
.bg-menu__container {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
max-height: 400px;
overflow: hidden;
box-sizing: border-box;
background: #FFFFFF; /* Background/Elevated/Normal */
border: 0; /* stroke 는 ::after overlay (자식 배경이 가장자리를 덮으므로) */
border-radius: 16px;
box-shadow:
0px 2px 4px -2px rgba(23, 23, 23, 0.06),
0px 4px 6px -1px rgba(23, 23, 23, 0.06); /* Shadow/Normal/Small */
position: relative;
flex-shrink: 0; /* content 기준 auto-grow */
}
.bg-menu__container::after {
/* inside stroke (Figma) — Line/Solid/Neutral */
content: '';
position: absolute;
inset: 0;
border-radius: inherit;
box-shadow: inset 0 0 0 1px #EAEBEC;
pointer-events: none;
z-index: 3;
}
.bg-menu__content {
display: flex;
flex-direction: column;
align-items: flex-start;
width: 100%;
padding: 8px 20px;
box-sizing: border-box;
position: relative;
overflow-y: auto;
flex: 1 1 auto; /* content 기준 sizing, container max-h 도달 시 overflow auto */
}
.bg-menu__contents {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
width: 100%;
flex-shrink: 0;
}
/* Scrollbar (optional decoration — Figma 159:12426) */
.bg-menu__scrollbar {
position: absolute;
top: 8px; bottom: 8px; right: 3px;
display: flex; align-items: center; justify-content: center;
padding: 3px;
pointer-events: none;
}
.bg-menu__scrollbar-track {
width: 3px; height: 100%;
display: flex; align-items: center; justify-content: center;
position: relative;
}
.bg-menu__scrollbar-thumb {
position: absolute;
top: 0; bottom: 75%; left: 0; right: 0; /* Figma bottom-3/4 */
border-radius: 1000px;
background: rgba(112, 115, 124, 0.16); /* Fill/Strong */
overflow: hidden;
}
.bg-menu[data-scrollbar="false"] .bg-menu__scrollbar { display: none; }
/* Search (Figma Menu/Resource/Search 1134:3317 · Menu 속성 Search=True) — 목록 위 검색창
padding 12 · 아래 구분선 1px Line/Normal/Alternative(레이아웃 포함) · Textfield Medium + 검색 아이콘(brgOrange/300 override) */
.bg-menu__search {
display: flex;
align-items: center;
width: 100%;
box-sizing: border-box;
padding: 12px;
background: var(--semantic-bg-elevated-normal);
border-bottom: 1px solid var(--semantic-line-normal-alt);
flex-shrink: 0;
}
.bg-menu__search > .bg-textinput { flex: 1; min-width: 0; max-width: none; }
.bg-menu__search .bg-textfield__icon { color: var(--semantic-primary-orange); }
/* Action Area footer */
.bg-menu__action-area {
display: flex;
align-items: center;
gap: 24px;
padding: 12px;
width: 100%;
flex-shrink: 0;
background: #FFFFFF;
box-shadow: inset 0 1px 0 rgba(112, 115, 124, 0.08); /* Line/Normal/Alternative — inside stroke (Figma) */
box-sizing: border-box;
}
.bg-menu[data-action-area="false"] .bg-menu__action-area { display: none; }
.bg-menu__action-leading {
display: flex;
flex: 1 0 0;
align-items: center;
min-width: 0;
position: relative;
}
.bg-menu__action-trailing {
display: flex;
align-items: center;
flex-shrink: 0;
position: relative;
}
/* ============================================================
MENU / RESOURCE / ITEM / CELL — Figma 224:51012
Foundation: 기존 .bg-list-cell molecule을 그대로 사용 (동기화).
.bg-menu-resource-cell는 modifier 클래스로 동작 — Menu-specific override만 추가.
Markup:
· ListCell 표준 attr: data-vpadding (none/small/medium/large), data-valign,
data-fill-width, data-text-ellipsis, data-selected, data-divider, data-disabled, data-interaction
· Menu Cell 본인 attr: data-menu-variant (normal/checkbox/radio), data-active,
data-interaction-state (per-cell hover/pressed/focused)
Menu Cell 본인 5 props 매핑:
· Variant → data-menu-variant (Checkbox/Radio일 때 .bg-list-cell__leading에 control 합성)
· VerticalPadding (8/12) → data-vpadding (small/medium)
· Active → text orange + Medium for Normal variant / leading control state for Checkbox/Radio
· Caption → ListCell의 .bg-list-cell__description 노출
· Disable → data-disabled (ListCell 표준)
============================================================ */
/* 1) Menu Cell context: ListCell의 selected ::before 배경 overlay 제거.
Figma Menu Cell 명세에서 Selected는 텍스트 색상만 변경, 배경 tint 없음. */
.bg-menu-resource-cell[data-selected="true"]::before {
opacity: 0 !important;
}
/* 2) Selected: 텍스트 orange + Medium (Figma List Cell Selected 명세, 체크 아이콘 자동 노출은 Menu 컨텍스트에서 제거) */
.bg-menu-resource-cell[data-selected="true"] .bg-list-cell__label {
color: #FF6121;
font-weight: 500;
}
/* 3) Active for Variant=Normal: text orange + Medium */
.bg-menu-resource-cell[data-menu-variant="normal"][data-active="true"] .bg-list-cell__label {
color: #FF6121;
font-weight: 500;
}
/* 4) Disable + !Active + Variant=Normal: label color alternative (ListCell의 opacity 0.43과 함께 적용) */
.bg-menu-resource-cell[data-menu-variant="normal"][data-disabled="true"]:not([data-active="true"]) .bg-list-cell__label {
color: rgba(55, 56, 60, 0.61);
}
/* 5) Cell Interaction state per-cell (단일 셀에 hover/press/focus 시뮬레이션) */
.bg-menu-resource-cell[data-interaction-state="hovered"]::before,
.bg-menu-resource-cell[data-interaction-state="pressed"]::before,
.bg-menu-resource-cell[data-interaction-state="focused"]::before {
opacity: 1 !important;
}
/* 6) Menu context: Checkbox/Radio Resource border color override (Line/Normal/Normal #70737C) */
.bg-menu-resource-cell .bg-control-item__checkbox-box,
.bg-menu-resource-cell .bg-control-item__radio-box {
border-color: rgba(112, 115, 124, 0.22);
}
/* 7) Variant=Checkbox/Radio leading control wrapper: Figma pr-2 spacing inside leading slot */
.bg-menu-resource-cell[data-menu-variant="checkbox"] .bg-list-cell__leading > .bg-control-item,
.bg-menu-resource-cell[data-menu-variant="radio"] .bg-list-cell__leading > .bg-control-item {
padding-right: 2px;
}
/* 8) Figma 224:50932 Radio cell: Wrapper pr-2 > Radio py-2 > Box 20 → control 20×24 → cell 40 (py-8) */
.bg-menu-resource-cell[data-menu-variant="radio"] .bg-list-cell__leading > .bg-control-item .bg-control-item__control {
padding: 2px 0;
}
/* ============================================================
MENU / RESOURCE — Figma 347:* / 348:*
드랍다운 열렸을 때 노출되는 Menu 컴포넌트의 합성 부속 컴포넌트들.
Foundation only — 쇼케이스/nav에 노출하지 않음. Menu 컴포넌트 빌드 시 사용.
구성:
- Item/Title (348:10749): section title 행 (280×24, py-4 px-px)
- Action Area / Leading Content / {Icon|Checkbox|Badge|Button|Icon Button}
- Action Area / Trailing Content / {Badge|Button}
각 Resource는 외부 padding wrapper + 내부 합성 DS 컴포넌트(.bg-icon / .bg-control-item /
.bg-content-badge / .bg-text-button / .bg-button / .bg-button-icon) 인스턴스로 구성.
============================================================ */
/* 1. Menu/Resource/Item/Title (348:10749) — 280×24 section title */
.bg-menu-resource-title {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
width: 280px;
padding: 4px 1px; /* py-4 px-px */
box-sizing: border-box;
}
.bg-menu-resource-title__row {
display: flex;
align-items: center;
width: 100%;
}
.bg-menu-resource-title__text {
margin: 0;
flex: 1 0 0;
min-width: 0;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
font-weight: 400;
font-size: 12px;
line-height: 1.334;
letter-spacing: 0.3024px;
color: rgba(55, 56, 60, 0.61); /* Label/Alternative */
font-feature-settings: 'ss10' 1;
}
/* 2-8. Menu/Resource/Action Area/{Leading|Trailing} Content/{...} — slot wrappers */
.bg-menu-resource-leading,
.bg-menu-resource-trailing {
display: flex;
align-items: center;
position: relative;
flex-shrink: 0;
}
/* ===== Leading variants ===== */
/* 2. Leading/Icon (348:10737) — pl-6 + 24×24 icon */
.bg-menu-resource-leading[data-content="icon"] {
padding-left: 6px;
}
.bg-menu-resource-leading[data-content="icon"] > .bg-icon {
width: 24px; height: 24px;
}
/* 3. Leading/Checkbox (348:10915) — pl-8 + Checkbox/Resource/Control(tight) w-72 wrapper */
.bg-menu-resource-leading[data-content="checkbox"] {
padding-left: 8px;
}
.bg-menu-resource-leading[data-content="checkbox"] > .bg-control-item {
width: 72px;
gap: 10px;
align-items: flex-start;
}
/* 4. Leading/Badge (347:10532) — pl-6 + Content Badge w-42 */
.bg-menu-resource-leading[data-content="badge"] {
padding-left: 6px;
}
.bg-menu-resource-leading[data-content="badge"] > .bg-content-badge {
width: 42px;
}
/* 5. Leading/Button (224:51117) — pl-8 + Button/Text inst (w-37, py-4, 14 SemiBold Label/Alt) */
.bg-menu-resource-leading[data-content="button"] {
padding-left: 8px;
}
.bg-menu-resource-leading[data-content="button"] > .bg-text-button {
width: 37px;
padding: 4px 0;
font-size: 14px;
font-weight: 600; /* SemiBold (Label 1/Normal-Bold) */
line-height: 1.429;
letter-spacing: 0;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
}
/* 6. Leading/Icon Button (347:10642) — Outlined 32×32, border + p-7 + radius-8 + Icon 18 */
.bg-menu-resource-leading[data-content="icon-button"] > .bg-button-icon {
border: 0;
box-shadow: inset 0 0 0 1px rgba(112, 115, 124, 0.16); /* Line/Normal/Neutral — inside stroke (Figma) */
background: transparent;
padding: 7px;
border-radius: 8px;
box-sizing: border-box;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.bg-menu-resource-leading[data-content="icon-button"] > .bg-button-icon > .bg-icon {
width: 18px; height: 18px;
}
/* ===== Trailing variants ===== */
/* 7. Trailing/Badge (347:10605) — pr-6 + Content Badge w-42 (items-end) */
.bg-menu-resource-trailing[data-content="badge"] {
padding-right: 6px;
justify-content: flex-end;
}
.bg-menu-resource-trailing[data-content="badge"] > .bg-content-badge {
width: 42px;
}
/* 8. Trailing/Button (224:51135) — bg #FF6121 + px-14 py-7 + radius-8, 13 Regular white */
.bg-menu-resource-trailing[data-content="button"] > .bg-button {
background: #FF6121; /* Primary/Orange */
padding: 7px 14px;
border-radius: 8px;
color: #FFFFFF; /* Static/White */
font-size: 13px;
font-weight: 400;
line-height: 1.385;
letter-spacing: 0.2522px;
font-feature-settings: 'ss10' 1;
}
/* ============================================================
SELECT / SELECT ← Figma: Select/Select (140:5166)
드롭다운 선택 컴포넌트. 7 props:
- size: Medium / Small
- render: Text / Chip
- negative: false / true (error state)
- active: false / true (has value)
- focus: false / true (focused, chevron up)
- disable: false / true
- overflow: false / true (chips overflow with fade mask)
추가 props: heading (label + required), description (text/error), leadingContent, menu
Layout (Medium):
.bg-select (col gap-8 w-335)
├─ Heading (heading=true): label 14/SemiBold + Required*
├─ Input → Container (p-12 r-12)
│ ├─ Background absolute: bg Static/White (2026-10-23, 이전 #FFFFFF14 + blur) · Disable 은 Fill/Alternative
│ ├─ Border absolute: 1px Line/Normal/Neutral (Focus=orange, Negative=red @28%, Disable=Alternative)
│ └─ Content (gap-8 min-h-24)
│ ├─ Leading Content (leadingContent=true): icon 22
│ ├─ Text (Render=Text) OR Chips (Render=Chip)
│ ├─ [Negative=true] Circle Exclamation 22 (red)
│ └─ Chevron 16×16 (Focus=true → up, else down)
└─ Description (description=true): 12 Regular Label/Alt (Negative=true → red, error text)
Small variant: heading 12, container px-8 py-4 r-8, text 12 Caption 1
============================================================ */
.bg-select {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 8px;
width: 335px;
position: relative;
box-sizing: border-box;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-select__heading {
display: flex;
gap: 4px;
align-items: center;
width: 100%;
flex-shrink: 0;
}
.bg-select__label {
margin: 0;
flex-shrink: 0;
font-weight: 600; /* SemiBold (Label 1/Normal-Bold) */
font-size: 14px;
line-height: 1.429;
letter-spacing: 0;
color: rgba(46, 47, 51, 0.88); /* Label/Neutral */
white-space: nowrap;
}
.bg-select[data-size="small"] .bg-select__label {
font-size: 12px;
line-height: 1.334;
letter-spacing: 0.3024px; /* Caption 1/Bold */
}
.bg-select__required {
margin: 0;
flex-shrink: 0;
font-weight: 500;
font-size: 14px;
line-height: 1.429;
letter-spacing: 0.203px;
color: #FF4242; /* Status/Negative */
font-feature-settings: 'ss10' 1;
}
/* Input row */
.bg-select__input {
display: flex;
align-items: center;
width: 100%;
flex-shrink: 0;
position: relative;
}
.bg-select__container {
flex: 1 0 0;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
min-width: 0;
padding: 12px;
border-radius: 12px;
position: relative;
box-sizing: border-box;
}
.bg-select[data-size="small"] .bg-select__container {
padding: 4px 8px;
border-radius: 8px;
gap: 12px;
}
/* Background — transparent + backdrop blur (iOS Materials/Chrome) */
.bg-select__bg {
position: absolute;
inset: 0;
background: var(--semantic-static-white); /* 2026-10-23 Figma Select/Resource/Background: Static/White */
border-radius: inherit;
pointer-events: none;
}
/* Disable: bg → Fill/Alternative (solid), no backdrop blur */
.bg-select[data-disable="true"] .bg-select__bg {
background: rgba(112, 115, 124, 0.05); /* Fill/Alternative */
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* Border + shadow layer */
.bg-select__border {
position: absolute;
inset: 0;
border: 1px solid rgba(112, 115, 124, 0.16); /* Line/Normal/Neutral */
border-radius: inherit;
pointer-events: none;
box-sizing: border-box;
}
/* Disable: lighter border + drop shadow */
.bg-select[data-disable="true"] .bg-select__border {
border-color: rgba(112, 115, 124, 0.08); /* Line/Normal/Alternative */
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
}
/* Focus: brgorange/300 @43% 2px (Figma I140:5240;140:7308) — __border 는 absolute overlay 라 높이 48/32 유지 */
.bg-select[data-focus="true"]:not([data-disable="true"]) .bg-select__border {
border-color: rgba(255, 97, 33, 0.43);
border-width: 2px;
}
/* Negative: red border @28% */
.bg-select[data-negative="true"]:not([data-focus="true"]):not([data-disable="true"]) .bg-select__border {
border-color: rgba(255, 66, 66, 0.28); /* Status/Negative @ Opacity/28 */
}
/* Negative + Focus: red border full */
.bg-select[data-negative="true"][data-focus="true"]:not([data-disable="true"]) .bg-select__border {
border-color: #FF4242;
border-width: 1.5px;
}
/* Content (text + icons row) */
.bg-select__content {
flex: 1 0 0;
display: flex;
gap: 8px;
align-items: flex-start;
min-width: 0;
min-height: 24px;
position: relative;
z-index: 1;
}
.bg-select[data-size="small"] .bg-select__content {
align-items: center;
height: 24px;
}
/* Leading content (icon slot) */
.bg-select__leading {
display: flex;
align-items: center;
justify-content: center;
max-height: 24px;
padding: 1px;
overflow: hidden;
flex-shrink: 0;
}
.bg-select__leading > * {
width: 22px;
height: 22px;
display: inline-flex;
align-items: center;
justify-content: center;
color: #131315;
}
.bg-select[data-leading-content="false"] .bg-select__leading { display: none; }
/* Text slot (placeholder or value) */
.bg-select__text {
flex: 1 0 0;
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
padding: 0 4px;
}
.bg-select__text-content {
margin: 0;
flex: 1 0 0;
min-width: 0;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
letter-spacing: 0.0912px;
color: rgba(61, 61, 63, 0.28); /* Label/Assistive — placeholder */
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-feature-settings: 'ss10' 1;
}
.bg-select[data-size="small"] .bg-select__text-content {
font-weight: 500; /* Medium for Small */
font-size: 12px;
line-height: 1.334;
letter-spacing: 0.3024px;
}
/* Active=true: text → value color Label/Normal */
.bg-select[data-active="true"][data-render="text"] .bg-select__text-content {
color: #131315; /* Label/Normal */
}
/* Disable + Active: value 는 Label/Alternative (Figma 140:5419). placeholder 는 그대로 Label/Assistive */
.bg-select[data-disable="true"][data-active="true"][data-render="text"] .bg-select__text-content {
color: var(--semantic-label-alternative);
}
/* Chip container (Render=Chip + Active=true) */
.bg-select__chips {
flex: 1 0 0;
display: flex;
flex-direction: column;
gap: 10px;
align-items: flex-start;
min-width: 0;
position: relative;
}
.bg-select__chips-row {
display: flex;
gap: 4px;
height: 24px;
align-items: flex-start;
width: 100%;
flex-shrink: 0;
}
/* Overflow=true: fade mask on the right */
.bg-select[data-overflow="true"] .bg-select__chips-row {
-webkit-mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
mask-image: linear-gradient(to right, #000 calc(100% - 40px), transparent);
}
/* Single chip atom — Select/Resource/Chip */
.bg-select-chip {
display: inline-flex;
align-items: center;
flex-shrink: 0;
padding: 4px 7px;
border-radius: 6px; /* radius-sm */
background: rgba(112, 115, 124, 0.05); /* Fill/Alternative */
gap: 2px;
position: relative;
box-sizing: border-box;
}
.bg-select-chip__text {
margin: 0;
font-weight: 500; /* Medium (Caption 1/Medium) */
font-size: 12px;
line-height: 1.334;
letter-spacing: 0.3024px;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
white-space: nowrap;
font-feature-settings: 'ss10' 1;
}
.bg-select-chip__close {
display: inline-flex;
width: 12px; height: 12px;
align-items: center;
justify-content: center;
color: rgba(61, 61, 63, 0.61);
flex-shrink: 0;
}
.bg-select-chip__close svg { width: 100%; height: 100%; display: block; }
/* Negative icon — Circle Exclamation */
.bg-select__error-icon {
display: flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px; /* Figma 309:65791 p-px slot 24 → 아이콘 22 (border-box 라 22+1 padding 이면 svg 가 20 으로 줄어듦) */
padding: 1px;
flex-shrink: 0;
color: #FF4242; /* Status/Negative */
}
.bg-select__error-icon svg { width: 100%; height: 100%; display: block; }
.bg-select__error-icon > .bg-icon { width: 100%; height: 100%; }
.bg-select__error-icon > .bg-icon > svg { width: 100%; height: 100%; }
.bg-select:not([data-negative="true"]) .bg-select__error-icon { display: none; }
/* Chevron icon */
.bg-select__chevron {
display: flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
padding: 4px;
flex-shrink: 0;
color: var(--semantic-label-alternative); /* Figma 140:5479 Icon/Normal/Chevron Down = Label/Alternative */
box-sizing: border-box;
}
.bg-select[data-disable="true"] .bg-select__chevron { color: rgba(55, 56, 60, 0.16); }
.bg-select__chevron > svg { width: 16px; height: 16px; display: block; transition: transform 0.15s; }
.bg-select[data-focus="true"] .bg-select__chevron > svg { transform: rotate(180deg); }
/* Render switching: hide chips when Render=Text, hide text when Render=Chip + Active */
.bg-select[data-render="text"] .bg-select__chips { display: none; }
.bg-select[data-render="chip"][data-active="true"] .bg-select__text { display: none; }
.bg-select[data-render="chip"]:not([data-active="true"]) .bg-select__chips { display: none; }
/* Description (helper text) */
.bg-select__description {
margin: 0;
width: 100%;
flex-shrink: 0;
font-weight: 400;
font-size: 12px;
line-height: 1.334;
letter-spacing: 0.3024px;
color: rgba(55, 56, 60, 0.61); /* Label/Alternative */
font-feature-settings: 'ss10' 1;
}
.bg-select[data-description="false"] .bg-select__description { display: none; }
/* Negative + description: red text (error message) */
.bg-select[data-negative="true"] .bg-select__description { color: #FF4242; }
/* Disable: required asterisk faded */
.bg-select[data-disable="true"] .bg-select__required { opacity: 0.43; }
/* Menu (anchored dropdown) — Select 내부에서 input 바로 아래에 absolute positioning.
description 위에 z-index로 overlay되어 description을 밀어내지 않음.
Menu 폭은 Select 폭과 일치 (자체 width:320px 무시). */
.bg-select .bg-menu {
position: absolute;
top: 100%; /* input 바로 아래 */
left: 0;
right: 0;
width: 100%; /* Select 폭 매칭 (자체 320px override) */
min-width: 0;
padding-top: 8px; /* input과 menu 사이 간격 — Figma 140:5237 Menu wrapper py-[8px] */
padding-bottom: 0;
z-index: 10; /* description 위에 overlay */
}
/* ============================================================
TOOLTIP / TOOLTIP ← Figma: Tooltip/Tooltip (224:53652)
Props: size (Medium/Small) × position (Bottom/Top/Left/Right) = 8 variants
합성: Tooltip/Resource/{Medium|Small}/Arrow ({Bottom|Top|Left|Right})
Layout: flex-col (Bottom/Top) | flex-row (Left/Right)
Position 의미 — tooltip이 anchor에 대해 위치하는 방향:
Bottom → tooltip이 anchor 아래, arrow는 tooltip 윗변에서 위(▲)로 가리킴
Top → tooltip이 anchor 위, arrow는 아랫변에서 아래(▼)로
Left → tooltip이 anchor 왼쪽, arrow는 오른쪽 면에서 오른쪽(▶)으로
Right → tooltip이 anchor 오른쪽, arrow는 왼쪽 면에서 왼쪽(◀)으로
Body: bg #061F41 (Primary/Navy) + Opacity/5 overlay + backdrop-blur(32px) (iOS Materials/Chrome 64 → CSS half)
============================================================ */
.bg-tooltip {
display: inline-flex;
align-items: flex-start;
position: relative;
box-sizing: border-box;
}
.bg-tooltip__container {
display: inline-flex;
position: relative;
}
.bg-tooltip[data-position="bottom"] > .bg-tooltip__container,
.bg-tooltip[data-position="top"] > .bg-tooltip__container { flex-direction: column; align-items: flex-start; }
.bg-tooltip[data-position="left"] > .bg-tooltip__container,
.bg-tooltip[data-position="right"] > .bg-tooltip__container { flex-direction: row; align-items: stretch; }
/* Body — navy with overlay */
.bg-tooltip__body {
position: relative;
display: flex;
align-items: flex-start;
flex-shrink: 0;
overflow: hidden;
box-sizing: border-box;
}
/* Figma 224:53658 Background #061F41 + Container 224:53654 backdrop-blur-[32px] (iOS Materials/Chrome 64 → CSS half) */
.bg-tooltip__bg {
position: absolute; inset: 0;
background: #061F41;
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
pointer-events: none;
}
/* Figma 224:53659 Background overlay — _Status/Normal #EAF2FE, Opacity/5 (검수 2026-09-18: display:none → 표시) */
.bg-tooltip__overlay {
position: absolute; inset: 0;
background: #EAF2FE;
opacity: 0.05;
pointer-events: none;
}
.bg-tooltip[data-size="medium"] .bg-tooltip__body {
min-width: 64px;
padding: 8px 12px;
border-radius: 8px;
gap: 10px;
}
.bg-tooltip[data-size="small"] .bg-tooltip__body {
min-width: 36px;
padding: 5px 8px;
border-radius: 6px;
gap: 4px;
}
/* Content (text wrapper) */
.bg-tooltip__content {
display: inline-flex;
align-items: flex-start;
position: relative;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
font-weight: 500; /* Medium weight */
font-feature-settings: 'ss10' 1;
}
.bg-tooltip[data-size="medium"] .bg-tooltip__content {
gap: 6px; max-width: 256px;
font-size: 14px; line-height: 1.429; letter-spacing: 0.203px;
}
.bg-tooltip[data-size="small"] .bg-tooltip__content {
gap: 2px; max-width: 264px;
font-size: 11px; line-height: 1.273; letter-spacing: 0.3421px;
}
.bg-tooltip__label {
margin: 0; flex: 1 0 0; min-width: 0;
color: #F6F6F6; /* Inverse/Label */
}
.bg-tooltip__shortcut {
margin: 0; flex-shrink: 0; opacity: 0.61; color: #F6F6F6;
white-space: nowrap;
}
/* Arrow track — Figma 명세: items-start (LEFT or TOP) + justify-center, padding으로 anchor 측 spacing */
.bg-tooltip__arrow {
display: flex; flex-shrink: 0;
position: relative;
}
/* Bottom/Top: flex-col, w-full, h-fixed; arrow tip을 LEFT(items-start) + 세로 center */
.bg-tooltip[data-position="bottom"] .bg-tooltip__arrow,
.bg-tooltip[data-position="top"] .bg-tooltip__arrow {
flex-direction: column;
align-items: flex-start; /* horizontal LEFT alignment */
justify-content: center; /* vertical center */
width: 100%;
}
/* Left/Right: flex-row, h-self-stretch, w-fixed; arrow tip을 TOP(items-start)+padding으로 시각적 center */
.bg-tooltip[data-position="left"] .bg-tooltip__arrow,
.bg-tooltip[data-position="right"] .bg-tooltip__arrow {
flex-direction: row;
align-items: flex-start; /* vertical TOP (combined with py padding → centered for single-line body) */
justify-content: center; /* horizontal center within fixed arrow track width */
align-self: stretch;
}
/* Track dimensions + padding (px-8/py-8 for Medium, px-5/py-5 for Small) */
.bg-tooltip[data-size="medium"][data-position="bottom"] .bg-tooltip__arrow,
.bg-tooltip[data-size="medium"][data-position="top"] .bg-tooltip__arrow { height: 8px; padding: 0 8px; }
.bg-tooltip[data-size="medium"][data-position="left"] .bg-tooltip__arrow,
.bg-tooltip[data-size="medium"][data-position="right"] .bg-tooltip__arrow { width: 8px; padding: 8px 0; }
.bg-tooltip[data-size="small"][data-position="bottom"] .bg-tooltip__arrow,
.bg-tooltip[data-size="small"][data-position="top"] .bg-tooltip__arrow { height: 6px; padding: 0 5px; }
.bg-tooltip[data-size="small"][data-position="left"] .bg-tooltip__arrow,
.bg-tooltip[data-size="small"][data-position="right"] .bg-tooltip__arrow { width: 6px; padding: 5px 0; }
/* Arrow tip wrapper — 정확한 Figma Arrow Tip 박스 크기 */
.bg-tooltip__arrow-tip {
display: flex;
color: #061F41; /* navy fill via currentColor on svg */
position: relative;
}
.bg-tooltip[data-size="medium"][data-position="bottom"] .bg-tooltip__arrow-tip,
.bg-tooltip[data-size="medium"][data-position="top"] .bg-tooltip__arrow-tip { width: 20px; height: 8px; }
.bg-tooltip[data-size="medium"][data-position="left"] .bg-tooltip__arrow-tip,
.bg-tooltip[data-size="medium"][data-position="right"] .bg-tooltip__arrow-tip { width: 8px; height: 20px; }
.bg-tooltip[data-size="small"][data-position="bottom"] .bg-tooltip__arrow-tip,
.bg-tooltip[data-size="small"][data-position="top"] .bg-tooltip__arrow-tip { width: 14px; height: 6px; }
.bg-tooltip[data-size="small"][data-position="left"] .bg-tooltip__arrow-tip,
.bg-tooltip[data-size="small"][data-position="right"] .bg-tooltip__arrow-tip { width: 6px; height: 14px; }
/* Arrow tip 내부 svg는 Figma 명세에 따라 box 안에서 정확히 위치 */
.bg-tooltip__arrow-tip svg { display: block; }
/* Anchor svg to side closest to tooltip body (anti-anchor side has subtle gap) */
.bg-tooltip[data-position="bottom"] .bg-tooltip__arrow-tip { align-items: flex-end; justify-content: center; }
.bg-tooltip[data-position="top"] .bg-tooltip__arrow-tip { align-items: flex-start; justify-content: center; }
/* Position=Left: tooltip이 anchor 왼쪽 → body는 왼쪽, arrow ▶는 body 오른쪽 면.
SVG는 arrow box의 LEFT (body 닿는 면)에 anchor → ▶의 BASE가 body에 닿고 TIP은 오른쪽으로 확장 */
.bg-tooltip[data-position="left"] .bg-tooltip__arrow-tip { align-items: center; justify-content: flex-start; }
/* Position=Right: tooltip이 anchor 오른쪽 → body는 오른쪽, arrow ◀는 body 왼쪽 면.
SVG는 arrow box의 RIGHT (body 닿는 면)에 anchor → ◀의 BASE가 body에 닿고 TIP은 왼쪽으로 확장 */
.bg-tooltip[data-position="right"] .bg-tooltip__arrow-tip { align-items: center; justify-content: flex-end; }
/* ============================================================
TOOLTIP / RESOURCE / ARROW ← Figma 224:53747 (Medium), 224:53782 (Small)
Position (Bottom/Top/Left/Right) — 단일 화살표 컴포넌트
============================================================ */
.bg-tooltip-arrow {
display: flex;
color: #061F41;
position: relative;
}
.bg-tooltip-arrow svg { display: block; }
.bg-tooltip-arrow[data-size="medium"][data-position="bottom"],
.bg-tooltip-arrow[data-size="medium"][data-position="top"] { width: 20px; height: 8px; }
.bg-tooltip-arrow[data-size="medium"][data-position="left"],
.bg-tooltip-arrow[data-size="medium"][data-position="right"] { width: 8px; height: 20px; }
.bg-tooltip-arrow[data-size="small"][data-position="bottom"],
.bg-tooltip-arrow[data-size="small"][data-position="top"] { width: 14px; height: 6px; }
.bg-tooltip-arrow[data-size="small"][data-position="left"],
.bg-tooltip-arrow[data-size="small"][data-position="right"] { width: 6px; height: 14px; }
.bg-tooltip-arrow[data-position="bottom"] { align-items: flex-end; justify-content: center; }
.bg-tooltip-arrow[data-position="top"] { align-items: flex-start; justify-content: center; }
.bg-tooltip-arrow[data-position="left"] { align-items: center; justify-content: flex-start; }
.bg-tooltip-arrow[data-position="right"] { align-items: center; justify-content: flex-end; }
/* ============================================================
TOOLTIP / RESOURCE / ARROW / VERTICAL or HORIZONTAL ← Figma 224:53733, 224:53740, 224:53768, 224:53775
Track (60w × 8h for Medium Vertical, 8w × 60h for Medium Horizontal) with Align (Left/Center/Right or Top/Center/Bottom)
============================================================ */
.bg-tooltip-arrow-track {
display: flex;
position: relative;
}
.bg-tooltip-arrow-track[data-orientation="vertical"] { flex-direction: row; align-items: center; }
.bg-tooltip-arrow-track[data-orientation="horizontal"] { flex-direction: column; align-items: center; }
.bg-tooltip-arrow-track[data-size="medium"][data-orientation="vertical"] { width: 60px; height: 8px; }
.bg-tooltip-arrow-track[data-size="medium"][data-orientation="horizontal"] { width: 8px; height: 60px; }
.bg-tooltip-arrow-track[data-size="small"][data-orientation="vertical"] { width: 60px; height: 6px; }
.bg-tooltip-arrow-track[data-size="small"][data-orientation="horizontal"] { width: 6px; height: 60px; }
.bg-tooltip-arrow-track[data-align="left"] { justify-content: flex-start; }
.bg-tooltip-arrow-track[data-align="center"] { justify-content: center; }
.bg-tooltip-arrow-track[data-align="right"] { justify-content: flex-end; }
.bg-tooltip-arrow-track[data-align="top"] { justify-content: flex-start; }
.bg-tooltip-arrow-track[data-align="bottom"] { justify-content: flex-end; }
/* ============================================================
TABLE / HEADER CELL ← Figma 437:512
4 variants: HeaderRight / HeaderLeft / HeaderCenter / HeaderCheck
BG: Atomic Gray/700 (#2D2D2F), Text: Static/White (#FFFFFF) Caption 2 Bold (11px SemiBold)
Height: 32px, Divider: 1px Line/Normal/Normal (rgba(113,113,115,0.22))
============================================================ */
.bg-header-cell {
display: inline-flex;
align-items: stretch;
vertical-align: middle;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-header-cell__body {
background: #2D2D2F;
display: flex;
align-items: center;
height: 32px;
box-sizing: border-box;
flex-shrink: 0;
}
.bg-header-cell[data-name="right"] .bg-header-cell__body,
.bg-header-cell[data-name="left"] .bg-header-cell__body,
.bg-header-cell[data-name="center"] .bg-header-cell__body {
padding: 8px;
min-width: 65px;
}
.bg-header-cell[data-name="check"] .bg-header-cell__body {
padding: 8px 12px;
width: 44px;
justify-content: center;
}
/* ============================================================
TABLE / DATA CELL ← Figma 440:626 (11 variants)
data-type: data | data-with-badge | checkbox | iconbutton | more | chip | select
data-align: left | center | right (data, data-with-badge에서만 의미)
data-badge / data-divider / data-subtext / data-subtext2: boolean toggle
Body: bg #FFFFFF, border-bottom 1px #F6F6F6 (Line/Solid/Alternative), padding 12px
Divider (우측, 셀 사이 경계): 1px rgba(113,113,115,0.08) (Line/Normal/Alternative)
============================================================ */
.bg-data-cell {
display: inline-flex;
align-items: stretch; /* 행(flex row) 안에서 가장 큰 셀 높이로 늘어나면 __body 도 같이 늘어남 (결정 §10) */
vertical-align: middle;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-data-cell__body {
background: #FFFFFF;
box-shadow: inset 0 -1px 0 #F6F6F6; /* 하단 Line/Solid/Alternative — inside stroke (Figma) */
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
padding: 12px;
box-sizing: border-box;
flex-shrink: 0;
}
/* Width / Height — type별 Figma spec 기본값 (440:626 메타데이터: 본문 폭 = 변형 폭 − divider 1px).
inline style(--cell-w, --cell-h)로 override 가능. */
.bg-data-cell[data-type="data"] .bg-data-cell__body,
.bg-data-cell[data-type="data-with-badge"] .bg-data-cell__body,
.bg-data-cell[data-type="chip"] .bg-data-cell__body,
.bg-data-cell[data-type="chip-vertical"] .bg-data-cell__body,
.bg-data-cell[data-type="code-center"] .bg-data-cell__body,
.bg-data-cell[data-type="code-left"] .bg-data-cell__body,
.bg-data-cell[data-type="code-right"] .bg-data-cell__body,
.bg-data-cell[data-type="select"] .bg-data-cell__body,
.bg-data-cell[data-type="image"] .bg-data-cell__body {
width: var(--cell-w, 131px);
min-width: 80px;
}
/* Figma 694:22354 — input variant: Textinput Small을 셀 내부에 stretch fit */
.bg-data-cell[data-type="input"] .bg-data-cell__body {
width: var(--cell-w, 132px); /* Figma 132px */
min-width: 80px;
justify-content: stretch;
}
.bg-data-cell[data-type="input"] .bg-data-cell__input { flex: 1 0 0; min-width: 0; }
/* Figma 695:22647 — list-cell variant: List Cell 인스턴스 (Avatar xsmall + Label) 중앙 정렬 */
.bg-data-cell[data-type="list-cell"] .bg-data-cell__body {
width: var(--cell-w, 131px); /* Figma 131px */
min-width: 80px;
justify-content: center;
}
.bg-data-cell[data-type="list-cell"] .bg-data-cell__list-cell { flex: 0 0 auto; }
/* Code / Chip badge-collection types — body alignment (Figma 652:9599/9679/9693) */
.bg-data-cell[data-type="chip"] .bg-data-cell__body,
.bg-data-cell[data-type="chip-vertical"] .bg-data-cell__body,
.bg-data-cell[data-type="image"] .bg-data-cell__body,
.bg-data-cell[data-type="code-center"] .bg-data-cell__body { justify-content: center; }
.bg-data-cell[data-type="code-left"] .bg-data-cell__body { justify-content: flex-start; }
.bg-data-cell[data-type="code-right"] .bg-data-cell__body { justify-content: flex-end; }
/* 액션 컬럼 폭 — Figma 440:627 Checkbox 44 (12+20+12) / 440:925 IconButton 40 / 440:967 More 40 (12+16+12) */
.bg-data-cell[data-type="checkbox"] .bg-data-cell__body { width: var(--cell-w, 44px); }
.bg-data-cell[data-type="iconbutton"] .bg-data-cell__body,
.bg-data-cell[data-type="more"] .bg-data-cell__body { width: var(--cell-w, 40px); }
.bg-data-cell[data-type="checkbox"] .bg-data-cell__body,
.bg-data-cell[data-type="iconbutton"] .bg-data-cell__body,
.bg-data-cell[data-type="more"] .bg-data-cell__body {
min-width: 40px;
padding: 12px;
}
/* Height (결정 §10) — 고정 높이 없음. padding 12 만 보장하고 콘텐츠만큼 hug, 같은 행에서는 가장 큰 셀에 맞춰 stretch.
--cell-h 는 선택적 "최소 높이" override (height 가 아니라 min-height). */
.bg-data-cell__body { min-height: var(--cell-h, 0px); }
/* ============================================================
TABLE / RESOURCE / SELECTCOUNT ← Figma 454:7449
2 status — Default(grey check, "선택된 항목 없음") / Active(orange check, "nn건 선택됨")
Layout: check icon(16px) + gap 4px + label (Caption 1 Medium/SemiBold)
============================================================ */
.bg-select-count {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-select-count__icon {
width: 16px; height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bg-select-count__icon svg { width: 100%; height: 100%; display: block; }
.bg-select-count__icon > .bg-icon { width: 100%; height: 100%; }
.bg-select-count__icon > .bg-icon > svg { width: 100%; height: 100%; }
.bg-select-count__label {
font-size: 12px;
line-height: 1.334;
letter-spacing: 0.3024px;
white-space: nowrap;
}
.bg-select-count[data-status="default"] .bg-select-count__icon { color: rgba(55,56,60,0.28); } /* Label/Assistive */
.bg-select-count[data-status="default"] .bg-select-count__label { color: rgba(61,61,63,0.61); font-weight: 500; }
.bg-select-count[data-status="active"] .bg-select-count__icon,
.bg-select-count[data-status="active"] .bg-select-count__label { color: #FF6121; } /* Primary/Orange */
.bg-select-count[data-status="active"] .bg-select-count__label { font-weight: 600; }
/* ============================================================
TABLE / DATA CONTROL ← Figma 454:7157
1622px 기본 width. 좌측 = SelectCount + 구분점 + Total / 우측 = RowsPerPage Select + Divider + Button slots (Left 7개 + Right 4개)
각 button slot은 enabled/label/variant/color/disabled props 개별 노출.
============================================================ */
.bg-data-control {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 10px;
box-sizing: border-box;
background: #FFFFFF;
padding: 10px 12px;
width: 100%;
max-width: 1622px;
overflow-x: auto;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-data-control__left {
display: flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.bg-data-control__sep {
font-size: 12px;
line-height: 1.334;
letter-spacing: 0.3024px;
color: rgba(61,61,63,0.61); /* Label/Alternative */
}
.bg-data-control__total {
font-size: 12px;
font-weight: 400;
line-height: 1.334;
letter-spacing: 0.3024px;
color: rgba(61,61,63,0.61);
white-space: nowrap;
}
.bg-data-control__right {
display: flex;
align-items: center;
gap: 16px;
flex-shrink: 0;
}
/* RowsPerPage = Figma Select Small (427:34900): padding 4 8 (+ 텍스트 px 4, chevron p 4 → 시각 inset 12), r8,
border Line/Normal/Neutral(.16), 텍스트 12/500/0.3024 Label/Normal, chevron 16 in 24 */
.bg-data-control__rows-per-page {
width: 90px;
height: 32px;
box-sizing: border-box;
padding: 4px 8px;
border: 0;
box-shadow: inset 0 0 0 1px var(--semantic-line-normal-neutral); /* Figma Inner Border overlay → 텍스트 inset 12 정확히 */
border-radius: var(--radius-md);
background: #FFFFFF;
color: var(--semantic-label-normal);
font-size: 12px;
font-weight: 500;
line-height: 1.334;
letter-spacing: 0.3024px;
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
.bg-data-control__rows-per-page > span:not(.bg-data-control__rows-per-page-chev) { padding: 0 4px; white-space: nowrap; }
.bg-data-control__rows-per-page-chev {
width: 24px; height: 24px;
padding: 4px;
box-sizing: border-box;
flex-shrink: 0;
color: var(--semantic-label-normal);
}
.bg-data-control__rows-per-page-chev svg { width: 100%; height: 100%; display: block; }
.bg-data-control__vdivider {
width: 1px;
height: 32px;
background: rgba(113,113,115,0.22); /* Line/Normal/Normal */
flex-shrink: 0;
}
.bg-data-control__buttons {
display: flex;
align-items: center;
gap: 8px;
}
/* ============================================================
FILTER / RESOURCE / FILTERCHIP ← Figma 485:15891
2 status — Include(white bg + grey title + dark value) / Exclude(red-50 bg, all negative text)
Props for Filter 컴포넌트: status, filterTitle, filterValue, onClose
============================================================ */
.bg-filter-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
/* stroke inside (Figma "inside" alignment): outer box 32×N matches Figma metadata */
/* color set per-status via box-shadow override below */
border-radius: 10px;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
font-size: 14px;
line-height: 1.429;
vertical-align: middle;
}
.bg-filter-chip__text {
display: inline-flex;
align-items: center;
gap: 6px;
letter-spacing: 0.203px;
}
.bg-filter-chip__title { font-weight: 400; }
.bg-filter-chip__value { font-weight: 600; letter-spacing: 0; } /* Figma Label 1 Bold: ls 0 (title 의 0.203 상속 차단) */
/* Exclude: "{title} 제외" 의 공백을 Figma gap 2 로 — 14px Pretendard 공백(≈3.5px) 을 word-spacing 으로 보정 */
.bg-filter-chip[data-status="exclude"] .bg-filter-chip__title { word-spacing: -1.5px; }
.bg-filter-chip__close {
width: 14px; height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
cursor: pointer;
background: transparent;
border: 0;
padding: 0;
}
.bg-filter-chip__close svg { width: 100%; height: 100%; display: block; }
/* Include */
.bg-filter-chip[data-status="include"] {
background: #FFFFFF;
box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22); /* Line/Normal/Normal */
}
.bg-filter-chip[data-status="include"] .bg-filter-chip__title { color: rgba(61, 61, 63, 0.61); } /* Label/Alternative */
.bg-filter-chip[data-status="include"] .bg-filter-chip__value { color: rgba(45, 45, 47, 0.88); } /* Label/Neutral */
.bg-filter-chip[data-status="include"] .bg-filter-chip__close { color: rgba(61, 61, 63, 0.61); }
/* Exclude */
.bg-filter-chip[data-status="exclude"] {
background: #FCE9E9; /* Atomic Red/50 */
box-shadow: inset 0 0 0 1px #E94848; /* Status/Negative */
color: #E94848;
}
.bg-filter-chip[data-status="exclude"] .bg-filter-chip__title,
.bg-filter-chip[data-status="exclude"] .bg-filter-chip__value { color: inherit; }
.bg-filter-chip[data-status="exclude"] .bg-filter-chip__close { color: #E94848; }
/* ============================================================
FILTER / RESOURCE / VIEWCHIP ← Figma 486:16078
2 status — Default(white bg, dark label, grey count) / Current(brgNavy/300 bg, white label, navy count)
Props for Filter 컴포넌트: status, title, filterCount, showMenu (ViewChip menu popover)
============================================================ */
.bg-view-chip {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
/* stroke inside (Figma "inside" alignment): outer box 32×N matches Figma metadata */
box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22); /* Line/Normal/Normal */
border-radius: 9999px;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
vertical-align: middle;
}
.bg-view-chip__title {
font-size: 14px;
font-weight: 500;
line-height: 1.429;
letter-spacing: 0.203px;
white-space: nowrap;
}
.bg-view-chip__count {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 2px 8px;
border-radius: 9999px;
font-size: 12px;
font-weight: 500;
line-height: 1.334;
letter-spacing: 0.3024px;
}
.bg-view-chip__more {
width: 16px; height: 16px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
}
.bg-view-chip__more svg { width: 100%; height: 100%; display: block; }
/* Default */
.bg-view-chip[data-status="default"] {
background: #FFFFFF;
}
.bg-view-chip[data-status="default"] .bg-view-chip__title { color: #131315; } /* Label/Normal */
.bg-view-chip[data-status="default"] .bg-view-chip__count {
background: rgba(113, 113, 115, 0.08); /* Fill/Normal */
color: rgba(61, 61, 63, 0.28); /* Label/Assistive */
}
.bg-view-chip[data-status="default"] .bg-view-chip__more { color: rgba(61, 61, 63, 0.61); }
/* Current */
.bg-view-chip[data-status="current"] {
background: #061F41; /* brgNavy/300 */
box-shadow: none;
}
.bg-view-chip[data-status="current"] .bg-view-chip__title { color: #FFFFFF; }
.bg-view-chip[data-status="current"] .bg-view-chip__count {
background: #304561; /* brgNavy/200 */
color: #99A3B1; /* brgNavy/75 */
}
.bg-view-chip[data-status="current"] .bg-view-chip__more { color: #99A3B1; }
/* Wrapper for ViewChip + Menu popover (Figma flex-col gap-2 items-end) */
.bg-view-chip-stack {
position: relative; /* anchor for absolute menu */
display: inline-flex;
flex-direction: column;
gap: 2px;
align-items: flex-end;
}
/* ============================================================
VIEWCHIP / RESOURCE / MENU ← Figma 489:16277
ViewChip 우측 하단에 anchored되는 popover. 4 item — 이름 변경 / 복제 / 기본 뷰로 설정 / divider / 이 뷰 삭제
============================================================ */
.bg-view-chip-menu {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 8px;
width: max-content;
padding: 14px 16px;
box-sizing: border-box;
background: #FFFFFF;
/* stroke inside (Figma 489:16277 135×141) — border 대신 inset box-shadow + Shadow/Normal/Small */
border: 0;
border-radius: 10px;
box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22), var(--shadow-small);
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
/* Stack 안에서 사용될 때만 absolute로 띄워 sibling chip을 밀지 않도록 */
.bg-view-chip-stack > .bg-view-chip-menu {
position: absolute;
top: calc(100% + 2px); /* 기존 stack gap 유지 */
right: 0;
z-index: 50;
}
.bg-view-chip-menu__item {
position: relative;
isolation: isolate;
display: flex;
align-items: center;
gap: 8px;
width: 100%;
background: transparent;
border: 0;
padding: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
font-size: 14px;
font-weight: 500;
line-height: 1.429;
letter-spacing: 0.203px;
color: #131315; /* Label/Normal */
white-space: nowrap;
/* Interaction/Normal weights (hover/focus/pressed) */
--vcm-int-hover: 0.05;
--vcm-int-focus: 0.08;
--vcm-int-pressed: 0.12;
}
.bg-view-chip-menu__item--danger { color: #E94848; } /* Status/Negative */
/* Content sits above interaction overlay */
.bg-view-chip-menu__item > * {
position: relative;
z-index: 2;
}
/* Interaction overlay — radius-md, ±8px horizontal / ±4px vertical extend, Label/Normal */
.bg-view-chip-menu__item::after {
content: "";
position: absolute;
top: -4px; bottom: -4px;
left: -8px; right: -8px;
background: var(--semantic-label-normal);
border-radius: var(--radius-md);
opacity: 0;
transition: opacity 0.12s;
pointer-events: none;
z-index: 1;
}
.bg-view-chip-menu__item:hover::after { opacity: var(--vcm-int-hover); }
.bg-view-chip-menu__item:focus-visible::after { opacity: var(--vcm-int-focus); }
.bg-view-chip-menu__item:active::after { opacity: var(--vcm-int-pressed); }
.bg-view-chip-menu__item:focus { outline: none; }
.bg-view-chip-menu__icon {
width: 14px; height: 14px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: inherit;
}
.bg-view-chip-menu__icon svg { width: 100%; height: 100%; display: block; }
.bg-view-chip-menu__icon > .bg-icon { width: 100%; height: 100%; }
.bg-view-chip-menu__icon > .bg-icon > svg { width: 100%; height: 100%; }
.bg-view-chip-menu__divider {
width: 100%;
height: 1px;
background: rgba(113, 113, 115, 0.22);
}
/* ============================================================
FILTERCHIP / RESOURCE / FILTERSETTING ← Figma 502:23172
"필터 추가" 버튼 하위에 anchored 되는 popover.
Card 340px × auto, padding 20 24, gap 12, radius 3xl(20px), bg white, border + drop-shadow
내부: Title("새 필터 추가") + Field(Select) + Operator(SegmentedControl 포함/제외) + Value(Select) + Footer(액션)
============================================================ */
.bg-filter-setting {
width: 340px;
background: #FFFFFF;
/* stroke inside (Figma 502:23172 카드 340×400, action w 292) — border 대신 inset box-shadow */
border: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22), 0px 2px 2px rgba(19,19,21,0.06), 0px 4px 3px rgba(19,19,21,0.06);
padding: 20px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 12px;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-filter-setting__title {
margin: 0; /* reset UA default — was causing extra 14px top/bottom */
font-size: 14px;
font-weight: 500;
line-height: 1.429;
letter-spacing: 0.203px;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
}
.bg-filter-setting__fields {
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.bg-filter-setting__field-label {
font-size: 14px;
font-weight: 600;
line-height: 1.429;
color: rgba(46, 47, 51, 0.88); /* Label/Neutral */
margin-bottom: 8px;
}
/* Compact Select stub for inside FilterSetting */
.bg-filter-setting__select {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
height: 48px; /* Figma Select Medium 140:5167: 48 (border 는 inner overlay → inset box-shadow 로 안쪽 처리) */
padding: 12px;
gap: 8px;
box-sizing: border-box;
border: 0;
box-shadow: inset 0 0 0 1px rgba(112, 115, 124, 0.16); /* Line/Normal/Neutral — inner stroke → 텍스트/chevron inset 16 */
border-radius: 12px;
background: #FFFFFF;
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.0912px;
color: rgba(61, 61, 63, 0.28); /* Label/Assistive — placeholder (Active=False) */
}
/* Active=True: value selected — text Label/Normal (Figma 140:5184) */
.bg-filter-setting__select[data-active="true"] {
color: #131315;
}
/* Figma 140:5167: 텍스트 px 4 → inset 16 / chevron 16 in p-4 wrapper(24) → inset 16 */
.bg-filter-setting__select > span:first-child { padding: 0 4px; flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-filter-setting__select-chev {
width: 24px; height: 24px;
padding: 4px;
box-sizing: border-box;
color: #131315;
flex-shrink: 0;
}
.bg-filter-setting__select-chev svg { width: 100%; height: 100%; display: block; }
/* Select dropdown menu — 필드/값 클릭 시 select 위에 overlay 되어 아래를 덮음.
position: absolute top=0 → select 위치부터 시작, 아래로 펼쳐지며 다른 콘텐츠를 z-index로 덮음. */
.bg-filter-setting__select-wrap {
position: relative;
width: 100%;
}
.bg-filter-setting__select {
cursor: pointer;
}
/* Dropdown menu — uses standard .bg-menu component (Figma 224:50915).
Cells use .bg-list-cell.bg-menu-resource-cell — same machinery as Select.
Position absolute over select-wrap, width matches select. */
.bg-filter-setting__select-wrap > .bg-menu {
position: absolute;
top: 0;
left: 0;
right: 0;
width: 100%; /* Select 폭 매칭 (자체 320px override) */
min-width: 0;
z-index: 50;
}
/* Segmented Control "포함/제외" — 48px height, padding 3, radius 12, Fill/Normal bg */
.bg-filter-setting__segctrl {
display: flex;
align-items: center;
width: 100%;
height: 48px;
padding: 3px;
box-sizing: border-box;
background: rgba(113, 113, 115, 0.08); /* Fill/Normal */
border-radius: 12px;
}
.bg-filter-setting__segctrl-seg {
flex: 1 0 0;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
padding: 9px;
box-sizing: border-box;
border-radius: 10px;
font-size: 17px;
font-weight: 500;
line-height: 1.412;
cursor: pointer;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
background: transparent;
border: 0;
font-family: inherit;
}
.bg-filter-setting__segctrl-seg[aria-selected="true"] {
background: #FFFFFF;
box-shadow: 0px 0px 4px 0px rgba(0,0,0,0.08);
color: #131315; /* Label/Normal */
}
/* Footer (action area, Figma 502:22991) — 카드 padding 안쪽(x 24, w 292)에 배치, border-top + padding 12 + space-between.
카드 하단 padding 20 유지 → 카드 높이 400 */
.bg-filter-setting__action {
display: flex;
align-items: center;
gap: 24px;
padding: 12px;
box-shadow: inset 0 1px 0 rgba(112, 115, 124, 0.08); /* Line/Normal/Alternative — inside stroke (Figma) */
}
.bg-filter-setting__count {
flex: 1 0 0;
padding-left: 8px;
font-size: 14px;
font-weight: 600;
line-height: 1.429;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
}
/* ============================================================
FILTER / RESOURCE / VIEWSETTING ← Figma 511:18440
"현재 필터로 새 뷰 저장" 버튼 클릭 시 화면 중앙에 등장하는 모달.
Dim overlay(.bg-view-setting-dim) + 카드(.bg-view-setting).
Card ~390px × auto, padding 20 24, gap 20, radius 3xl, bg white, border + shadow
============================================================ */
.bg-view-setting-dim {
position: fixed;
inset: 0;
background: rgba(31, 31, 33, 0.52); /* Material/Dimmer-ish */
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
/* Modal — Figma 511:18440. width 383, padding 20/24, gap 20, radius 3xl(20), drop-shadow.
내부 컴포넌트는 모두 showcase의 기존 컴포넌트 인스턴스로 구성:
Header close = .bg-icon-button[data-kind="normal"] (147:7385)
Divider = .bg-divider (134:1269)
뷰 이름 = .bg-textinput + .bg-textfield (140:5147)
기본 뷰 설정 = .bg-control-item[data-kind="checkbox"] (140:5778)
Footer 버튼 = .bg-button (70:206) Large */
.bg-view-setting {
width: 383px;
max-width: calc(100vw - 32px);
background: #FFFFFF;
/* stroke inside (Figma 511:18440 카드 383, footer 버튼 165.5×2) — border 대신 inset box-shadow */
border: 0;
border-radius: 20px;
box-shadow: inset 0 0 0 1px rgba(113, 113, 115, 0.22), 0px 2px 2px rgba(19,19,21,0.06), 0px 4px 3px rgba(19,19,21,0.06);
padding: 20px 24px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 20px;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
}
.bg-view-setting__header {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
}
.bg-view-setting__title {
font-size: 16px;
font-weight: 700; /* Body 1 Bold per Figma */
line-height: 1.5;
letter-spacing: 0.0912px;
color: #131315; /* Label/Normal */
margin: 0;
}
.bg-view-setting__field {
display: flex;
flex-direction: column;
gap: 8px;
width: 100%;
}
.bg-view-setting__field-heading {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
}
.bg-view-setting__field-label {
font-size: 14px;
font-weight: 600; /* Label 1 Bold per Figma */
line-height: 1.429;
color: rgba(46, 47, 51, 0.88); /* Label/Neutral */
}
.bg-view-setting__field-meta {
font-size: 13px;
font-weight: 500; /* Label 2 Medium */
line-height: 1.385;
letter-spacing: 0.2522px;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
}
/* 색상 라벨 — 7 color swatches (32×32, Figma 509:17909). selected 는 중앙 12×12 원(511:18439 Ellipse 8, fill white) 하나뿐 — ring 없음 */
.bg-view-setting__colors {
display: flex;
gap: 8px;
width: 100%;
}
.bg-view-setting__color {
width: 32px; height: 32px;
border-radius: 9999px;
flex-shrink: 0;
cursor: pointer;
background: var(--swatch-color, #ccc);
border: 0;
position: relative;
padding: 0;
}
.bg-view-setting__color[aria-selected="true"]::after {
content: "";
position: absolute;
left: 50%; top: 50%;
transform: translate(-50%, -50%);
width: 12px; height: 12px;
border-radius: 9999px;
background: #FFFFFF; /* Static/White — 511:18439 SVG fill */
}
/* 포함될 조건 — Fill/Alternative box, padding 8 10, radius lg(10), gap 4 */
.bg-view-setting__conditions {
display: flex;
flex-direction: column;
gap: 4px;
width: 100%;
padding: 8px 10px;
box-sizing: border-box;
background: rgba(113, 113, 115, 0.05); /* Fill/Alternative */
border-radius: 10px;
overflow: hidden;
}
.bg-view-setting__condition {
display: flex;
align-items: center;
gap: 4px;
}
/* 10×10 dot bullet icon (Figma 144:6735) */
.bg-view-setting__condition-dot {
width: 10px; height: 10px;
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
color: rgba(61, 61, 63, 0.28); /* Label/Assistive */
}
.bg-view-setting__condition-dot svg { width: 100%; height: 100%; display: block; }
/* FILTER/FILTERVALUE chip — Figma 510:17952/510:17955
bg #FFFFFF, border Line/Solid/Neutral #ECECEC, radius md(8), padding 4 8,
12px SemiBold Label/Normal, lineHeight 1.334, letterSpacing 0.3024px */
.bg-view-setting__condition-chip {
background: #FFFFFF;
box-shadow: inset 0 0 0 1px #ECECEC; /* Line/Solid/Neutral — stroke inside → 높이 24 유지 */
border-radius: 8px; /* radius-md */
padding: 4px 8px;
height: 24px;
box-sizing: border-box;
display: inline-flex;
align-items: center;
font-size: 12px;
font-weight: 600; /* SemiBold = Caption 1 Bold */
line-height: 1.334;
letter-spacing: 0.3024px;
color: #131315; /* Label/Normal */
white-space: nowrap;
}
/* "=" or "≠" operator — 14px SemiBold Label/Normal */
.bg-view-setting__condition-op {
font-size: 14px;
font-weight: 600;
line-height: 1.429;
color: #131315;
}
/* exclude variant: operator + value chip text = Status/Negative */
.bg-view-setting__condition[data-op="exclude"] .bg-view-setting__condition-op,
.bg-view-setting__condition[data-op="exclude"] .bg-view-setting__condition-chip--value {
color: #E94848; /* Status/Negative */
}
.bg-view-setting__footer {
display: flex;
gap: 4px; /* Figma 511:18296 gap 4 (버튼 165.5 ×2) */
width: 100%;
}
.bg-view-setting__footer .bg-button { flex: 1 0 0; }
/* ============================================================
TABLE / FILTER ← Figma 492:18174
2 rows — "자주 쓰는 뷰"(ViewChip 리스트 + "현재 필터로 새 뷰 저장" 버튼)
+ "필터"(FilterChip 리스트 + "필터 추가" 버튼)
사이에 1px 가로 divider. 각 row는 label(80px) + 32px vertical divider + chips(flex-wrap) + 우측 action button.
============================================================ */
.bg-filter {
display: flex;
flex-direction: column;
gap: 10px;
padding: 10px 12px;
box-sizing: border-box;
font-family: 'Pretendard Variable', -apple-system, sans-serif;
width: 100%;
min-height: 105px;
}
.bg-filter__row {
display: flex;
align-items: center;
gap: 10px;
min-height: 32px;
}
.bg-filter__label {
width: 80px;
flex-shrink: 0;
font-size: 14px;
font-weight: 600;
line-height: 1.429;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
}
.bg-filter__vdivider {
width: 1px;
height: 32px;
background: rgba(113, 113, 115, 0.22); /* Line/Normal/Normal */
flex-shrink: 0;
}
.bg-filter__chips {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
/* hug content: action button sits immediately after chips (Figma 492:17797 / 492:18101) */
min-width: 0;
}
.bg-filter__hdivider {
width: 100%;
height: 1px;
background: rgba(113, 113, 115, 0.22); /* Line/Normal/Normal */
}
/* Translucent action button (현재 필터로 새 뷰 저장 / 필터 추가) — Figma 70:354 Solid/Assistive 기반 */
.bg-filter__action {
position: relative;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 14px;
border: 0;
border-radius: 8px;
background: rgba(113, 113, 115, 0.08); /* Fill/Normal */
backdrop-filter: blur(32px);
-webkit-backdrop-filter: blur(32px);
font-family: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1.385;
letter-spacing: 0.2522px;
color: rgba(45, 45, 47, 0.88); /* Label/Neutral */
cursor: pointer;
flex-shrink: 0;
white-space: nowrap;
}
.bg-filter__action:hover { background: rgba(113, 113, 115, 0.14); }
.bg-filter__action-icon {
width: 16px; height: 16px; /* Figma 492:17898 / 492:18002: Button Small leading 아이콘 16 */
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.bg-filter__action-icon svg { width: 100%; height: 100%; display: block; }
.bg-filter__action-icon > .bg-icon { width: 100%; height: 100%; }
.bg-filter__action-icon > .bg-icon > svg { width: 100%; height: 100%; }
/* Popover/Modal anchors */
.bg-filter__action-wrap {
position: relative;
display: inline-flex;
flex-shrink: 0;
}
.bg-filter__popover {
position: absolute;
top: calc(100% + 6px);
right: 0;
z-index: 100;
}
/* Text column */
.bg-data-cell__text-col {
display: flex;
flex-direction: column;
flex: 1 0 0;
min-width: 0;
gap: 4px;
justify-content: center;
word-break: break-word;
}
.bg-data-cell[data-align="left"] .bg-data-cell__text-col { align-items: flex-start; text-align: left; }
.bg-data-cell[data-align="right"] .bg-data-cell__text-col { align-items: flex-end; text-align: right; }
.bg-data-cell[data-align="center"] .bg-data-cell__text-col { align-items: center; text-align: center; }
.bg-data-cell__text {
font-size: 13px;
font-weight: 500; /* Label 2 Medium */
line-height: 1.385;
letter-spacing: 0.2522px;
color: #131315; /* Semantic/Label/Normal */
white-space: nowrap;
}
.bg-data-cell__subtext {
font-size: 11px;
font-weight: 400; /* Caption 2 Regular */
line-height: 1.273;
letter-spacing: 0.3421px;
color: rgba(61, 61, 63, 0.61); /* Label/Alternative */
white-space: nowrap;
}
/* DataWithBadge 변형: 최대 5개의 Badge가 수평 row, gap=4px로 배치 (Figma 587:61564).
Badge 자체는 기존 .bg-content-badge[data-variant="solid"][data-color="neutral"][data-size="small"] 인스턴스 재사용. */
.bg-data-cell__badge-row {
display: flex;
flex-wrap: nowrap;
gap: 4px;
align-items: flex-start;
flex-shrink: 0;
}
.bg-data-cell[data-align="right"] .bg-data-cell__badge-row { justify-content: flex-end; }
.bg-data-cell[data-align="center"] .bg-data-cell__badge-row { justify-content: center; }
.bg-data-cell[data-align="left"] .bg-data-cell__badge-row { justify-content: flex-start; }
/* Chip / Code 계열(507:17765 · 652:9599/9679/9693)은 Figma badge-collection 이 flex-wrap — data-with-badge 만 nowrap 유지 */
.bg-data-cell[data-type="chip"] .bg-data-cell__badge-row,
.bg-data-cell[data-type="code-center"] .bg-data-cell__badge-row,
.bg-data-cell[data-type="code-left"] .bg-data-cell__badge-row,
.bg-data-cell[data-type="code-right"] .bg-data-cell__badge-row { flex-wrap: wrap; min-width: 0; flex-shrink: 1; }
/* ChipVertical (Figma 772:21390) — 배지를 세로로 쌓음: flex-col gap 4, items-start */
.bg-data-cell__badge-col {
display: flex;
flex-direction: column;
gap: 4px;
align-items: flex-start;
justify-content: center;
flex-shrink: 0;
}
/* Image (Figma 721:14332) — Chip/Resource/Content/Image 40×40, border Line/Normal/Normal(inside), radius sm 6, 썸네일 object-cover */
.bg-data-cell__thumb {
width: 40px; height: 40px;
box-sizing: border-box;
border: 1px solid var(--semantic-line-normal-normal);
border-radius: var(--radius-sm, 6px);
overflow: hidden;
flex-shrink: 0;
background: var(--semantic-bg-normal-normal);
}
.bg-data-cell__thumb img { width: 100%; height: 100%; display: block; object-fit: cover; }
/* Right divider (셀 우측 경계) */
.bg-data-cell__divider {
width: 1px;
align-self: stretch;
background: rgba(113, 113, 115, 0.08); /* Line/Normal/Alternative */
flex-shrink: 0;
}
/* Inner checkbox (16×16 Small Unchecked) — Resource control */
.bg-data-cell__checkbox {
width: 16px; height: 16px;
border: 1.5px solid rgba(113, 113, 115, 0.22); /* Line/Normal/Normal */
background: var(--semantic-static-white); /* 2026-10-23 Figma Checkbox Unchecked: Static/White */
border-radius: 5px;
box-sizing: border-box;
flex-shrink: 0;
}
/* Inner IconButton (Normal, dashed border for placeholder) */
.bg-data-cell__iconbtn {
width: 16px; height: 16px; /* Figma 440:626 iconbutton: Button/Icon/Normal h-16 */
border: 1.5px dashed rgba(113, 113, 115, 0.22);
border-radius: 6px;
box-sizing: border-box;
flex-shrink: 0;
}
/* Inner More (3-dot vertical icon) */
.bg-data-cell__more {
width: 16px; height: 16px; /* Figma 440:626 more: Button/Icon/Normal h-16 */
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--semantic-label-normal); /* Label/Normal — 토큰 통일 (결정 §1) */
flex-shrink: 0;
}
.bg-data-cell__more svg { width: 100%; height: 100%; display: block; }
.bg-data-cell__more > .bg-icon { width: 100%; height: 100%; }
.bg-data-cell__more > .bg-icon > svg { width: 100%; height: 100%; }
/* iconbutton 타입에 합성된 BgIconButton(normal) — Figma 인스턴스 h-16 (기본 24 를 셀 안에서만 16 으로) */
.bg-data-cell[data-type="iconbutton"] .bg-icon-button[data-kind="normal"] { width: 16px; height: 16px; }
.bg-data-cell[data-type="iconbutton"] .bg-icon-button[data-kind="normal"] .bg-icon-button__icon { height: 16px; }
/* select 타입 — Figma 473:13427 = Select Small(427:34900) 인스턴스. 셀 안에서는 .bg-select 의 기본 335px 대신 stretch */
.bg-data-cell[data-type="select"] .bg-select { width: 100%; min-width: 0; }
/* (legacy) Inner Select stub — Select Small 지오메트리로 정합: h 32 = py 4 + content 24, px 8, r8,
border Line/Normal/Neutral(.16, inside), 텍스트 px 4 · 12/500/0.3024 Label/Assistive(placeholder), chevron 16 in 24(p4) */
.bg-data-cell__select {
display: inline-flex;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 4px 8px;
width: 100%;
height: 32px;
box-sizing: border-box;
border: 0;
box-shadow: inset 0 0 0 1px var(--semantic-line-normal-neutral); /* inner stroke */
border-radius: var(--radius-md);
background: #FFFFFF;
color: var(--semantic-label-assistive);
font-size: 12px;
font-weight: 500;
line-height: 1.334;
letter-spacing: 0.3024px;
flex-shrink: 0;
}
.bg-data-cell__select > span:first-child { padding: 0 4px; flex: 1 0 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bg-data-cell__select-icon { width: 24px; height: 24px; padding: 4px; box-sizing: border-box; flex-shrink: 0; color: var(--semantic-label-normal); }
.bg-data-cell__select-icon svg { width: 100%; height: 100%; display: block; }
.bg-data-cell__select-icon > .bg-icon { width: 100%; height: 100%; }
.bg-data-cell__select-icon > .bg-icon > svg { width: 100%; height: 100%; }
.bg-header-cell__inner {
display: flex;
flex: 1 0 0;
min-width: 0;
gap: 8px;
align-items: center;
}
.bg-header-cell[data-name="right"] .bg-header-cell__inner { justify-content: flex-end; }
.bg-header-cell[data-name="left"] .bg-header-cell__inner { justify-content: flex-start; }
.bg-header-cell[data-name="center"] .bg-header-cell__inner { justify-content: center; }
.bg-header-cell__label {
color: #FFFFFF;
font-size: 11px;
font-weight: 600; /* SemiBold = Bold token in Caption 2 family */
line-height: 1.273;
letter-spacing: 0.3421px;
white-space: nowrap;
word-break: break-word;
}
.bg-header-cell[data-name="right"] .bg-header-cell__label { text-align: right; }
.bg-header-cell[data-name="left"] .bg-header-cell__label { text-align: left; }
.bg-header-cell[data-name="center"] .bg-header-cell__label { text-align: center; }
.bg-header-cell__sort {
display: inline-flex;
align-items: center;
justify-content: center;
height: 14px;
color: #FFFFFF;
flex-shrink: 0;
}
.bg-header-cell__sort svg { height: 100%; width: auto; display: block; }
.bg-header-cell__divider {
width: 1px;
align-self: stretch;
background: rgba(113, 113, 115, 0.22); /* Line/Normal/Normal */
flex-shrink: 0;
}
/* Checkbox slot inside HeaderCheck — 16×16 Small variant, Figma 140:5801.
Border: Line/Normal/Normal (rgba(113,113,115,0.22)) per spec.
Checked / Indeterminate fills with Primary/Orange and shows check / line icon. */
.bg-header-cell__checkbox {
width: 16px; height: 16px;
border-radius: 5px;
border: 1.5px solid rgba(113, 113, 115, 0.22);
background: var(--semantic-static-white); /* 2026-10-23 Figma Checkbox Unchecked: Static/White */
box-sizing: border-box;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
color: #FFFFFF; /* inner check/line icon currentColor */
}
.bg-header-cell__checkbox[data-state="checked"],
.bg-header-cell__checkbox[data-state="indeterminate"] {
background: #FF6121;
border-color: #FF6121;
}
.bg-header-cell__checkbox-icon {
display: none;
width: 14px; height: 14px;
align-items: center;
justify-content: center;
}
.bg-header-cell__checkbox-icon svg { width: 100%; height: 100%; display: block; }
.bg-header-cell__checkbox-icon > .bg-icon { width: 100%; height: 100%; }
.bg-header-cell__checkbox-icon > .bg-icon > svg { width: 100%; height: 100%; }
.bg-header-cell__checkbox[data-state="checked"] .bg-header-cell__checkbox-icon[data-icon="check"],
.bg-header-cell__checkbox[data-state="indeterminate"] .bg-header-cell__checkbox-icon[data-icon="line"] {
display: inline-flex;
}
/* ============================================================
SHELL — TopBar (1088:5406) · Rail (1088:5407) · Nav (1088:5408)
BILO 어드민 레이아웃 셸. brgNavy 다크 배경 위에 얹는 상단 바 / 1차 메뉴 레일 / 2차 메뉴 패널.
리소스: TopBar/Resource/{SpaceTab 1084:5309, StatusChip 1069:19293, Notification 1079:5251,
Mail 1079:5340, Account 1070:19373, SearchBar 1081:19814, PopoverItem 1079:5107}
Rail/Resource/Menu 1035:4234
Nav/Resource/{Header 1044:4559, MenuCategory 1061:6781, CategoryHeader 415:33370,
Menu 1046:4655, Star 418:34721}
Figma 컴포넌트는 Clip content 지만, 팝오버(알림·메일·계정·검색)는 바 바깥으로 펼쳐져야 하므로
TopBar 는 overflow: visible. Nav 는 메뉴가 넘치면 세로 스크롤.
============================================================ */
/* ---------- TopBar ---------- */
.bg-topbar {
position: relative;
display: flex;
align-items: center;
box-sizing: border-box;
width: 100%;
height: 56px;
padding: 0 20px; /* Logo x20 · Utility 우측 20 (Figma 1088:5406, 2026-10-23 갱신) */
background: var(--semantic-atomic-brgnavy-500);
box-shadow: inset 0 -1px 0 var(--semantic-atomic-brgnavy-300); /* border-bottom 1px (inside) */
font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
z-index: 10;
}
.bg-topbar__logo {
display: flex;
align-items: center;
width: 298px; /* Logo/BILO 인스턴스 폭 (Space Tabs 시작 x308) */
height: 30px;
flex-shrink: 0;
}
.bg-topbar__tabs {
display: flex;
align-items: center;
height: 52px;
flex-shrink: 0;
}
.bg-topbar__search {
position: absolute;
top: 12px;
left: 50%;
transform: translateX(-50%); /* SearchBar 가로 중앙 (x800 / 1920) */
}
.bg-topbar__utility {
display: flex;
align-items: center;
gap: 24px;
margin-left: auto;
flex-shrink: 0;
}
.bg-topbar__actions {
display: flex;
align-items: center;
gap: 20px;
}
/* SpaceTab — Status: Default / Hover / Active · Badge(BOOL) */
.bg-topbar-space-tab {
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: 4px;
box-sizing: border-box;
height: 52px;
padding: 14px 10px 6px;
margin: 0;
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
-webkit-tap-highlight-color: transparent;
}
.bg-topbar-space-tab__container {
display: flex;
align-items: center;
height: 24px;
padding: 0 8px; /* Spacer 8 × 2 */
}
.bg-topbar-space-tab__content {
display: flex;
align-items: center;
gap: 4px;
}
.bg-topbar-space-tab__label {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
letter-spacing: 0.0912px; /* Body 1/Normal */
color: var(--semantic-atomic-brgnavy-100);
white-space: nowrap;
}
.bg-topbar-space-tab__badge { /* Push Badge Number XSmall */
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
min-width: 16px;
height: 16px;
padding: 0 4px;
border-radius: 9999px;
background: var(--semantic-atomic-brgorange-300);
color: var(--semantic-static-white);
font-size: 11px;
font-weight: 600;
line-height: 1;
letter-spacing: 0.3421px; /* Caption 2/Bold */
}
.bg-topbar-space-tab__underline {
height: 4px;
border-radius: 9999px;
background: var(--semantic-atomic-brgnavy-300);
opacity: 0;
}
.bg-topbar-space-tab:hover .bg-topbar-space-tab__label,
.bg-topbar-space-tab[data-status="hover"] .bg-topbar-space-tab__label { color: var(--semantic-static-white); }
.bg-topbar-space-tab:hover .bg-topbar-space-tab__underline,
.bg-topbar-space-tab[data-status="hover"] .bg-topbar-space-tab__underline { opacity: 1; }
.bg-topbar-space-tab[data-status="active"] .bg-topbar-space-tab__label {
color: var(--semantic-static-white);
font-weight: 700; /* Body 1/Normal - Bold */
}
.bg-topbar-space-tab[data-status="active"] .bg-topbar-space-tab__underline {
opacity: 1;
background: var(--semantic-atomic-brgorange-300);
}
.bg-topbar-space-tab:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: -2px; }
/* StatusChip — Status: Working / Off / Away / Outside / Leave */
.bg-topbar-status-chip {
display: inline-flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
padding: 6px 10px;
border-radius: 9999px;
background: var(--semantic-atomic-brgnavy-300);
color: var(--semantic-static-white);
font-size: 14px;
font-weight: 400;
line-height: 1.429;
letter-spacing: 0.203px; /* Label 1/Normal - Regular */
white-space: nowrap;
}
.bg-topbar-status-chip__state {
display: inline-flex;
align-items: center;
gap: 8px;
}
.bg-topbar-status-chip__dot,
.bg-topbar-account__status-dot {
width: 8px;
height: 8px;
border-radius: 9999px;
flex-shrink: 0;
background: var(--bg-shell-status-color);
}
[data-status="working"] > .bg-topbar-status-chip__state,
.bg-topbar-account__status[data-value="working"] { --bg-shell-status-color: var(--semantic-status-positive); }
[data-status="off"] > .bg-topbar-status-chip__state { --bg-shell-status-color: var(--semantic-atomic-brgnavy-200); }
[data-status="away"] > .bg-topbar-status-chip__state,
.bg-topbar-account__status[data-value="away"] { --bg-shell-status-color: var(--semantic-status-cautionary); }
[data-status="outside"] > .bg-topbar-status-chip__state,
.bg-topbar-account__status[data-value="outside"] { --bg-shell-status-color: var(--semantic-accent-blue); }
[data-status="leave"] > .bg-topbar-status-chip__state { --bg-shell-status-color: var(--semantic-atomic-brgnavy-200); }
/* Notification · Mail · Account — 트리거 + 팝오버 래퍼 */
.bg-topbar-notification,
.bg-topbar-mail,
.bg-topbar-account {
position: relative;
display: inline-flex;
align-items: center;
}
.bg-topbar-notification > .bg-icon-button,
.bg-topbar-mail > .bg-icon-button {
color: var(--semantic-static-white);
--ib-int-color: var(--semantic-static-white); /* Interaction overlay: Static/White */
}
.bg-topbar-account__trigger {
display: inline-flex;
align-items: center;
gap: 8px;
margin: 0;
padding: 0;
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
color: var(--semantic-static-white);
}
.bg-topbar-account__trigger:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; border-radius: 4px; }
.bg-topbar-account__name {
font-size: 16px;
font-weight: 700;
line-height: 1.5;
letter-spacing: 0.0912px; /* Body 1/Normal - Bold */
white-space: nowrap;
}
.bg-topbar-account__chevron {
display: inline-flex;
width: 16px;
height: 16px;
color: var(--semantic-atomic-brgnavy-75);
}
.bg-topbar-account__chevron svg { width: 100%; height: 100%; display: block; }
/* Account 아바타 Push Badge — Figma 인스턴스 override: Dot 8px, 우하단 정렬, 1px outside stroke brgNavy/500 */
.bg-topbar-account__trigger .bg-avatar__push-badge {
top: auto;
right: calc(-1 * var(--bg-avatar-bw));
bottom: calc(-1 * var(--bg-avatar-bw));
transform: none;
width: 8px;
height: 8px;
box-shadow: 0 0 0 1px var(--semantic-atomic-brgnavy-500);
}
/* Popover — Notification / Mail / Account 공통 컨테이너 (w257 · r16 · Shadow/Normal/Small) */
.bg-topbar-popover {
position: absolute;
top: calc(100% + 8px);
right: 0;
z-index: 30;
display: flex;
flex-direction: column;
gap: 14px;
box-sizing: border-box;
width: 257px;
padding: 20px 10px;
background: var(--semantic-bg-elevated-normal);
border: 1px solid var(--semantic-line-solid-neutral); /* Notification·Mail: stroke 가 레이아웃에 포함 */
border-radius: 16px;
box-shadow: var(--shadow-small);
cursor: default;
text-align: left;
}
.bg-topbar-popover[data-kind="account"] {
border: 0; /* Account: stroke 미포함 (inside) */
box-shadow: inset 0 0 0 1px var(--semantic-line-solid-neutral), var(--shadow-small);
}
.bg-topbar-popover[hidden] { display: none; }
.bg-topbar-popover > .bg-divider { background: var(--semantic-line-normal-alt); } /* Line/Normal/Alternative override */
.bg-topbar-popover__list {
display: flex;
flex-direction: column;
gap: 8px;
}
.bg-topbar-popover__caption {
padding: 0 10px;
font-size: 12px;
font-weight: 400;
line-height: 1.334;
letter-spacing: 0.3024px; /* Caption 1/Regular */
color: var(--semantic-label-neutral);
}
.bg-topbar-popover__items {
display: flex;
flex-direction: column;
gap: 4px;
}
.bg-topbar-popover__footer { padding: 0 10px; }
.bg-topbar-popover__footer > .bg-button { width: 100%; }
/* PopoverItem — Status: Default / Hover */
.bg-topbar-popover-item {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
}
.bg-topbar-popover-item:hover,
.bg-topbar-popover-item[data-status="hover"] { background: var(--semantic-fill-alt); }
.bg-topbar-popover-item__title {
font-size: 14px;
font-weight: 500;
line-height: 1.429;
letter-spacing: 0.203px; /* Label 1/Normal - Medium */
color: var(--semantic-label-normal);
}
.bg-topbar-popover-item__description {
font-size: 12px;
font-weight: 400;
line-height: 1.334;
letter-spacing: 0.3024px; /* Caption 1/Regular */
color: var(--semantic-label-alternative);
}
/* Account popover 본문 */
.bg-topbar-account__profile {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
}
.bg-topbar-account__info {
display: flex;
flex-direction: column;
min-width: 0;
}
.bg-topbar-account__title {
display: flex;
align-items: flex-end;
gap: 4px;
}
.bg-topbar-account__info .bg-topbar-account__name { color: var(--semantic-label-normal); }
.bg-topbar-account__rank,
.bg-topbar-account__dept {
font-size: 12px;
font-weight: 400;
line-height: 1.334;
letter-spacing: 0.3024px; /* Caption 1/Regular */
white-space: nowrap;
}
.bg-topbar-account__rank { color: var(--semantic-label-assistive); }
.bg-topbar-account__dept { color: var(--semantic-label-alternative); }
.bg-topbar-account__section {
display: flex;
flex-direction: column;
gap: 8px;
}
.bg-topbar-account__section > .bg-topbar-popover__caption { padding: 0 10px; }
.bg-topbar-account__row {
display: flex;
align-items: center;
gap: 10px;
padding: 0 10px;
}
.bg-topbar-account__attendance {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.429;
letter-spacing: 0.203px; /* Label 1/Normal - Medium */
color: var(--semantic-label-normal);
}
.bg-topbar-account__statuses {
display: flex;
align-items: center;
gap: 8px;
padding: 0 10px;
}
.bg-topbar-account__status {
display: inline-flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
padding: 4px 10px;
margin: 0;
border: 1px solid var(--semantic-line-normal-normal); /* stroke 레이아웃 포함 (inside) */
border-radius: 9999px;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.429;
letter-spacing: 0.203px; /* Label 1/Normal - Regular */
color: var(--semantic-label-normal);
white-space: nowrap;
}
.bg-topbar-account__menu {
display: flex;
flex-direction: column;
gap: 4px;
}
.bg-topbar-account__menu-item {
display: flex;
align-items: center;
gap: 12px;
box-sizing: border-box;
width: 100%;
height: 28px;
padding: 4px 10px;
margin: 0;
border: 0;
border-radius: 8px;
background: none;
cursor: pointer;
font-family: inherit;
font-size: 14px;
font-weight: 400;
line-height: 1.429;
letter-spacing: 0.203px; /* Label 1/Normal - Regular */
color: var(--semantic-label-normal);
text-align: left;
}
.bg-topbar-account__menu-item:hover,
.bg-topbar-account__menu-item[data-status="hover"] { background: var(--semantic-fill-alt); }
.bg-topbar-account__menu-icon {
display: inline-flex;
width: 16px;
height: 16px;
flex-shrink: 0;
color: var(--semantic-label-normal);
}
.bg-topbar-account__menu-item[data-action="logout"] .bg-topbar-account__menu-icon { color: var(--semantic-label-alternative); }
.bg-topbar-account__menu-icon svg { width: 100%; height: 100%; display: block; }
/* SearchBar — Expended: False / True (Textfield Small override + Menu) */
.bg-topbar-search {
position: relative;
width: 320px;
}
.bg-topbar-search__input {
display: flex;
align-items: center;
gap: 8px;
box-sizing: border-box;
height: 32px;
padding: 4px 8px;
border-radius: 8px;
background: var(--semantic-bg-transparent-normal);
-webkit-backdrop-filter: blur(32px);
backdrop-filter: blur(32px);
box-shadow: inset 0 0 0 1px var(--semantic-line-normal-neutral);
}
.bg-topbar-search__icon {
display: inline-flex;
box-sizing: border-box;
width: 18px;
height: 18px;
padding: 1px;
flex-shrink: 0;
color: var(--semantic-atomic-brgnavy-100);
}
.bg-topbar-search__icon svg { width: 100%; height: 100%; display: block; }
.bg-topbar-search__field {
flex: 1;
min-width: 0;
box-sizing: border-box;
height: 24px;
padding: 0 4px;
margin: 0;
border: 0;
outline: none;
background: transparent;
font-family: inherit;
font-size: 12px;
font-weight: 500;
line-height: 1.334;
letter-spacing: 0.3024px; /* Caption 1/Medium */
color: var(--semantic-static-white); /* 입력값 색은 Figma 미정의 → Static/White */
}
.bg-topbar-search__field::placeholder { color: var(--semantic-atomic-brgnavy-100); opacity: 1; }
.bg-topbar-search > .bg-menu {
position: absolute;
top: 32px;
left: 0;
z-index: 30;
}
.bg-topbar-search[data-expended="false"] > .bg-menu { display: none; }
/* ---------- Rail ---------- */
.bg-rail {
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
width: 72px;
height: 100%;
padding: 8px;
background: var(--semantic-atomic-brgnavy-500);
box-shadow: inset -1px 0 0 var(--semantic-atomic-brgnavy-300); /* border-right 1px (inside) */
overflow: hidden;
font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
.bg-rail__menus,
.bg-rail__common {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Rail/Resource/Menu — Status: Default / Hover / Active */
.bg-rail-menu {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
box-sizing: border-box;
width: 56px;
padding: 6px 8px;
margin: 0;
border: 0;
border-radius: 10px;
background: transparent;
cursor: pointer;
font-family: inherit;
color: var(--semantic-static-white);
-webkit-tap-highlight-color: transparent;
}
.bg-rail-menu__icon {
display: inline-flex;
width: 20px;
height: 20px;
color: var(--semantic-static-white);
}
.bg-rail-menu__icon svg { width: 100%; height: 100%; display: block; }
.bg-rail-menu__label {
display: flex;
justify-content: center;
width: 40px;
font-size: 11px;
font-weight: 400;
line-height: 1.273;
letter-spacing: 0.3421px; /* Caption 2/Regular */
color: var(--semantic-atomic-brgnavy-75);
white-space: nowrap;
}
.bg-rail-menu:hover,
.bg-rail-menu[data-status="hover"] { background: var(--semantic-atomic-brgnavy-300); }
.bg-rail-menu[data-status="active"] { background: var(--semantic-atomic-brgorange-300); }
.bg-rail-menu[data-status="active"] .bg-rail-menu__label {
color: var(--semantic-static-white);
font-weight: 600; /* Caption 2/Bold */
}
.bg-rail-menu:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }
/* ---------- Nav ---------- */
.bg-nav {
display: flex;
flex-direction: column;
gap: 20px;
box-sizing: border-box;
width: 236px;
height: 100%;
padding: 8px;
background: var(--semantic-atomic-brgnavy-400);
overflow-x: hidden;
overflow-y: auto;
font-family: 'Pretendard Variable', Pretendard, -apple-system, sans-serif;
}
/* Nav/Resource/Header */
.bg-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
padding: 0 10px;
flex-shrink: 0;
}
.bg-nav-header__text {
display: flex;
flex-direction: column;
gap: 2px;
flex: 1;
min-width: 0;
}
/* 접기 버튼: Outlined 버튼이 Static/White 로 바뀌었지만 어두운 Nav 위에서는 투명 유지 (Figma Nav/Resource/Header 인스턴스 override) */
.bg-nav-header .bg-button[data-variant="outlined"] { background: transparent; }
.bg-nav-header__space {
font-size: 12px;
font-weight: 500;
line-height: 1.334;
letter-spacing: 0.3024px; /* Caption 1/Medium */
color: var(--semantic-atomic-brgnavy-75);
}
.bg-nav-header__menu {
font-size: 18px;
font-weight: 700;
line-height: 1.445;
letter-spacing: -0.0036px; /* Headline 1/Bold */
color: var(--semantic-static-white);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Nav/Resource/MenuCategory — Expended: True / False */
.bg-nav-category {
display: flex;
flex-direction: column;
gap: 8px;
box-sizing: border-box;
width: 100%;
padding: 0 10px;
flex-shrink: 0;
}
.bg-nav-category__menus {
display: flex;
flex-direction: column;
gap: 8px;
}
.bg-nav-category[data-expended="false"] > .bg-nav-category__menus { display: none; }
/* Nav/Resource/CategoryHeader — Expended: True / False */
.bg-nav-category-header {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
height: 16px;
padding: 0 6px 0 0;
margin: 0;
border: 0;
background: none;
cursor: pointer;
font-family: inherit;
text-align: left;
}
.bg-nav-category-header__label {
font-size: 12px;
font-weight: 500;
line-height: 1.334;
letter-spacing: 0.3024px; /* Caption 1/Medium */
color: var(--semantic-atomic-brgnavy-75);
white-space: nowrap;
}
.bg-nav-category-header__icon {
display: inline-flex;
width: 16px;
height: 16px;
color: var(--semantic-atomic-brgnavy-75);
}
.bg-nav-category-header__icon svg { width: 100%; height: 100%; display: block; }
.bg-nav-category-header:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 2px; }
/* Nav/Resource/Menu — Status: Default / Hover / Active */
.bg-nav-menu {
display: flex;
align-items: center;
justify-content: space-between;
box-sizing: border-box;
width: 100%;
height: 32px;
padding: 6px 10px;
border-radius: 8px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.bg-nav-menu__label {
flex: 1;
min-width: 0;
font-size: 14px;
font-weight: 500;
line-height: 1.429;
letter-spacing: 0.203px; /* Label 1/Normal - Medium */
color: var(--semantic-static-white);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.bg-nav-menu:hover,
.bg-nav-menu[data-status="hover"] { background: var(--semantic-atomic-brgnavy-300); }
.bg-nav-menu[data-status="active"] { background: var(--semantic-atomic-brgorange-300); }
.bg-nav-menu:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: -2px; }
/* Nav/Resource/Star — Active: False / True */
.bg-nav-star {
display: inline-flex;
width: 16px;
height: 16px;
padding: 0;
margin: 0;
border: 0;
background: none;
cursor: pointer;
flex-shrink: 0;
color: var(--semantic-bg-transparent-alt); /* Background/Transparent/Alternative */
}
.bg-nav-star[data-active="true"] { color: var(--semantic-atomic-yellow-100); }
.bg-nav-star svg { width: 100%; height: 100%; display: block; }
.bg-nav-star:focus-visible { outline: 2px solid var(--semantic-primary-orange); outline-offset: 1px; border-radius: 2px; }