/* Playground 셸 (architecture.md "셸 구성", docs/images/playground-layout.png).
   셸은 화면 높이를 쓰고 스크롤하지 않는다. Parameters 목록과 iframe만 스크롤한다. */
:root { --navy: #172a4a; --green: #1a8a4a; --blue: #3268df; --line: #dde3ec; --muted: #74839a; --text: #24334b; }
* { box-sizing: border-box; }
html, body { height: 100%; }
body.shell { margin: 0; height: 100vh; overflow: hidden; display: flex; flex-direction: column; font-family: 'Malgun Gothic', sans-serif; color: var(--text); background: #f4f6fa; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .5; }
:focus-visible { outline: 3px solid #a9c7ff; outline-offset: 1px; }
[hidden] { display: none !important; }
.muted { color: var(--muted); font-size: 12px; }

.topbar { flex: none; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 20px; background: var(--navy); color: white; }
.topbar a { color: #c9d8ff; font-size: 12px; }
.menus { flex: none; display: flex; gap: 4px; padding: 0 12px; overflow-x: auto; background: white; border-bottom: 1px solid var(--line); }
.menus button { flex: none; border: 0; border-bottom: 2px solid transparent; background: none; padding: 10px 12px; font-size: 13px; color: var(--muted); white-space: nowrap; }
.menus button[aria-current="page"] { color: var(--green); border-bottom-color: var(--green); font-weight: bold; }

.workspace { flex: 1; min-height: 0; display: flex; }
.panel { flex: none; width: 340px; display: flex; flex-direction: column; min-height: 0; background: white; border-right: 1px solid var(--line); position: relative; }
.panel-head { flex: none; display: flex; align-items: center; gap: 8px; padding: 14px 16px 4px; }
.panel-head h1 { flex: 1; margin: 0; font-size: 16px; }
.method { color: #087f66; background: #e5f6ee; font-weight: bold; font-size: 11px; padding: 3px 7px; border-radius: 4px; }
.icon-button { border: 1px solid var(--line); background: white; border-radius: 4px; padding: 2px 8px; }
.panel-body { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0 16px 14px; }
.panel-body > .muted { margin: 0 0 10px; }
.field { display: block; font-size: 12px; font-weight: bold; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; padding: 7px 8px; border: 1px solid #ccd5e2; border-radius: 4px; background: white; font-size: 12px; }
input[readonly] { background: #f1f4f8; color: var(--muted); }
textarea { resize: vertical; min-height: 64px; }
.parameters { flex: 1; min-height: 0; display: flex; flex-direction: column; margin-top: 12px; }
.parameters h2 { margin: 0 0 6px; font-size: 13px; }
.fields { flex: 1; min-height: 0; overflow-y: auto; padding-right: 6px; }
.param { margin: 0 0 12px; }
.param-head { display: flex; justify-content: space-between; gap: 8px; font-size: 12px; }
.param-head b { color: var(--text); }
.param-head .required { color: #c62828; font-size: 11px; margin-left: 4px; }
.param-head .description { color: var(--muted); text-align: right; }
.param .count { margin-top: 2px; font-size: 11px; color: var(--muted); }
.paper-problem-row, .paper-problem-heading { display: grid; grid-template-columns: 64px minmax(0, 1fr) 42px; gap: 6px; align-items: center; }
.paper-problem-heading { margin-top: 8px; font-size: 11px; color: var(--muted); }
.paper-problem-row { margin-bottom: 6px; }
.paper-problem-row input { min-width: 0; margin: 0; }
.paper-problem-row button { padding: 7px 0; }
.paper-problem-editor > .set-add { margin: 2px 0 4px; }
.set { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 10px; }
.set > summary { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; cursor: pointer; font-size: 12px; font-weight: bold; background: #f6f8fb; }
.set > div { padding: 8px 10px 0; }
.json-guide { margin: 12px 0 4px; }
.json-view { border: 1px solid var(--line); border-radius: 6px; margin: 0 0 10px; }
.json-view > summary { padding: 6px 10px; cursor: pointer; font-size: 12px; font-weight: bold; }
.json-view > textarea { display: block; box-sizing: border-box; width: 100%; border: 0; border-top: 1px solid var(--line); padding: 8px 10px; font: 12px/1.5 Consolas, monospace; resize: vertical; background: #fafbfc; }
.json-view > textarea:not([readonly]) { background: #fff; }
.json-error { padding: 6px 10px; border-top: 1px solid var(--line); color: #c62828; font-size: 12px; white-space: pre-wrap; }
.set-remove, .set-add { border: 1px solid var(--line); background: white; border-radius: 4px; font-size: 11px; padding: 2px 8px; }
.set-add { width: 100%; padding: 6px; margin-bottom: 8px; }
.panel-foot { flex: none; padding-top: 10px; }
.form-errors { margin: 0 0 8px; padding: 8px; border-radius: 4px; background: #fff0f0; color: #a52836; font-size: 12px; white-space: pre-line; }
.execute { width: 100%; padding: 10px; border: 0; border-radius: 6px; background: var(--green); color: white; font-weight: bold; font-size: 15px; }
.request-url { margin-top: 10px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fb; font-size: 11px; }
.request-url span { display: block; color: var(--muted); margin-bottom: 4px; }
.request-url output { display: block; max-height: 90px; overflow-y: auto; word-break: break-all; font-family: Consolas, monospace; color: #3a557f; }
.call-example { margin-top: 8px; border: 1px solid var(--line); border-radius: 6px; background: #f6f8fb; font-size: 11px; }
.call-example-head { display: flex; align-items: center; gap: 8px; padding: 6px 8px; color: var(--muted); }
.call-example .copy { margin-left: auto; border: 1px solid var(--line); background: white; border-radius: 4px; font-size: 11px; padding: 1px 8px; }
.call-example > pre { margin: 0; max-height: 140px; overflow: auto; padding: 8px; border-top: 1px solid var(--line); background: white; font: 11px/1.5 Consolas, monospace; color: #3a557f; white-space: pre; }
.call-example > p { margin: 0; padding: 6px 8px; border-top: 1px solid var(--line); }
.expand { position: absolute; top: 10px; left: 6px; border: 1px solid var(--line); background: white; border-radius: 4px; padding: 2px 8px; }
.panel.collapsed { width: 40px; }
.panel.collapsed > :not(.expand) { display: none; }

.response { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 응답 툴바: 위 줄은 실행 상태·새로고침, 아래 줄은 외부 시스템 조작 도구 (architecture.md "셸 구성") */
.toolbar { flex: none; background: white; border-bottom: 1px solid var(--line); font-size: 13px; }
.status-bar, .tools-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; }
.status-bar { min-height: 44px; }
.status-bar #status-detail { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tools-bar { min-height: 44px; border-top: 1px solid var(--line); background: #f6f8fb; }
.tools-bar[hidden] { display: none; }
.toolbar .label { flex: none; width: 72px; color: #5a7bb5; font-size: 12px; letter-spacing: .5px; }
.toolbar #status.ok { color: var(--green); }
.toolbar #status.error { color: #c62828; }
.tools { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; overflow-x: auto; white-space: nowrap; }
.tools fieldset { display: flex; gap: 4px; align-items: center; border: 0; margin: 0; padding: 0; }
.tools legend, .tools .tool-label { float: left; margin-right: 4px; padding: 0; font-size: 12px; color: var(--muted); }
.tools .toggle { border: 1px solid #ccd5e2; background: white; border-radius: 4px; padding: 5px 10px; font-size: 12px; }
.tools .toggle[aria-pressed="true"] { background: var(--blue); border-color: var(--blue); color: white; }
.tools label { display: inline-flex; align-items: center; gap: 6px; }
/* 셀렉트는 전역 규칙(display: block; width: 100%)을 덮어써 라벨과 한 줄에 둔다 */
.tools select { display: inline-block; width: auto; margin: 0; padding: 4px 8px; }
.tools .primary { border: 0; border-radius: 4px; padding: 6px 12px; background: var(--blue); color: white; }
.tools .info { font-size: 12px; color: var(--text); }
.reload { flex: none; border: 0; border-radius: 4px; padding: 6px 12px; background: #9fb6d6; color: white; }
.reload:not(:disabled) { background: #5a7bb5; }
.empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--muted); text-align: center; }
.empty h2 { color: var(--text); font-size: 18px; margin: 0 0 8px; }
.empty p { margin: 0; font-size: 13px; }
#renderer { flex: 1; min-height: 0; width: 100%; border: 0; background: white; }

@media (max-width: 760px) {
  .workspace { flex-direction: column; }
  .panel { width: auto; max-height: 50%; }
  .status-bar { flex-wrap: wrap; }
}

/* 툴바 묶음·칩 (세트지 선택 문항 등). 넘치면 툴바 도구 영역만 가로 스크롤한다 */
.tool-group { display: inline-flex; align-items: center; gap: 6px; }
.chips { display: inline-flex; gap: 4px; }
.chip { border: 1px solid #c9d6ee; background: #eef4ff; border-radius: 12px; padding: 2px 8px; font-size: 11px; color: var(--text); }