/* 코드·기록 칸 - 프롬프트·응답 원문, 실행 기록(로그), 명령어, JSON. 동작(더보기/접기)은 code-block.js, 규칙은 claude_common/ui/code-block.md
   들어간 면 + 고정폭 글자 + 줄바꿈 살림 + 300px 넘으면 칸 안에서 스크롤. 색·모서리는 테마 파일(themes/*.css)의 --uk-* 만 쓴다. */
.code-block {
  display: block; box-sizing: border-box; margin: 0; padding: 8px 10px;
  border-radius: var(--uk-r-sm); background: var(--uk-sunk); color: var(--uk-fg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; line-height: 1.5; tab-size: 4;
  white-space: pre-wrap; overflow-wrap: anywhere;
  max-height: var(--code-max, 300px); overflow: auto; overscroll-behavior: contain;
}
.code-block.is-text { font-family: inherit; font-size: 13px; }       /* 사람이 읽는 원문(프롬프트·메시지) - 본문 글꼴 */
.code-block.is-nowrap { white-space: pre; overflow-wrap: normal; }  /* 명령어·표 모양 기록 - 줄을 꺾지 않고 옆으로 민다 */
.code-block.is-tall { --code-max: 480px; }
.code-block + .code-block { margin-top: 8px; }

/* 접는 칸 - 처음엔 몇 줄(--fold-lines, 기본 1줄)만, [더보기]로 펼친다. code-block.js가 .code-fold로 감싸고 버튼을 단다 */
.code-fold { position: relative; min-width: 0; padding-right: 76px; }
.code-fold.is-short { padding-right: 0; }                           /* 접을 만큼 길지 않으면 버튼 없음 */
/* 접힌 칸은 아래 여백을 같은 색 테두리로 바꾼다 - 넘친 글자는 안쪽 여백까지 비치지만 테두리 위로는 못 나온다 */
.code-block.is-foldable:not(.is-open) { max-height: calc(var(--fold-lines, 1) * 1.5em + 16px); overflow: hidden; padding-bottom: 0; border-bottom: 8px solid var(--uk-sunk); }
.code-block.is-foldable.is-open { --code-max: 360px; }
.code-fold-btn {
  position: absolute; top: 4px; right: 0; height: 22px; padding: 0 8px;
  border: 0; border-radius: var(--uk-r-pill); background: var(--uk-brand-light); color: var(--uk-brand);
  font: inherit; font-size: 12px; font-weight: 600; white-space: nowrap; cursor: pointer;
}
.code-fold-btn:hover { color: var(--uk-brand-dark); }
.code-fold-btn:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: 1px; }