@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600;700&family=Inter:wght@300;400;500;600;700&display=swap');

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.mrz-font {
  font-family: 'Fira Code', "OCR-B", monospace;
  letter-spacing: 0.12em;
}

.region-tab-btn,
.engine-tab-btn {
  background-color: rgb(15 23 42 / 0.6);
  border-color: rgb(51 65 85);
  color: rgb(148 163 184);
}

.region-tab-btn:hover,
.engine-tab-btn:hover {
  border-color: rgb(99 102 241 / 0.5);
  color: rgb(226 232 240);
}

.engine-tab-btn.active {
  background-color: rgb(99 102 241 / 0.15);
  border-color: rgb(99 102 241);
  color: rgb(224 231 255);
  box-shadow: 0 0 15px -3px rgb(99 102 241 / 0.3);
}

/* The region choice narrows what is read, so it reads as a filter rather than a
   second engine picker. */
.region-tab-btn.active {
  background-color: rgb(6 182 212 / 0.12);
  border-color: rgb(6 182 212 / 0.85);
  color: rgb(207 250 254);
  box-shadow: 0 0 15px -3px rgb(6 182 212 / 0.3);
}

.mrz-char {
  display: inline-block;
  text-align: center;
}

.mrz-char-filler {
  color: rgb(100 116 139);
}

/* Status pills sit in narrow grid cells, so a wrap is normal. Korean has no spaces
   inside a word, and the browser will break mid-word unless told otherwise: without
   this "사용 가능" comes out as "사용 가" / "능". */
.status-pill {
  word-break: keep-all;
  overflow-wrap: break-word;
  text-align: center;
  line-height: 1.25;
}

/* The browser default scrollbar is a light, chunky bar that reads as a foreign
   element on these dark panels. This one keeps the slate palette, stays out of the
   way until pointed at, and leaves the track invisible so the panel edge stays clean. */
.slim-scroll {
  scrollbar-width: thin;
  scrollbar-color: rgb(51 65 85) transparent;
}

.slim-scroll::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.slim-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.slim-scroll::-webkit-scrollbar-thumb {
  background-color: rgb(51 65 85);
  border-radius: 9999px;
}

.slim-scroll::-webkit-scrollbar-thumb:hover {
  background-color: rgb(100 116 139);
}

.slim-scroll::-webkit-scrollbar-corner {
  background: transparent;
}

/* Transcripts are collapsed by default: they are what the model read, useful when a
   field looks wrong but noise the rest of the time. <details> is used rather than a
   button because these cards are rebuilt on every run, and it keeps the keyboard and
   screen-reader behaviour without any state to wire up. */
.transcript > summary {
  list-style: none;
  cursor: pointer;
}

.transcript > summary::-webkit-details-marker {
  display: none;
}

.transcript > summary .transcript-arrow {
  transition: transform 0.15s ease;
}

.transcript[open] > summary .transcript-arrow {
  transform: rotate(180deg);
}

/* API 사용법 탭의 코드 블록. 예제 주소는 app.js 가 접속한 서버로 채운다. */
.api-code {
  background: #020617;
  border: 1px solid #1e293b;
  border-radius: 0.75rem;
  padding: 0.85rem 1rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.55;
  color: #cbd5e1;
  overflow-x: auto;
  white-space: pre;
}
.api-code .api-base {
  color: #6ee7b7;
}