/* 오른쪽 "API 호출 기록" 패널 — 관리자·응시 페이지 공용 */
:root { --api-panel-w: 420px; }

/* 패널이 열려 있으면 페이지 본문이 패널 왼쪽까지만 쓰도록 */
html.api-panel-open body { margin-right: var(--api-panel-w); }
html.api-panel-open .quiz-shell { right: var(--api-panel-w); }

.api-panel {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: var(--api-panel-w);
  z-index: 2000;
  display: none;
  flex-direction: column;
  background: #f8f9fc;
  border-left: 1px solid #e4e7f0;
  box-shadow: -4px 0 16px rgba(23, 27, 46, .06);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Malgun Gothic", sans-serif;
  color: #171b2e;
}
html.api-panel-open .api-panel { display: flex; }

.api-panel-tab {
  position: fixed;
  right: 0;
  top: 50%;
  z-index: 2000;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  padding: 14px 8px;
  border: 1px solid #e4e7f0;
  border-right: none;
  border-radius: 10px 0 0 10px;
  background: #171b2e;
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
html.api-panel-open .api-panel-tab { display: none; }

.api-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  background: #fff;
  border-bottom: 1px solid #e4e7f0;
}
.api-panel-title { font-size: 14px; font-weight: 800; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.api-mode { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 20px; }
.api-mode.mock { background: #fff3cd; color: #946200; }
.api-mode.live { background: #d4f4dd; color: #1a7a3c; }
.api-panel-actions { display: flex; gap: 6px; }
.api-panel-actions button {
  border: 1px solid #e4e7f0;
  background: #fff;
  color: #5c6072;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11.5px;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
}
.api-panel-actions button:hover { background: #f4f6fc; }

.api-panel-legend { padding: 10px 16px; font-size: 11.5px; color: #5c6072; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; border-bottom: 1px solid #eef0f5; }
.api-panel-empty { padding: 24px 16px; font-size: 12.5px; color: #9ba0b4; line-height: 1.6; }

.api-panel-list { list-style: none; margin: 0; padding: 10px; overflow-y: auto; flex: 1; }
.api-entry { background: #fff; border: 1px solid #e4e7f0; border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.api-entry summary { list-style: none; cursor: pointer; padding: 10px 12px; }
.api-entry summary::-webkit-details-marker { display: none; }
.api-entry details[open] summary { border-bottom: 1px solid #eef0f5; }

.api-line1 { display: flex; align-items: center; gap: 6px; }
.api-name { font-size: 13px; font-weight: 800; }
.api-ms { margin-left: auto; font-size: 11px; color: #9ba0b4; }
.api-line2 { display: flex; align-items: center; gap: 6px; margin-top: 4px; min-width: 0; }
.api-line2 code { font-size: 11.5px; color: #5c6072; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; background: none; padding: 0; }

.api-method { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 4px; color: #fff; flex-shrink: 0; }
.api-method.GET { background: #4f7cff; }
.api-method.POST { background: #1a7a3c; }
.api-method.PUT { background: #946200; }
.api-method.PATCH { background: #7a4fd1; }
.api-method.DELETE { background: #c62828; }

.api-status { font-size: 11px; font-weight: 800; padding: 1px 7px; border-radius: 20px; }
.api-status.ok { background: #d4f4dd; color: #1a7a3c; }
.api-status.warn { background: #fff3cd; color: #946200; }
.api-status.err, .api-status.net { background: #fde2e2; color: #c62828; }

.api-tag { font-size: 10.5px; font-weight: 800; padding: 1px 6px; border-radius: 4px; }
.api-tag.변경 { background: #e8edff; color: #1b3b93; }
.api-tag.신규 { background: #ffe8f0; color: #b0245a; }

.api-block-label { font-size: 11px; font-weight: 700; color: #9ba0b4; padding: 8px 12px 0; }
.api-entry pre {
  margin: 4px 12px 10px;
  padding: 8px 10px;
  max-height: 260px;
  overflow: auto;
  background: #f4f6fc;
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 11.5px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-all;
}

/* 좁은 화면에서는 본문을 밀지 않고 패널을 위에 덮어서 표시 */
@media (max-width: 900px) {
  :root { --api-panel-w: min(420px, 100vw); }
  html.api-panel-open body { margin-right: 0; }
  html.api-panel-open .quiz-shell { right: 0; }
}