/* CODEBAILEY · Solution page enhancement styles */

/* === Browser-style mockup === */
.cb-mockup { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; box-shadow:0 24px 48px rgba(46,46,46,0.10); }
.cb-mockup-bar { background:var(--surface-soft); padding:10px 16px; display:flex; align-items:center; gap:8px; border-bottom:1px solid var(--hairline); }
.cb-mockup-dot { width:11px; height:11px; border-radius:50%; display:inline-block; }
.cb-mockup-url { font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; color:var(--muted); margin-left:12px; letter-spacing:0.3px; }
.cb-mockup-grid { display:grid; grid-template-columns:220px 1fr; min-height:520px; }
.cb-mockup-side { background:#171717; color:#cdcdcd; padding:var(--sp-lg); }
.cb-mockup-brand { font-family:'Plus Jakarta Sans', sans-serif; font-weight:800; font-size:16px; color:#f5d465; margin-bottom:var(--sp-lg); letter-spacing:-0.5px; }
.cb-mockup-side ul { list-style:none; padding:0; margin:0; }
.cb-mockup-side li { padding:8px 12px; font-size:12px; font-weight:600; letter-spacing:0.4px; border-radius:6px; margin-bottom:2px; color:#8e8e8e; cursor:default; }
.cb-mockup-side li.active { background:rgba(255,255,255,0.10); color:#ffffff; }
.cb-mockup-side li::before { content:"› "; color:#5a5a5a; }
.cb-mockup-side li.active::before { color:#f5d465; }
.cb-mockup-main { padding:var(--sp-xl); background:var(--canvas); }
.cb-mockup-toprow { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--sp-lg); }
.cb-mockup-title { font-size:18px; font-weight:800; color:var(--on-dark); letter-spacing:-0.4px; }
.cb-mockup-chip { font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; padding:4px 10px; background:#dcf2e0; color:#16a34a; border-radius:999px; letter-spacing:0.4px; }
.cb-mockup-kpis { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-sm); margin-bottom:var(--sp-md); }
.cb-mockup-kpi { background:var(--surface-card); border:1px solid var(--hairline); padding:var(--sp-md); border-radius:var(--r-sm); border-left:3px solid var(--cb-coral); }
.cb-mockup-kpi .lbl { font-size:10px; font-weight:700; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; }
.cb-mockup-kpi .val { font-size:22px; font-weight:800; color:var(--on-dark); letter-spacing:-0.5px; }
.cb-mockup-kpi .delta { font-size:10px; font-weight:700; color:#16a34a; margin-left:6px; }
.cb-mockup-card { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:var(--sp-md); margin-bottom:var(--sp-sm); }
.cb-mockup-card-title { font-size:10px; font-weight:800; letter-spacing:1.4px; text-transform:uppercase; color:var(--cb-coral); margin-bottom:var(--sp-sm); }
.cb-mockup-flow { display:flex; align-items:center; flex-wrap:wrap; gap:6px; }
.cb-mockup-node { padding:6px 12px; background:var(--surface-soft); border:1px solid var(--hairline); border-radius:6px; font-family:'JetBrains Mono', monospace; font-size:11px; color:var(--on-dark); font-weight:600; }
.cb-mockup-arrow { color:var(--cb-coral); font-weight:800; font-size:14px; }
.cb-mockup-log { display:grid; grid-template-columns:60px 1fr 70px; gap:var(--sp-sm); padding:6px 0; border-bottom:1px dashed var(--hairline); font-family:'JetBrains Mono', monospace; font-size:11px; }
.cb-mockup-log:last-child { border-bottom:none; }
.cb-mockup-log .t { color:var(--muted); }
.cb-mockup-log .s { font-weight:600; color:var(--on-dark); }
.cb-mockup-log .ok { color:#16a34a; text-align:right; font-weight:700; }
.cb-mockup-log .warn { color:#f59e0b; text-align:right; font-weight:700; }
.cb-mockup-log .err { color:#dc2626; text-align:right; font-weight:700; }

/* === Workflow / pipeline === */
.cb-workflow { display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-md); position:relative; }
.cb-wf-step { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-md); padding:var(--sp-lg); position:relative; }
.cb-wf-step::after { content:"›"; position:absolute; right:calc(-1 * var(--sp-md) / 2 - 6px); top:50%; transform:translateY(-50%); color:var(--cb-coral); font-weight:800; font-size:24px; z-index:1; }
.cb-wf-step:last-child::after { display:none; }
.cb-wf-num { font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:800; letter-spacing:1.4px; color:var(--cb-coral); margin-bottom:var(--sp-sm); }
.cb-wf-step h4 { font-size:15px; font-weight:700; margin-bottom:var(--sp-xs); color:var(--on-dark); }
.cb-wf-step p { font-size:12.5px; line-height:1.6; color:var(--body); margin:0; }

/* === Feature grid === */
.cb-feature-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-md); }
.cb-feature { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-md); padding:var(--sp-lg); transition:transform 0.18s, box-shadow 0.18s, border-color 0.18s; }
.cb-feature:hover { transform:translateY(-2px); box-shadow:0 12px 24px rgba(46,46,46,0.08); border-color:var(--cb-coral); }
.cb-feature-icon { width:40px; height:40px; background:#171717; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; font-family:'JetBrains Mono', monospace; font-size:13px; font-weight:800; color:#f5d465; margin-bottom:var(--sp-md); letter-spacing:-0.3px; }
.cb-feature h4 { font-size:15px; font-weight:700; margin-bottom:6px; color:var(--on-dark); }
.cb-feature p { font-size:12.5px; color:var(--body); line-height:1.55; margin:0; }

/* === Code blocks with tabs === */
.cb-code-wrap { background:#0e0e0e; border-radius:var(--r-md); overflow:hidden; border:1px solid #1f1f1f; }
.cb-code-tabs { display:flex; gap:0; background:#1a1a1a; border-bottom:1px solid #2a2a2a; }
.cb-code-tab { padding:11px 20px; background:transparent; border:none; font-family:'JetBrains Mono', monospace; font-size:12px; font-weight:700; color:#7a7a7a; letter-spacing:0.5px; cursor:pointer; border-bottom:2px solid transparent; }
.cb-code-tab.active { color:#f5d465; border-bottom-color:#f5d465; }
.cb-code-body { padding:var(--sp-lg); }
.cb-code-pre { font-family:'JetBrains Mono', monospace; font-size:12.5px; line-height:1.75; color:#e5e5e5; margin:0; white-space:pre-wrap; word-break:break-word; }
.cb-code-pre .k { color:#79b8ff; }
.cb-code-pre .s { color:#f9c275; }
.cb-code-pre .c { color:#7a7a7a; font-style:italic; }
.cb-code-pre .v { color:#85e89d; }
.cb-code-pre .o { color:#ff6b6b; }
.cb-code-pre .n { color:#c8a8ff; }

/* === Product preview — 탭 제거, 모든 화면을 세로로 펼쳐 나열 === */
.cb-screens-tabs { display:none; }
.cb-screen { display:block; }
.cb-screen + .cb-screen { border-top:10px solid var(--surface-soft); }
.cb-screen.active { animation:cb-fade 0.22s ease; }
@keyframes cb-fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:translateY(0); } }
/* 펼친 화면 사이 구분용 화면 라벨 (각 화면 상단에 표시) */
.cb-screen-label { display:flex; align-items:center; gap:9px; padding:11px var(--sp-lg); background:#fafafa; border-bottom:1px solid var(--hairline); font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:700; letter-spacing:0.4px; color:var(--body-strong); }
.cb-screen-label .n { display:inline-flex; align-items:center; justify-content:center; min-width:20px; height:20px; padding:0 6px; border-radius:5px; background:#171717; color:#f5d465; font-size:10px; font-weight:800; }
.cb-screen-label .u { margin-left:auto; color:var(--muted); font-weight:600; font-size:10px; }

/* === Catalog / table screen === */
.cb-cat-search { display:flex; align-items:center; gap:var(--sp-sm); padding:10px var(--sp-md); background:var(--surface-soft); border:1px solid var(--hairline); border-radius:8px; margin-bottom:var(--sp-md); font-family:'JetBrains Mono', monospace; font-size:11.5px; }
.cb-cat-search .icon { color:var(--cb-coral); font-weight:800; }
.cb-cat-search .ph { color:var(--muted); margin-left:auto; font-size:10.5px; }
.cb-cat-filters { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:var(--sp-md); }
.cb-cat-chip { padding:5px 12px; background:var(--surface-soft); border:1px solid var(--hairline); border-radius:999px; font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:600; color:var(--body-strong); }
.cb-cat-chip.on { background:#171717; color:#f5d465; border-color:#171717; }
.cb-cat-table { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-sm); overflow:hidden; }
.cb-cat-row { display:grid; grid-template-columns:1.7fr 1.3fr 0.8fr 0.55fr 0.25fr; gap:var(--sp-md); padding:10px 14px; align-items:center; border-bottom:1px solid var(--hairline); font-size:11.5px; }
.cb-cat-row:last-child { border-bottom:none; }
.cb-cat-row.head { background:var(--surface-soft); font-size:9.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); padding:8px 14px; }
.cb-cat-row .name { font-family:'JetBrains Mono', monospace; font-weight:700; color:var(--on-dark); }
.cb-cat-row .name .ns { color:var(--muted); font-weight:500; }
.cb-cat-row .tags { display:flex; flex-wrap:wrap; gap:4px; }
.cb-cat-tag { padding:2px 7px; background:var(--surface-soft); border:1px solid var(--hairline); border-radius:4px; font-size:9.5px; font-weight:700; color:var(--body-strong); font-family:'JetBrains Mono', monospace; letter-spacing:0.2px; }
.cb-cat-tag.gold { background:#fef3c7; border-color:#f6c454; color:#92400e; }
.cb-cat-tag.pii { background:#fde8e8; border-color:#f3a4a4; color:#9b2c2c; }
.cb-cat-tag.dom { background:#e0e7ff; border-color:#a5b4fc; color:#3730a3; }
.cb-cat-row .owner { color:var(--body); }
.cb-cat-row .qual { font-weight:700; color:#16a34a; font-family:'JetBrains Mono', monospace; }
.cb-cat-row .qual.warn { color:#f59e0b; }
.cb-cat-row .arrow { color:var(--muted); text-align:right; }

/* === Lineage / graph screen === */
.cb-line { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-sm); padding:var(--sp-md); }
.cb-line-graph { display:grid; grid-template-columns:repeat(5, 1fr); gap:var(--sp-sm); align-items:start; position:relative; }
.cb-line-col { display:flex; flex-direction:column; gap:6px; position:relative; }
.cb-line-col-head { font-size:9.5px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; color:var(--muted); margin-bottom:4px; text-align:center; padding-bottom:6px; border-bottom:1px dashed var(--hairline); }
.cb-line-node { background:var(--surface-soft); border:1px solid var(--hairline); border-radius:6px; padding:8px 10px; font-family:'JetBrains Mono', monospace; font-size:10.5px; font-weight:700; color:var(--on-dark); text-align:center; position:relative; }
.cb-line-node.sel { background:#fef3c7; border-color:#f5d465; color:#92400e; box-shadow:0 0 0 3px rgba(245,212,101,0.30); }
.cb-line-node small { display:block; font-weight:500; color:var(--muted); font-size:9.5px; margin-top:3px; }
.cb-line-node.sel small { color:#92400e; opacity:0.75; }

/* === Specification table === */
.cb-specs { display:grid; grid-template-columns:repeat(2, 1fr); gap:var(--sp-lg); }
.cb-spec-group { background:var(--surface-card); border:1px solid var(--hairline); border-radius:var(--r-md); overflow:hidden; }
.cb-spec-group-head { background:#171717; color:#fff; padding:var(--sp-md) var(--sp-lg); display:flex; align-items:center; gap:var(--sp-md); }
.cb-spec-group-num { font-family:'JetBrains Mono', monospace; font-size:11px; font-weight:800; color:#f5d465; letter-spacing:1px; }
.cb-spec-group-title { font-size:14px; font-weight:800; color:#fff; letter-spacing:-0.2px; }
.cb-spec-row { display:grid; grid-template-columns:1fr 1.3fr; padding:10px var(--sp-lg); border-bottom:1px dashed var(--hairline); font-size:12.5px; align-items:start; gap:var(--sp-md); }
.cb-spec-row:last-child { border-bottom:none; }
.cb-spec-key { color:var(--muted); font-weight:600; }
.cb-spec-val { color:var(--on-dark); font-weight:700; font-family:'JetBrains Mono', monospace; }
.cb-spec-tags { display:flex; flex-wrap:wrap; gap:4px; }
.cb-spec-tags .t { padding:2px 7px; background:var(--surface-soft); border:1px solid var(--hairline); border-radius:4px; font-size:10px; font-weight:700; color:var(--body-strong); font-family:'JetBrains Mono', monospace; letter-spacing:0.2px; }

@media (max-width: 1024px) {
  .cb-mockup-grid { grid-template-columns:1fr; }
  .cb-mockup-side { display:none; }
  .cb-feature-grid { grid-template-columns:repeat(2,1fr); }
  .cb-mockup-kpis { grid-template-columns:repeat(2,1fr); }
  .cb-workflow { grid-template-columns:repeat(2,1fr); }
  .cb-wf-step::after { display:none; }
  .cb-line-graph { grid-template-columns:repeat(2,1fr); }
  .cb-specs { grid-template-columns:1fr; }
  .cb-cat-row { grid-template-columns:1.5fr 1fr 0.4fr; }
  .cb-cat-row > *:nth-child(n+4) { display:none; }
}