/* ============ catalog.css — BZ 스튜디오 「API 활용」 전용 ============
 * 33.api-list(58)/site/css/main.css 를 BZ 스튜디오 팔레트로 이식(2026-07-30).
 * 클래스 전부 bzapi- 접두사. styles.css 의 토큰을 덮어쓰지 않는다.
 * 팔레트는 nav.js 와 동일: ink #17211d / brand #0c6549 / paper #f7f6f1 / tint #e9f1ed
 */

.bzapi-app {
  --bzapi-ink: #17211d;
  --bzapi-muted: #65716c;
  --bzapi-brand: #0c6549;
  --bzapi-paper: #f7f6f1;
  --bzapi-tint: #e9f1ed;
  --bzapi-line: #dce5df;
  --bzapi-card: #ffffff;
  --bzapi-radius: 14px;

  max-width: 1280px;
  margin: 0 auto;
  padding: 28px 20px 72px;
  font-family: Inter, "Noto Sans KR", system-ui, -apple-system, sans-serif;
  color: var(--bzapi-ink);
  box-sizing: border-box;
}
.bzapi-app * { box-sizing: border-box; }

/* ---------- 히어로 ---------- */
.bzapi-hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 26px 26px 24px;
  border: 1px solid var(--bzapi-line);
  border-radius: 18px;
  background: linear-gradient(135deg, #ffffff 0%, var(--bzapi-tint) 100%);
}
.bzapi-eyebrow {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--bzapi-brand);
}
.bzapi-hero h1 {
  margin: 0 0 8px;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.18;
  letter-spacing: -.02em;
  font-weight: 900;
}
.bzapi-sub {
  margin: 0 0 10px;
  max-width: 60ch;
  font-size: 15px;
  line-height: 1.62;
  color: var(--bzapi-muted);
}
.bzapi-sub strong { color: var(--bzapi-ink); font-weight: 800; }
.bzapi-stat {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  color: var(--bzapi-muted);
}
.bzapi-stat b { color: var(--bzapi-brand); font-size: 16px; font-weight: 900; }

