* { margin:0; padding:0; box-sizing:border-box; }
body {
  font-family:var(--font-base);
  background:var(--bg); color:var(--text); min-height:100vh;
}

/* ── Main ── */
.home-main { max-width:1400px; margin:0 auto; padding:32px; padding-top:calc(var(--hd-h) + 32px); }

/* ── Hero banner ── */
.home-hero {
  display:flex; align-items:center; gap:20px;
  padding:20px 28px; margin-bottom:28px;
  background:var(--bg2); border:1px solid var(--border); border-radius:14px;
  border-left:4px solid var(--accent);
  box-shadow:0 2px 12px var(--shadow);
}
.home-hero-icon {
  width:52px; height:52px; border-radius:10px; flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
  font-size:20px; font-weight:800; color:#fff; letter-spacing:-.02em;
}
.home-hero-body { flex:1; min-width:0; }
.home-hero-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--accent); margin-bottom:4px; }
.home-hero-name { font-size:18px; font-weight:800; color:var(--heading); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.home-hero-meta { font-size:12px; color:var(--dim); margin-top:3px; }
.home-hero-actions { display:flex; gap:8px; flex-shrink:0; }

/* ── Stats bar ── */
.home-stats { display:flex; gap:16px; margin-bottom:32px; }
.home-stat-card {
  flex:1; padding:18px 22px; background:var(--bg2);
  border:1px solid var(--border); border-radius:12px;
  transition:box-shadow .2s;
}
.home-stat-card:hover { box-shadow:0 4px 16px var(--shadow); }
.home-stat-label { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--dim); margin-bottom:4px; }
.home-stat-value { font-size:26px; font-weight:800; color:var(--heading); }

/* ── Section header ── */
.home-section-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:20px; }
.home-section-title { font-size:17px; font-weight:700; color:var(--heading); }
.home-section-controls { display:flex; gap:8px; align-items:center; }
.home-sort {
  padding:5px 12px; border:1px solid var(--border); border-radius:6px;
  font-size:12px; font-weight:600; color:var(--dim); background:var(--bg2);
  font-family:inherit; cursor:pointer; outline:none; transition:border-color .15s;
}
.home-sort:hover { border-color:var(--accent); color:var(--text); }
.home-tabs { display:flex; gap:0; border:1px solid var(--border); border-radius:6px; overflow:hidden; }
.home-tab {
  padding:6px 14px; font-size:12px; font-weight:600; cursor:pointer;
  border:none; background:var(--bg2); color:var(--dim); font-family:inherit;
  border-right:1px solid var(--border); transition:all .15s;
}
.home-tab:last-child { border-right:none; }
.home-tab.active { background:var(--accent); color:#fff; }
.home-tab:hover:not(.active) { background:var(--bg3); }

/* ── Slot card grid (Poster 톤: 카드 전체 BI · 하단 strip · 액션 단일) ── */
.home-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));
  gap:18px;
}
.slot-card {
  position:relative; overflow:hidden;
  background:var(--bg2);
  border:1px solid var(--border); border-radius:12px;
  cursor:default;
  aspect-ratio: 2 / 1;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.slot-card:hover {
  transform: translateY(-2px); border-color: var(--accent);
  box-shadow: 0 10px 28px -12px var(--shadow);
}

/* BI thumb 는 카드 전체 채움. background-image 는 home-entry.ts 가 inline 으로 박음.
   size/position 은 여기서 통제 (size 120%, BI 살짝 위로). */
.slot-card .slot-card-thumb {
  position:absolute; inset:0; z-index:0;
  height:auto;
  background-size: 120%;
  background-position: center -15px;
  background-repeat: no-repeat;
  display:block;
}
/* Placeholder (BI 없는 카드 fallback) — gradient + reel grid + initials 라벨. */
.slot-reel-grid {
  width:100%; height:100%;
  display:flex; flex-direction:column; padding:18px; gap:5px;
  position:relative; z-index:1;
}
.slot-reel-row { display:flex; flex:1; gap:5px; }
.slot-reel-cell {
  flex:1; border-radius:4px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.1);
  transition: background .2s;
}
.slot-card:hover .slot-reel-cell { background:rgba(255,255,255,.2); }
.slot-card-thumb-label {
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  z-index:1;
  font-size:30px; font-weight:800;
  color: rgba(255,255,255,.32);
  letter-spacing:-.02em;
  pointer-events:none;
}

/* BI 있는 카드는 placeholder 숨김 — BI 가 시각의 핵심. */
.slot-card.has-bi .slot-reel-grid,
.slot-card.has-bi .slot-card-thumb-label { display:none; }

