/* 자동 생성 — 원본은 packages/ui/binnie-ui.css */
/* Binnie 생성형 UI 컴포넌트. 각진(0~4px) 단색 다크. 색은 호스트 변수(--accent 등)를 우선 쓰고 없으면 기본값. */
.bui-block { --b-accent: var(--accent, var(--bn-accent, #3b82f6)); --b-line: var(--line, var(--bn-line, #262a33)); --b-surface: var(--surface, var(--bn-surface, #14161b)); --b-surface2: var(--surface-2, var(--bn-surface-2, #1b1e26)); --b-text: var(--text, var(--bn-text, #e6e8ee)); --b-muted: var(--muted, var(--bn-muted, #9aa0ad)); margin: 12px 0; color: var(--b-text); }
.bui-block:first-child { margin-top: 4px; } .bui-block:last-child { margin-bottom: 4px; }
.bui-block p, .bui-block ul, .bui-block ol { margin: .35em 0; } .bui-block ul, .bui-block ol { padding-left: 1.2em; }
.bui-block a { color: var(--b-accent); text-decoration: none; } .bui-block code { background: var(--b-surface2); padding: 1px 5px; border-radius: 3px; font-size: .9em; }

.bui-h { margin: 0; font-weight: 700; letter-spacing: -.01em; } .bui-h1 { font-size: 1.35em; } .bui-h2 { font-size: 1.12em; color: var(--b-accent); } .bui-h3 { font-size: 1em; }
.bui-heading + .bui-block { margin-top: 6px; }

.bui-stats { display: grid; gap: 8px; } .bui-cols-1 { grid-template-columns: 1fr; } .bui-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .bui-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bui-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.bui-stat { background: var(--b-surface2); border: 1px solid var(--b-line); border-radius: 4px; padding: 10px 12px; }
.bui-stat-v { font-size: 1.25em; font-weight: 700; line-height: 1.2; } .bui-stat-l { font-size: .82em; color: var(--b-muted); margin-top: 3px; } .bui-stat-h { font-size: .78em; color: var(--b-accent); margin-top: 2px; }

.bui-cards { display: grid; gap: 10px; }
.bui-card { background: var(--b-surface2); border: 1px solid var(--b-line); border-radius: 4px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.bui-card-t { margin: 0; font-size: 1em; font-weight: 700; } .bui-card-s { font-size: .82em; color: var(--b-muted); margin-top: 2px; }
.bui-card-b { font-size: .93em; } .bui-card-b p { margin: .25em 0; }
.bui-meta { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: .85em; } .bui-meta > div { display: contents; } .bui-meta dt { color: var(--b-muted); white-space: nowrap; } .bui-meta dd { margin: 0; }
.bui-tags { display: flex; flex-wrap: wrap; gap: 5px; } .bui-tag { font-size: .76em; padding: 2px 7px; border: 1px solid var(--b-line); border-radius: 3px; color: var(--b-muted); background: var(--b-surface); }
.bui-links-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.bui-btn { display: inline-block; font-size: .82em; padding: 5px 10px; border: 1px solid var(--b-accent); border-radius: 3px; color: var(--b-accent) !important; } .bui-btn:hover { background: var(--b-accent); color: #fff !important; }

.bui-tablewrap { overflow-x: auto; } .bui-table { border-collapse: collapse; width: 100%; font-size: .9em; } .bui-table caption { text-align: left; color: var(--b-muted); font-size: .85em; padding: 0 0 6px; }
.bui-table th, .bui-table td { border: 1px solid var(--b-line); padding: 6px 10px; text-align: left; vertical-align: top; } .bui-table th { background: var(--b-surface2); font-weight: 600; white-space: nowrap; }
.bui-compare th[scope=row] { background: var(--b-surface); color: var(--b-muted); font-weight: 500; }

.bui-timeline { list-style: none; margin: 0; padding: 0 0 0 14px; border-left: 2px solid var(--b-line); display: flex; flex-direction: column; gap: 12px; }
.bui-tl-item { position: relative; } .bui-tl-item::before { content: ""; position: absolute; left: -19px; top: 6px; width: 8px; height: 8px; background: var(--b-accent); border-radius: 1px; }
.bui-tl-date { font-size: .8em; color: var(--b-accent); font-variant-numeric: tabular-nums; } .bui-tl-title { font-weight: 600; } .bui-tl-text { font-size: .92em; color: var(--b-text); } .bui-tl-text p { margin: .2em 0; }

.bui-list { margin: 0; } .bui-list li { margin: .18em 0; } .bui-list-check { list-style: none; padding-left: 0; } .bui-list-check li::before { content: "✓ "; color: var(--b-accent); font-weight: 700; }
.bui-chips { display: flex; flex-wrap: wrap; gap: 6px; } .bui-chip { font-size: .85em; padding: 4px 10px; border-radius: 3px; border: 1px solid var(--b-line); background: var(--b-surface2); }
.bui-chip-accent { border-color: var(--b-accent); color: var(--b-accent); } .bui-chip-ok { border-color: #22c55e; color: #4ade80; } .bui-chip-warn { border-color: #f59e0b; color: #fbbf24; }
.bui-callout { border: 1px solid var(--b-line); border-left: 3px solid var(--b-accent); background: var(--b-surface2); padding: 10px 12px; border-radius: 4px; font-size: .95em; }
.bui-callout-ok { border-left-color: #22c55e; } .bui-callout-warn { border-left-color: #f59e0b; }
.bui-progress { display: flex; flex-direction: column; gap: 8px; } .bui-prog-head { display: flex; justify-content: space-between; font-size: .88em; margin-bottom: 4px; } .bui-prog-hint { color: var(--b-muted); }
.bui-prog-bar { height: 8px; background: var(--b-surface2); border: 1px solid var(--b-line); border-radius: 2px; overflow: hidden; } .bui-prog-fill { height: 100%; background: var(--b-accent); }
.bui-links { display: grid; gap: 6px; } .bui-link { display: flex; flex-direction: column; gap: 2px; padding: 9px 12px; border: 1px solid var(--b-line); border-radius: 4px; background: var(--b-surface2); } .bui-link:hover { border-color: var(--b-accent); } .bui-link-l { font-weight: 600; } .bui-link-d { font-size: .85em; color: var(--b-muted); }
.bui-divider { border: 0; border-top: 1px solid var(--b-line); margin: 6px 0; }
.bui-columns { display: grid; gap: 12px; } .bui-col { min-width: 0; }

.bui-pagecard { display: block; margin: 10px 0 4px; padding: 12px 14px; border: 1px solid var(--accent, var(--bn-accent, #3b82f6)); border-radius: 4px; background: var(--surface-2, var(--bn-surface-2, #1b1e26)); color: var(--text, var(--bn-text, #e6e8ee)) !important; text-decoration: none; }
.bui-pagecard:hover { background: rgba(59,130,246,.12); }
.bui-pagecard-k { font-size: .74em; letter-spacing: .06em; text-transform: uppercase; color: var(--accent, var(--bn-accent, #3b82f6)); font-weight: 700; }
.bui-pagecard-t { font-weight: 700; margin-top: 3px; } .bui-pagecard-s { font-size: .88em; color: var(--muted, var(--bn-muted, #9aa0ad)); margin-top: 3px; } .bui-pagecard-a { font-size: .8em; color: var(--accent, var(--bn-accent, #3b82f6)); margin-top: 8px; }

@media (max-width: 560px) { .bui-cols-2, .bui-cols-3, .bui-cols-4 { grid-template-columns: 1fr 1fr; } .bui-cards.bui-cols-2, .bui-cards.bui-cols-3, .bui-columns { grid-template-columns: 1fr; } .bui-stats.bui-cols-3, .bui-stats.bui-cols-4 { grid-template-columns: 1fr 1fr; } }