.bzapi-hero-actions { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.bzapi-primary,
.bzapi-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease;
}
.bzapi-primary { color: #fff; background: var(--bzapi-brand); box-shadow: 0 12px 24px rgba(12, 101, 73, .22); }
.bzapi-ghost { color: var(--bzapi-ink); background: #fff; border: 1px solid var(--bzapi-line); }
.bzapi-primary:hover, .bzapi-ghost:hover { transform: translateY(-1px); }

/* ---------- 툴바 ---------- */
.bzapi-toolbar {
  margin-top: 22px;
  padding: 18px 20px;
  border: 1px solid var(--bzapi-line);
  border-radius: var(--bzapi-radius);
  background: var(--bzapi-card);
}
.bzapi-search-row { display: flex; gap: 10px; flex-wrap: wrap; }
.bzapi-search-row input {
  flex: 1 1 260px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--bzapi-line);
  border-radius: 10px;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--bzapi-ink);
  background: var(--bzapi-paper);
}
.bzapi-search-row input:focus-visible {
  outline: 2px solid var(--bzapi-brand);
  outline-offset: 1px;
  background: #fff;
}
.bzapi-search-row button {
  min-height: 44px;
  padding: 0 16px;
  border: 1px solid var(--bzapi-line);
  border-radius: 10px;
  background: var(--bzapi-tint);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bzapi-ink);
  cursor: pointer;
}
.bzapi-filter-group { margin-top: 16px; }
.bzapi-filter-label {
  margin-bottom: 7px;
  font-size: 11.5px;
  font-weight: 900;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--bzapi-muted);
}
.bzapi-chip-row { display: flex; gap: 7px; flex-wrap: wrap; }
.bzapi-chip {
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--bzapi-line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  color: var(--bzapi-muted);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease, border-color 140ms ease;
}
.bzapi-chip:hover { background: var(--bzapi-tint); color: var(--bzapi-ink); }
.bzapi-chip.is-active {
  background: var(--bzapi-brand);
  border-color: var(--bzapi-brand);
  color: #fff;
}
.bzapi-chip-caution.is-active { background: #a8620a; border-color: #a8620a; }
.bzapi-chip-deprecated.is-active { background: #a3251c; border-color: #a3251c; }
.bzapi-chip-check.is-active { background: #4a5a86; border-color: #4a5a86; }

/* ---------- 결과 ---------- */
.bzapi-result-count {
  margin: 18px 0 12px;
  font-size: 13.5px;
  font-weight: 800;
  color: var(--bzapi-muted);
}
.bzapi-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr));
}
.bzapi-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  border: 1px solid var(--bzapi-line);
  border-radius: var(--bzapi-radius);
  background: var(--bzapi-card);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.bzapi-card:hover {
  border-color: #bcd3c8;
  box-shadow: 0 14px 30px rgba(23, 33, 29, .08);
  transform: translateY(-2px);
}
.bzapi-card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bzapi-group {
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  color: var(--bzapi-brand);
  text-transform: uppercase;
}
.bzapi-badge {
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 900;
  white-space: nowrap;
}
/* 대비 4.5:1 이상 확보한 값들 */
.bzapi-badge-stable { background: #dceee5; color: #08553d; }
.bzapi-badge-caution { background: #fbeacf; color: #7a4705; }
.bzapi-badge-check { background: #e2e7f5; color: #37456d; }
.bzapi-badge-deprecated { background: #f9dbd8; color: #8a1d15; }

.bzapi-card h3 {
  margin: 0;
  font-size: 16.5px;
  line-height: 1.34;
  font-weight: 900;
  letter-spacing: -.01em;
}
.bzapi-provider { margin: 0; font-size: 12.5px; font-weight: 700; color: var(--bzapi-brand); }
.bzapi-desc { margin: 0; font-size: 14px; line-height: 1.6; color: #3f4b46; }
.bzapi-meta {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 3px 10px;
  margin: 4px 0 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--bzapi-paper);
  font-size: 12.5px;
}
.bzapi-meta dt { font-weight: 900; color: var(--bzapi-muted); }
.bzapi-meta dd { margin: 0; color: #3f4b46; }
.bzapi-note {
  margin: 0;
  padding: 9px 11px;
  border-left: 3px solid #d9a441;
  border-radius: 0 8px 8px 0;
  background: #fdf6e7;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6a4a08;
}
.bzapi-tags { display: flex; gap: 5px; flex-wrap: wrap; }
.bzapi-tag {
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--bzapi-tint);
  font-size: 11.5px;
  font-weight: 700;
  color: #38463f;
}
.bzapi-card-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px dashed var(--bzapi-line);
}
.bzapi-pick {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--bzapi-brand);
  border-radius: 9px;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 800;
  color: var(--bzapi-brand);
  cursor: pointer;
  transition: background 140ms ease, color 140ms ease;
}
.bzapi-pick:hover { background: var(--bzapi-tint); }
.bzapi-pick.is-picked { background: var(--bzapi-brand); color: #fff; }
.bzapi-doc {
  flex: none;
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 9px;
  background: var(--bzapi-paper);
  font-size: 12.5px;
  font-weight: 800;
  color: #3f4b46;
  text-decoration: none;
}
.bzapi-doc:hover { background: var(--bzapi-tint); color: var(--bzapi-ink); }
.bzapi-empty {
  grid-column: 1 / -1;
  padding: 42px 20px;
  border: 1px dashed var(--bzapi-line);
  border-radius: var(--bzapi-radius);
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--bzapi-muted);
}

/* ---------- 안내 ---------- */
.bzapi-guide {
  margin-top: 32px;
  padding: 22px 24px;
  border: 1px solid var(--bzapi-line);
  border-radius: var(--bzapi-radius);
  background: var(--bzapi-card);
}
.bzapi-guide h2 { margin: 0 0 14px; font-size: 17px; font-weight: 900; }
.bzapi-guide dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 14px;
  margin: 0;
  align-items: start;
}
.bzapi-guide dt { margin: 0; }
.bzapi-guide dd { margin: 0; font-size: 13.5px; line-height: 1.6; color: #3f4b46; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 720px) {
  .bzapi-app { padding: 18px 14px 60px; }
  .bzapi-hero { padding: 20px 18px; }
  .bzapi-hero-actions { width: 100%; }
  .bzapi-hero-actions .bzapi-primary,
  .bzapi-hero-actions .bzapi-ghost { flex: 1 1 100%; }
  .bzapi-toolbar { padding: 14px; }
  .bzapi-grid { grid-template-columns: 1fr; }
  .bzapi-guide { padding: 18px 16px; }
  .bzapi-guide dl { grid-template-columns: 1fr; gap: 4px; }
  .bzapi-guide dd { margin-bottom: 8px; }
}

/* ---------- 테마 위젯 대응 ---------- */
html[data-onae-theme="contrast"] .bzapi-app {
  --bzapi-ink: #eef4f2;
  --bzapi-muted: #a8b6bd;
  --bzapi-brand: #3fd9c0;
  --bzapi-paper: #131c28;
  --bzapi-tint: #1a2634;
  --bzapi-line: rgba(255, 255, 255, .14);
  --bzapi-card: #101827;
}
html[data-onae-theme="contrast"] .bzapi-hero {
  background: linear-gradient(135deg, #101827 0%, #172333 100%);
}
html[data-onae-theme="contrast"] .bzapi-desc,
html[data-onae-theme="contrast"] .bzapi-meta dd,
html[data-onae-theme="contrast"] .bzapi-guide dd { color: #c8d4d9; }
html[data-onae-theme="contrast"] .bzapi-chip { background: #16202e; }
html[data-onae-theme="contrast"] .bzapi-pick { background: transparent; }
html[data-onae-theme="contrast"] .bzapi-doc { color: #c8d4d9; }

html[data-onae-theme="cute"] .bzapi-app {
  --bzapi-brand: #8b6fd4;
  --bzapi-paper: #fff7fb;
  --bzapi-tint: #f7ecfa;
  --bzapi-line: #f0dbe8;
  --bzapi-radius: 20px;
}
html[data-onae-theme="cute"] .bzapi-hero {
  background: linear-gradient(135deg, #ffffff 0%, #fbe9f2 100%);
}