/* ── Status + step badges (BI 위 오버레이) ── */
.slot-card-status {
  position:absolute; top:12px; right:12px; z-index:3;
  padding:4px 11px; border-radius:999px;
  font-size:11px; font-weight:600; pointer-events:none;
}
.status-complete { background:var(--green); color:#fff; }
.status-mockup   { background:#8e64c8; color:#fff; }
.status-error    { background:var(--red); color:#fff; }
.status-draft    { background:rgba(0,0,0,.55); color:rgba(255,255,255,.9); }

@keyframes ob-spin { to { transform: rotate(360deg); } }

.slot-card-step {
  position:absolute; top:12px; left:12px; z-index:3;
  padding:3px 9px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.03em;
  background:rgba(0,0,0,.55); color:#fff;
  pointer-events:none;
}

/* ── Build job progress strip (카드 하단, body 위에 — 빌드 중에만 노출) ── */
.slot-card-job {
  position:absolute; left:0; right:0; bottom:0; z-index:4;
  padding:9px 14px 11px;
  background:rgba(0,0,0,.88); color:#fff;
  font-size:11px;
}
.slot-card-job-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.slot-card-job-spinner {
  display:inline-block; width:11px; height:11px; flex-shrink:0;
  border:1.5px solid rgba(0,135,153,.3); border-top-color:var(--accent);
  border-radius:50%; animation:ob-spin .8s linear infinite;
}
.slot-card-job-status { font-weight:600; color:var(--accent); }
.slot-card-job-status.done  { color:var(--green); }
.slot-card-job-status.error { color:var(--red); }
.slot-card-job-log {
  color:rgba(255,255,255,.65); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ── Card body = absolute bottom strip (한 줄: 이름 + ⓘ + 액션) ── */
.slot-card-body {
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  padding:18px 12px 12px;
  display:flex; align-items:center; gap:10px;
  background: linear-gradient(0deg, rgba(0,0,0,.85) 0%, rgba(0,0,0,.5) 55%, rgba(0,0,0,0) 100%);
  color:#fff;
}
.slot-card-name-row {
  flex:1; min-width:0;
  display:flex; align-items:center; gap:6px;
}
.slot-card-name {
  flex:1; min-width:0;
  font-size:14px; font-weight:700; color:#fff;
  letter-spacing:-.012em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 6px rgba(0,0,0,.5);
}
.slot-card-info-btn {
  flex:none; width:20px; height:20px; border-radius:50%;
  border:1px solid rgba(255,255,255,.3);
  background:rgba(0,0,0,.35); color:rgba(255,255,255,.92);
  font-size:11px; font-weight:700;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
  position:relative; line-height:1; padding:0;
  transition: background .15s, border-color .15s;
}
.slot-card-info-btn:hover {
  background:rgba(0,0,0,.55); border-color:rgba(255,255,255,.55);
}
.slot-card-tooltip {
  display:none; position:fixed;
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  padding:11px 14px; min-width:220px; max-width:300px; z-index:9999;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
  white-space:normal; pointer-events:none;
}
.slot-card-tooltip::after {
  content:''; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:6px solid transparent; border-top-color:var(--border);
}
.slot-card-tooltip-row { display:flex; gap:6px; font-size:11px; line-height:1.65; }
.slot-card-tooltip-label { color:var(--dim); flex:none; min-width:52px; }
.slot-card-tooltip-val { color:var(--text); word-break:break-all; }
.slot-card-tooltip-tags { display:flex; gap:4px; flex-wrap:wrap; margin-top:6px; }
.slot-card-tooltip-tag {
  padding:2px 8px; border-radius:999px; font-size:10px; font-weight:500;
  background:var(--bg3); color:var(--dim); border:1px solid var(--border);
}

/* ── Action buttons (BI 위 톤 — 보조 버튼은 모두 흰 반투명) ── */
.slot-card-actions { flex:none; display:flex; gap:5px; }
.slot-card-btn {
  padding:6px 10px; border-radius:6px; border:none;
  font-size:11px; font-weight:600; cursor:pointer; font-family:inherit;
  transition: filter .15s, background .15s, color .15s, border-color .15s;
}
.slot-card-btn-play { background:var(--green); color:#fff; }
.slot-card-btn-play:hover { filter: brightness(1.1); }
.slot-card-btn-edit { background:var(--accent); color:#fff; }
.slot-card-btn-edit:hover { filter: brightness(1.1); }
.slot-card-btn-test { background:#b35c00; color:#fff; }
.slot-card-btn-test:hover { filter: brightness(1.12); }
.slot-card-btn-view {
  background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.slot-card-btn-view:hover { background:rgba(255,255,255,.25); }
.slot-card-btn-clone {
  background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.slot-card-btn-clone:hover { background:rgba(255,255,255,.25); }
.slot-card-btn-export {
  background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.slot-card-btn-export:hover { background:rgba(255,255,255,.25); }
.slot-card-btn-copy {
  background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
.slot-card-btn-copy:hover { background:rgba(255,255,255,.25); }
.slot-card-btn-del {
  background:rgba(184,40,56,.45); color:#fff;
  border:1px solid rgba(184,40,56,.65);
  flex:none; padding:6px 10px;
}
.slot-card-btn-del:hover { background:rgba(184,40,56,.65); border-color:var(--red); }

/* ── Settings (gear) — BI 위 톤 ── */
.slot-card-settings-wrap { position:relative; flex:none; }
.slot-card-settings-btn {
  background:rgba(255,255,255,.15); color:#fff;
  border:1px solid rgba(255,255,255,.25);
  flex:none; padding:7px 10px; line-height:1;
  transition: background .15s, border-color .15s;
}
.slot-card-settings-btn:hover { background:rgba(255,255,255,.25); border-color:rgba(255,255,255,.4); }
.slot-card-settings-btn.active {
  background:var(--accent); color:#fff; border-color:var(--accent);
}
.slot-card-settings-menu {
  display:none; flex-direction:column;
  position:absolute; right:0; bottom:calc(100% + 8px); z-index:20;
  min-width:170px; padding:5px 0;
  background:var(--bg2); border:1px solid var(--border); border-radius:8px;
  box-shadow:0 8px 24px var(--shadow);
}
.slot-card-settings-menu.show { display:flex; }
.slot-card-settings-item {
  background:none; border:none; cursor:pointer; font-family:inherit;
  text-align:left; padding:9px 14px;
  font-size:12px; font-weight:600; color:var(--text);
  transition: background .15s, color .15s;
}
.slot-card-settings-item:hover { background:var(--bg3); }
.slot-card-settings-item.danger { color:var(--red); }
.slot-card-settings-item.danger:hover { background:rgba(184,40,56,.12); }

/* ── Inline delete confirm overlay ── */
.slot-card-confirm {
  display:none;
  position:absolute; inset:0; z-index:10;
  background:rgba(12,18,24,.86);
  flex-direction:column; align-items:center; justify-content:center; gap:14px;
  border-radius:12px;
}
.slot-card-confirm.show { display:flex; animation: slot-confirm-in .2s ease-out; }
@keyframes slot-confirm-in {
  from { opacity:0; }
  to   { opacity:1; }
}
.slot-card-confirm-text { font-size:14px; font-weight:700; color:#fff; }
.slot-card-confirm-sub { font-size:11px; color:rgba(255,255,255,.6); margin-top:-8px; }
.slot-card-confirm-btns { display:flex; gap:8px; }
.slot-card-confirm-ok {
  padding:8px 20px; border-radius:6px; border:none;
  background:var(--red); color:#fff; font-weight:700;
  cursor:pointer; font-size:13px; font-family:inherit;
  transition: filter .15s;
}
.slot-card-confirm-ok:hover { filter: brightness(1.1); }
.slot-card-confirm-cancel {
  padding:8px 20px; border-radius:6px;
  background:rgba(255,255,255,.12); color:#fff;
  border:1px solid rgba(255,255,255,.3);
  cursor:pointer; font-family:inherit;
  font-size:13px; font-weight:600;
  transition: background .15s;
}
.slot-card-confirm-cancel:hover { background:rgba(255,255,255,.22); }

/* ── Empty state ── */
.home-empty {
  grid-column:1/-1; padding:80px 20px; text-align:center;
  color:var(--dim); font-size:15px;
}
.home-empty-icon { font-size:56px; margin-bottom:16px; opacity:.25; }
.home-empty-sub { font-size:13px; margin-top:8px; color:var(--dim); opacity:.7; }
.home-empty-btn {
  display:inline-block; margin-top:20px;
  padding:10px 28px; border-radius:8px;
  background:var(--accent); color:#fff; font-weight:600; font-size:14px;
  text-decoration:none; transition: filter .15s;
}
.home-empty-btn:hover { filter: brightness(1.1); }

/* ── Built-in badge ── */
.slot-card-builtin-badge {
  position:absolute; top:12px; left:12px; z-index:3;
  padding:3px 9px; border-radius:999px;
  font-size:10px; font-weight:700; letter-spacing:.03em;
  background:rgba(0,0,0,.5); color:rgba(255,255,255,.8);
}

/* ── Library section ── */
.home-library-section { margin-bottom:40px; }

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .slot-card { transition: box-shadow .15s, border-color .15s; }
  .slot-card:hover { transform: none; }
  .slot-card-confirm.show { animation: none; }
}