/* =========================================================================
   API 투자전략센터 — API 가이드 (3-panel API explorer)
   Left: category sidebar · Center: TR info + search · Right: code + console
   No footer on this page. Each panel scrolls independently.
   ========================================================================= */

/* ---------- shell ---------- */
.guide-shell {
  display: grid;
  grid-template-columns: minmax(0, 15fr) minmax(0, 45fr) minmax(0, 40fr);
  height: calc(100vh - 72px);
  margin-top: 72px;
}
/* 모바일(≤980px)에서만 켜지는 3패널 전환 탭 — PC에서는 숨긴다. */
.guide-mtabs { display: none; }
.panel { height: 100%; overflow-y: auto; overflow-x: hidden; position: relative; scrollbar-width: thin; }
.panel::-webkit-scrollbar { width: 9px; }
.panel::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 6px; border: 2px solid transparent; background-clip: content-box; }
.panel::-webkit-scrollbar-thumb:hover { background: var(--text-dim); background-clip: content-box; }
.panel--left { border-right: 1px solid var(--border); background: var(--bg-2); }
.panel--center { border-right: 1px solid var(--border); }
.panel--right { background: var(--bg-2); }

/* ---------- panel headers (sticky) ---------- */
.panel__bar {
  position: sticky; top: 0; z-index: 20;
  background: var(--header-bg); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  padding: 14px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
/* PC: 패널 바 안의 검색창·버튼 높이를 맞춘다 */
.panel__bar .search-box,
.panel__bar .btn-sm { height: 40px; }

/* =====================  LEFT — sidebar  ===================== */
.panel--left .panel__bar { padding: 11px; background-color: var(--bg-2); }

/* 토글 트랙 — 원본과 동일한 회색 트랙 + 파란 활성 pill (트랙 46px / pill 38px) */
.api-type { display: flex; flex: 1; gap: 4px; padding: 4px; height: 46px; border-radius: var(--r-pill); background: #2e313b; border: 1px solid var(--border); }
:root[data-theme="light"] .api-type { background: var(--bg-gray); }
.api-type button {
  flex: 1; padding: 8px; height: 38px; border-radius: var(--r-pill);
  font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); font-weight: 600; color: var(--text-dim);
  display: flex; align-items: center; justify-content: center; gap: 6px; transition: color 0.2s, background-color 0.2s, box-shadow 0.2s;
}
.api-type button .b { font-family: var(--font-mono); font-size: 0.6rem; padding: 1px 5px; border-radius: 4px; background: var(--chip-bg); color: var(--chip-text); border: 1px solid var(--chip-border); }
.api-type button.active { color: var(--on-accent); background: var(--accent-grad); box-shadow: 0 6px 16px -8px var(--glow-cyan); }
.api-type button.active .b { background: rgba(255, 255, 255,0.16); color: var(--on-accent); border-color: transparent; }

.cat-list { padding: 8px; }
.cat { margin-bottom: 2px; }
.cat__head {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: var(--r-sm);
  font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); font-weight: 600; color: var(--text-2); text-align: left; transition: background-color 0.18s, color 0.18s;
}
.cat__head:hover { background: var(--surface-2); color: var(--text); }
.cat.open > .cat__head { color: var(--text); font-weight: 700; }
/* 컬렉션 아이콘 — 컬렉션 id(data-cat)를 보고 CSS가 직접 그린다.
   예전에는 apiguide.js 가 사후에 <svg>를 꽂아 넣었는데, 그러면 사이드바를 다시 그리는
   경로마다(탭 전환 등) 그리기 호출을 잊는 순간 아이콘이 사라진다.
   마크업만 있으면 누가 언제 렌더하든 아이콘이 따라오도록 여기로 옮겼다.
   매핑에 없는 id 는 var() 폴백으로 grid 가 나가므로 업스트림에 컬렉션이 늘어도 깨지지 않는다. */
.cat__ic { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); color: var(--accent-prime); flex-shrink: 0; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.cat__ic::before {
  content: ""; width: 16px; height: 16px; background-color: currentColor;
  -webkit-mask: var(--cat-ic, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%223%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3C/svg%3E")) center / contain no-repeat;
          mask: var(--cat-ic, url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%223%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3C/svg%3E")) center / contain no-repeat;
}
.cat.open > .cat__head .cat__ic { background: var(--surface-blue); border-color: var(--chip-border); color: var(--accent-prime); }
/* mask 미지원 브라우저에서는 mask 선언이 통째로 무시돼 currentColor 사각형이 그대로 드러난다.
   아이콘 없는 빈 박스가 파란 네모보다 낫다 — 그럴 땐 글리프를 그리지 않는다. */
@supports not ((-webkit-mask: none) or (mask: none)) {
  .cat__ic::before { display: none; }
}
.cat[data-cat*="인증" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 11h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z%22/%3E%3Cpath d=%22M8 11V7a4 4 0 0 1 8 0v4%22/%3E%3C/svg%3E"); }
.cat[data-cat*="업종" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M7 14l4-4 3 3 5-6%22/%3E%3C/svg%3E"); }
.cat[data-cat*="주식" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12h4l3 8 4-16 3 8h4%22/%3E%3C/svg%3E"); }
.cat[data-cat*="선물/옵션" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M7 14l4-4 3 3 5-6%22/%3E%3C/svg%3E"); }
.cat[data-cat*="해외선물" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18%22/%3E%3C/svg%3E"); }
.cat[data-cat*="해외주식" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3.5 9h17M3.5 15h17M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18%22/%3E%3C/svg%3E"); }
.cat[data-cat*="기타" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%223%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3C/svg%3E"); }
.cat[data-cat*="실시간" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12h3l2-7 4 14 3-9 2 4h6%22/%3E%3C/svg%3E"); }
.cat__name { flex: 1; min-width: 0; font-size: 15px; line-height: var(--lh-text-md); }
.cat__count { font-family: var(--font-mono); font-size: var(--fs-badge); line-height: var(--lh-badge); color: var(--text-dim); }
.cat__arrow { width: 15px; height: 15px; color: var(--text-dim); transition: transform 0.28s var(--ease); flex-shrink: 0; }
.cat.open > .cat__head .cat__arrow { transform: rotate(90deg); color: var(--accent-cyan); }

.cat__trs { overflow: hidden; max-height: 0; transition: max-height 0.35s var(--ease); }
.cat.open > .cat__trs { max-height: 4000px; }

/* 합성 L1 감추기 (xingAPI 탭) — 사이드바 마크업이 컬렉션 > 서브메뉴 > TR 3단 고정인데 xing
   스키마는 GROUP > TR 2단이라, 서버가 껍데기 L1 하나를 씌운다
   (XingApiGuideMapper.SYNTHETIC_ROOT_ID = "xing" → data-cat="xing").
   그 껍데기는 클릭할 것이 없으니 헤더를 지우고 하위를 항상 펼친 상태로 둔다
   → 화면상 xing 탭은 그룹 > TR 2단으로 보인다.
   ⚠ data-cat="xing" 은 위 상수와 짝이다. 상수를 바꾸면 이 선택자도 바꿔야 한다.
      Open API 컬렉션의 id 는 UUID 라 이 값과 겹치지 않는다.
   ⚠ 이 블록은 .cat.open > .cat__trs 보다 뒤에 있어야 한다 — 특정도가 같아(0,3,0) 순서로
      이긴다. max-height:none 이 필요한 이유는 apiguide.js 의 selectTR 이 선택 TR 의 조상
      .cat 에 .open 을 붙여 4000px 상한을 걸기 때문이다(그룹이 늘어나면 잘린다).
.cat[data-cat*="xing"] > .cat__head { display: none; }
.cat[data-cat*="xing"] > .cat__trs { max-height: none; overflow: visible; }
.cat[data-cat*="xing"] .sub { margin-left: 0; } 

*/

/* L2 서브메뉴 그룹 (컬렉션 > 서브메뉴 > TR) */
.sub { margin: 2px 0 2px 12px; }
/* L2 아이콘 — Open API 는 L1 에 아이콘이 있으므로 L2 는 비워 둔다.
   xing 은 껍데기 L1 을 감춰 L2 가 화면상 최상위라, 두 탭의 최상위 줄 모양을 맞추려고 여기에 아이콘을 준다.
   글리프는 xing 매핑이 없어 var(--cat-ic) 폴백인 grid 가 나간다. */
.sub__head .cat__ic { display: none; }

/*
.cat[data-cat*="xing"] .sub__head .cat__ic { display: grid; width: 26px; height: 26px; }
.cat[data-cat*="xing"] .sub__head .cat__ic::before { width: 15px; height: 15px; }
.cat[data-cat*="xing"] .sub.open > .sub__head .cat__ic { background: var(--surface-blue); border-color: var(--chip-border); }
.cat[data-cat*="xing" i] .sub.open > .sub__trs {margin-left: 10px;}
.cat[data-cat*="xing" i] .sub[data-cat*="주식" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M5 11h14v9a1 1 0 0 1-1 1H6a1 1 0 0 1-1-1z%22/%3E%3Cpath d=%22M8 11V7a4 4 0 0 1 8 0v4%22/%3E%3C/svg%3E"); }
.cat[data-cat*="xing" i] .sub[data-cat*="업종" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 3v18h18%22/%3E%3Cpath d=%22M7 14l4-4 3 3 5-6%22/%3E%3C/svg%3E"); }
.cat[data-cat*="xing" i] .sub[data-cat*="해외선물" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M3 12h4l3 8 4-16 3 8h4%22/%3E%3C/svg%3E"); }
.cat[data-cat*="xing" i] .sub[data-cat*="투자정보" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M12 11v5M12 8h.01%22/%3E%3C/svg%3E"); }
.cat[data-cat*="xing" i] .sub[data-cat*="선물/옵션" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3 12h18M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18%22/%3E%3C/svg%3E"); }
.cat[data-cat*="xing" i] .sub[data-cat*="ELW" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%2212%22 cy=%2212%22 r=%229%22/%3E%3Cpath d=%22M3.5 9h17M3.5 15h17M12 3a15 15 0 0 1 0 18M12 3a15 15 0 0 0 0 18%22/%3E%3C/svg%3E"); }
.cat[data-cat*="xing" i] .sub[data-cat*="기타" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Crect x=%223%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%223%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%223%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3Crect x=%2214%22 y=%2214%22 width=%227%22 height=%227%22 rx=%221%22/%3E%3C/svg%3E"); }
.cat[data-cat*="xing" i] .sub[data-cat*="실시간" i] .cat__ic { --cat-ic: url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22%23000%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 12h3l2-7 4 14 3-9 2 4h6%22/%3E%3C/svg%3E"); } */
.sub__head {
  width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--r-sm);
  font-size: 0.85rem; font-weight: 600; color: var(--text-muted); text-align: left;
  background: none; border: none; font-family: inherit; cursor: pointer; transition: background-color 0.16s, color 0.16s;
}
.sub__head:hover { background: var(--surface-2); color: var(--text); }
.sub.open > .sub__head { color: var(--text); }
.sub__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sub__count { font-family: var(--font-mono); font-size: 0.66rem; color: var(--text-dim); flex-shrink: 0; }
.sub__arrow { width: 13px; height: 13px; color: var(--text-dim); transition: transform 0.28s var(--ease); flex-shrink: 0; }
.sub.open > .sub__head .sub__arrow { transform: rotate(90deg); color: var(--accent-cyan); }
.sub__trs { overflow: hidden; max-height: 0; transition: max-height 0.3s var(--ease); }
.sub.open > .sub__trs { max-height: 3000px; }

.tr-item {
  width: 100%; display: flex; align-items: center; gap: 9px; padding: 9px 12px 9px 22px; border-radius: var(--r-sm);
  text-align: left; color: var(--text-dim); transition: background-color 0.16s, color 0.16s; position: relative;
}
.tr-item::before { content: ""; position: absolute; left: 11px; top: 50%; transform: translateY(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--text-dim); transition: background-color 0.16s; }
.tr-item:hover { background: var(--surface-2); color: var(--text); }
.tr-item.active { background: var(--surface-blue); color: var(--text); }
.tr-item.active::before { background: var(--accent-cyan); box-shadow: 0 0 8px var(--glow-cyan); }
.tr-item__code { font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); font-weight: 600; flex-shrink: 0; }
.tr-item.active .tr-item__code { color: var(--chip-text); }
.tr-item__name { font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cat-empty { padding: 30px 16px; text-align: center; color: var(--text-dim); font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); }

/* 탭 전환(rest↔xing) 시 메뉴를 서버에서 받아오는 동안 표시하는 로딩 인디케이터 */
@keyframes spin { to { transform: rotate(360deg); } }
.cat-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 52px 16px; color: var(--text-dim); font-size: 0.85rem; }
.cat-loading .spin { width: 22px; height: 22px; border: 2.5px solid var(--border-strong); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* TR 클릭 시 상세(가운데·오른쪽) 조회·렌더 동안 표시하는 로딩 */
.detail-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 80px 16px; color: var(--text-dim); font-size: 0.88rem; }
.detail-loading .spin { width: 26px; height: 26px; border: 3px solid var(--border-strong); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 0.7s linear infinite; }

/* 상세 조회(업스트림 실호출) 실패 안내 — 로딩과 같은 자리에 대신 표시된다 */
.detail-error { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 72px 16px; text-align: center; }
.detail-error strong { font-size: 0.95rem; color: var(--text); }
.detail-error p { margin: 0; color: var(--text-dim); font-size: 0.86rem; }
.detail-error__retry { margin-top: 8px; padding: 7px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); font-size: 0.84rem; cursor: pointer; transition: border-color 0.2s; }
.detail-error__retry:hover { border-color: var(--border-glow); }

/* =====================  CENTER — search + meta + tables  ===================== */
.search-box { position: relative; display: flex; align-items: center; gap: 10px; padding: 11px 14px; border-radius: var(--r-pill); background: var(--surface-2); border: 1px solid var(--border-strong); transition: border-color 0.2s; }
.search-box:focus-within { border-color: var(--border-glow); }
.search-box svg { width: 18px; height: 18px; color: var(--text-dim); flex-shrink: 0; }
.search-box input { flex: 1; min-width: 0; background: none; border: none; outline: none; color: var(--text); font-size: var(--fs-input); line-height: var(--lh-input); }
.search-box input::placeholder { color: var(--text-dim); }
.search-box kbd { font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-dim); border: 1px solid var(--border); border-radius: 5px; padding: 2px 6px; }

.center-body { padding: 22px 24px 60px; }

/* search results dropdown list (when filtering) */
.search-results { display: none; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.search-results.show { display: flex; }
.sr-row { display: flex; align-items: center; gap: 10px; padding: 11px 13px; border-radius: var(--r-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; transition: border-color 0.16s, background-color 0.16s; }
.sr-row:hover { border-color: var(--border-glow); background: var(--surface-hover); }
.sr-row__code { font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); font-weight: 700; color: var(--chip-text); flex-shrink: 0; }
.sr-row__name { font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); color: var(--text-2); flex: 1; min-width: 0; }
.sr-row__cat { font-size: var(--fs-badge); line-height: var(--lh-badge); color: var(--text-dim); flex-shrink: 0; }
.hl { background: rgba(52,225,255,0.28); color: var(--text); border-radius: 3px; padding: 0 1px; }

/* meta header */
/* 상세 상단 브레드크럼 — 현재 TR이 속한 컬렉션명을 보여준다(apiguide.js가 사이드바에서 읽어 채움). */
.cat-crumb { display: flex; align-items: baseline; gap: 8px; font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-dim); margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--border); }
.cat-crumb__name { font-weight: 700; color: var(--text-2); }
.cat-crumb__desc { color: var(--text-dim); }

.tr-head { margin-bottom: 22px; }
.tr-head__top { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.tr-head__code { font-family: var(--font-mono); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: 700; letter-spacing: -0.02em; }
.badge-method { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 700; padding: 5px 11px; border-radius: var(--r-pill); letter-spacing: 0.04em; }
.badge-method.post { color: var(--accent-cyan); background: rgba(52,225,255,0.12); border: 1px solid rgba(52,225,255,0.3); }
.badge-method.get { color: var(--color-success); background: rgba(43,214,110,0.12); border: 1px solid rgba(43,214,110,0.3); }
.badge-method.ws { color: #b39dff; background: rgba(150,130,255,0.14); border: 1px solid rgba(150,130,255,0.34); }
.badge-method.tr { color: var(--accent-prime); background: rgba(91,168,255,0.12); border: 1px solid rgba(91,168,255,0.3); }
.tr-head h1 { font-size: var(--fs-h3); font-weight: 800; letter-spacing: -0.025em; line-height: var(--lh-h3); }
.tr-head__desc { color: var(--text-2); font-size: var(--fs-text-md); line-height: var(--lh-text-md); margin-top: 8px; }

/* meta key-value grid */
.meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; margin-top: 18px; }
.meta-cell { background: var(--surface); padding: 12px 15px; display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.meta-cell.full { grid-column: 1 / -1; }
.meta-cell .k { font-size: var(--fs-badge); line-height: var(--lh-badge); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.meta-cell .v { font-family: var(--font-mono); font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); color: var(--text); word-break: break-all; }
.meta-cell .v.url { color: var(--chip-text); }

/* section titles in center/right */
.block-title { display: flex; align-items: center; gap: 10px; margin: 28px 0 12px; font-size: var(--fs-title-sub); line-height: var(--lh-title-sub); font-weight: 700; letter-spacing: -0.01em; }
.block-title .bar { width: 3px; height: 16px; border-radius: 2px; background: var(--accent-prime); }
.block-title .count { font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-dim); font-weight: 500; }

/* request/response tables (compact spec-table variant) */
/* 좁은 화면에서 표가 잘리지 않도록 가로 스크롤 컨테이너로 감싼다. */
.api-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.api-table { width: 100%; min-width: 560px; border-collapse: separate; border-spacing: 0; border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); }
.api-table th, .api-table td { text-align: left; padding: 10px 13px; border-bottom: 1px solid var(--border); vertical-align: top; }
.api-table thead th { background: var(--surface-2); font-weight: 700; font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); letter-spacing: 0.02em; color: var(--text-2); text-transform: uppercase; white-space: nowrap; }
.api-table tbody tr:last-child td { border-bottom: none; }
.api-table tbody tr { transition: background-color 0.15s; }
.api-table tbody tr:hover { background: var(--surface); }
.api-table .fld { font-family: var(--font-mono); font-weight: 600; color: var(--text); white-space: nowrap; }
.api-table .kor { color: var(--text-2); white-space: nowrap; }
.api-table .typ { font-family: var(--font-mono); color: var(--text-accent); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); white-space: nowrap; }
.api-table .len { font-family: var(--font-mono); color: var(--text-dim); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); white-space: nowrap; text-align: center; }
.api-table .req { display: inline-block; font-family: var(--font-mono); font-size: 0.68rem; font-weight: 700; padding: 2px 7px; border-radius: var(--r-pill); white-space: nowrap; }
.api-table .req.y { color: #ff8aa0; background: rgba(255,107,129,0.13); border: 1px solid rgba(255,107,129,0.3); }
.api-table .req.n { color: var(--text-dim); background: var(--surface-2); border: 1px solid var(--border); }
.api-table .dsc { color: var(--text-dim); line-height: 1.5; white-space: pre-line; }   /* 설명의 줄바꿈(원문 <br/>)을 살린다 */

/* 블록 소제목 행 (xingAPI) — 여러 블록으로 나뉘는 TR에서 경계를 표시한다.
   REST는 blocks가 null이라 이 행이 생기지 않는다. */
.api-table .blk-row td { background: var(--surface-2); border-bottom: 1px solid var(--border); padding: 8px 13px; }
.api-table .blk-row:hover td { background: var(--surface-2); }   /* 데이터 행이 아니므로 hover 반응 없음 */
.api-table .blk-row__name { font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700; color: var(--accent-cyan); }
.api-table .blk-row__ko { margin-left: 8px; font-size: 0.76rem; color: var(--text-2); }
.api-table .blk-row__cnt { margin-left: 8px; font-family: var(--font-mono); font-size: 0.7rem; color: var(--text-dim); }

/* =====================  RIGHT — code + console  ===================== */
.lang-tabs { display: flex; gap: 4px; }

/* xingAPI tab — DevCenter guidance (right panel) */
/* hidden 속성이 아래 .xing-devcenter{display:flex} 보다 우선하도록 — 없으면 REST 탭에서도
   DevCenter 안내가 보인다. */
[hidden] { display: none !important; }
.xing-devcenter { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; padding: clamp(40px, 8vh, 80px) 28px; max-width: 420px; margin-inline: auto; }
.xing-devcenter__ic { width: 64px; height: 64px; border-radius: 18px; display: grid; place-items: center; background: var(--surface-blue); border: 1px solid var(--chip-border); color: var(--accent-cyan); }
.xing-devcenter__ic svg { width: 32px; height: 32px; }
.xing-devcenter h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); font-weight: 800; letter-spacing: -0.02em; margin-top: 4px; }
.xing-devcenter p { font-size: var(--fs-text-md); line-height: var(--lh-text-md); color: var(--text-2); }
.xing-devcenter .btn { margin-top: 8px; }
.xing-devcenter__dl { display: inline-flex; align-items: center; gap: 7px; font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); font-weight: 600; color: var(--text-dim); transition: color 0.18s, gap 0.2s var(--ease); }
.xing-devcenter__dl:hover { color: var(--text); gap: 10px; }
.xing-devcenter__dl svg { width: 15px; height: 15px; }
/* 모양·타이포는 공용 .tab(base.css), 비활성 투명은 .tab--plain 이 준다 — 여기는 차이만. */
.lang-tab:not(.active):hover { color: var(--text); background: var(--surface-2); }
.lang-tab.active { color: var(--on-accent); background: var(--accent-grad); }

.right-body { padding: 18px 18px 60px; }
.right-body .codeblock { margin-top: 0; }
.code-scroll { max-height: 360px; overflow: auto; }
/* 언어별 코드 <pre> — 활성 언어 하나만 표시(탭 전환은 클라이언트에서 class 토글) */
.code-pre { display: none; margin: 0; }
.code-pre.active { display: block; }

/* response sample with collapse */
.resp-sample__head { display: flex; align-items: center; gap: 10px; }
.resp-toggle { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-dim); font-family: var(--font-mono); }
.resp-toggle svg { width: 15px; height: 15px; transition: transform 0.28s var(--ease); }
.resp-sample.collapsed .resp-toggle svg { transform: rotate(-90deg); }
.resp-sample__body { max-height: 420px; overflow: auto; transition: max-height 0.3s var(--ease); }
.resp-sample.collapsed .resp-sample__body { max-height: 0; overflow: hidden; }
.resp-sample.collapsed .codeblock { margin-bottom: 0; }

/* console / testbed */
.console { border: 1px solid var(--border-strong); border-radius: var(--r-md); overflow: hidden; background: var(--surface); margin-top: 12px; }
.console__head { display: flex; align-items: center; gap: 9px; padding: 12px 15px; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.console__head .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 8px rgba(43,214,110,0.7); }
.console__head b { font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); font-weight: 700; }
.console__head .env { margin-left: auto; font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-dim); padding: 3px 9px; border-radius: var(--r-pill); border: 1px solid var(--border); }
/* 액세스 토큰 행 — InBlock 파라미터(.console__form)와 시각적으로 분리한다.
   접근토큰 발급 TR에서는 apiguide.js가 hidden 으로 숨긴다. */
.console__token { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; padding: 14px 15px 0; }
.console__token[hidden] { display: none; }
.console__token label { font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.console__token label .star { color: #ff8aa0; }
.console__token input { padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--code-bg); color: var(--code-text); font-family: var(--font-mono); font-size: 0.82rem; outline: none; transition: border-color 0.2s; min-width: 0; }
.console__token input:focus { border-color: var(--border-glow); }
/* 비밀값 입력칸의 "표시 전환" 버튼 — 액세스 토큰 행과 시크릿 키 행이 함께 쓴다. */
.console__eye { position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px;
  color: var(--text-dim); background: none; border: none; cursor: pointer; transition: color 0.18s; }
.console__eye:hover { color: var(--text); }
.console__eye svg { width: 16px; height: 16px; }
.console__eye .eye-off { display: none; }
.console__eye.show .eye-on { display: none; }
.console__eye.show .eye-off { display: block; }

.console__form { padding: 14px 15px; display: flex; flex-direction: column; gap: 10px; }
/* 콘솔 입력폼의 Headers/Body 구분 줄 */
.cf-group { font-family: var(--font-mono); font-size: var(--fs-code-chip); color: var(--text-dim); letter-spacing: 0.04em; text-transform: uppercase; padding-top: 4px; border-top: 1px solid var(--border); }
.cf-group:first-child { padding-top: 0; border-top: 0; }
.cf-row { display: grid; grid-template-columns: 130px 1fr; gap: 10px; align-items: center; }
.cf-row label { font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-2); display: flex; align-items: center; gap: 6px; }
.cf-row label .star { color: #ff8aa0; }
.cf-row input { padding: 8px 11px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--code-bg); color: var(--code-text); font-family: var(--font-mono); font-size: 0.82rem; outline: none; transition: border-color 0.2s; min-width: 0; }
.cf-row input:focus { border-color: var(--border-glow); }

/* 비밀값 입력칸 — 눈 아이콘을 칸 안쪽에 겹쳐 두어 폭이 다른 행과 같게 유지된다.
   (아이콘을 별도 칸으로 빼면 그 행만 입력칸이 좁아진다) */
.console__field { position: relative; display: block; min-width: 0; }
.console__field input { width: 100%; padding-right: 36px; }
.console__actions { display: flex; align-items: center; gap: 12px; padding: 0 15px 14px; }
.run-exec { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 8px; padding: 10px 22px; border-radius: var(--r-pill); font-weight: 700; font-size: var(--fs-text-sm); line-height: var(--lh-text-sm); color: var(--text); background: var(--accent-prime); box-shadow: 0 8px 22px -10px var(--glow-cyan); transition: transform 0.2s var(--ease), opacity 0.2s; }
.run-exec > * { position: relative; z-index: 1; }
.run-exec:hover { transform: translateY(-2px); }
.run-exec:disabled { cursor: progress; transform: none; }
/* 3s cooldown: button goes grey, brand color "waves" in from left to full */
.run-exec.cooldown { cursor: not-allowed; opacity: 1; transform: none; background: var(--surface-2); box-shadow: none; color: var(--text-wh); }
:root[data-theme="light"] .run-exec.cooldown { background: #666671; color: #37455f; }
.run-exec.cooldown::before { content: ""; position: absolute; inset: 0; z-index: 0; background: var(--accent-prime); border-radius: inherit; transform-origin: left center; animation: runFill 3s linear forwards; }
@keyframes runFill { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
/* 실시간 구독 중 — 같은 버튼이 "중지"로 바뀐다 (cooldown과 달리 활성 상태를 유지) */
.run-exec.stop { background: linear-gradient(135deg, var(--color-rose), #ff4d6a); color: #fff; box-shadow: 0 8px 22px -10px rgba(255, 77, 106, 0.75); }
.run-exec.stop:disabled { cursor: pointer; }
.run-exec svg { width: 15px; height: 15px; }
/* 실시간 상태 표시 — 구독 중임을 알리는 점멸 점 */
.run-meta .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-success); box-shadow: 0 0 8px rgba(43, 214, 110, 0.7); animation: livePulse 1.4s ease-in-out infinite; }
@keyframes livePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) {
  .live-tick { animation: none; opacity: 1; }   /* 기본이 불투명이라 사실상 방어용 */
  .run-meta .live-dot { animation: none; }
}
.run-meta { font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--text-dim); display: inline-flex; align-items: center; gap: 7px; }
.run-meta .spin { width: 12px; height: 12px; border: 2px solid var(--border-strong); border-top-color: var(--accent-cyan); border-radius: 50%; animation: spin 0.7s linear infinite; }
.run-meta.ok { color: var(--color-success); }
.run-meta.err { color: var(--color-rose); }

/* console output tabs */
.console__tabs { display: flex; gap: 2px; padding: 0 10px; border-top: 1px solid var(--border); background: var(--code-line); }
.console__tab { padding: 10px 13px; font-size: 0.8rem; font-weight: 600; color: var(--text-dim); border-bottom: 2px solid transparent; transition: color 0.18s, border-color 0.18s; }
.console__tab:hover { color: var(--text); }
.console__tab.active { color: var(--text-wh); border-bottom-color: var(--text-wh); }
.console__tab.clear { margin-left: auto; color: var(--text-inactive); }
.console__tab.clear:hover { color: var(--color-rose); }
.console__out { background: var(--code-bg); padding: 14px 16px; min-height: 150px; max-height: 320px; overflow: auto; font-family: var(--font-mono); font-size: var(--fs-code-chip); line-height: var(--lh-code-chip); color: var(--code-text); white-space: pre-wrap; word-break: break-word; }
.console__out .placeholder { color: var(--text-dim); font-style: normal; }
.console__pane { display: none; }
.console__pane.active { display: block; }
/* 가시성을 애니메이션에 의존하지 않는다 — 기본이 opacity:0 이면 keyframes·CSS변수 누락이나
   animation 덮어쓰기(예: prefers-reduced-motion) 하나만 어긋나도 프레임이 통째로 안 보인다.
   실측으로 겪은 문제라 기본을 불투명으로 두고, 애니메이션은 등장 효과로만 쓴다. */
.live-tick { animation: tickIn 0.3s var(--ease-out); }
/* 실시간 프레임 — 기본은 한 줄로 접어두고(넘치면 …), 클릭하면 정렬된 JSON으로 펼친다 */
.live-tick.frame { cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-radius: 4px; padding: 1px 4px; margin: 0 -4px; }
.live-tick.frame::before { content: "▸"; display: inline-block; width: 1.1em; color: var(--text-dim); }
.live-tick.frame:hover { background: rgba(127, 127, 127, 0.16); }
.live-tick.frame.open { white-space: pre-wrap; }
.live-tick.frame.open::before { content: "▾"; }
/* opacity는 건드리지 않는다 — 애니메이션이 멈추거나 시작 프레임에 머물면 글자가 사라진다.
   등장 효과는 transform 으로만 준다(가시성과 무관). */
@keyframes tickIn { from { transform: translateY(4px); } to { transform: none; } }

/* =====================  responsive  ===================== */
@media (max-width: 1180px) {
  .guide-shell { grid-template-columns: minmax(0, 20fr) minmax(0, 43fr) minmax(0, 37fr); }
}
/* ---------- 모바일: 탭으로 전환하는 전체높이 단일 패널 ---------- */
@media (max-width: 980px) {
  /* .gnb 가 position:fixed 라, 원본처럼 margin 없이 두면 탭이 GNB 뒤에 깔린다.
     탭이 72px 오프셋을 대신 만들고 .guide-shell 의 margin-top 은 0으로 되돌린다. */
  .guide-mtabs {
    display: flex; position: sticky; top: 72px; z-index: 30; height: 50px; margin-top: 72px;
    background: var(--bg-2); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
    border-bottom: 1px solid var(--border);
  }
  .guide-mtabs button {
    flex: 1; padding: 0 8px; font-size: 15px; font-weight: 700; color: var(--text-dim);
    border-bottom: 2px solid transparent; transition: color 0.18s, border-color 0.18s;
  }
  .guide-mtabs button.active { color: var(--accent-cyan); border-bottom-color: var(--accent-cyan); }

  .guide-shell { grid-template-columns: minmax(0, 1fr); height: auto; margin-top: 0; }
  .panel { height: auto; max-height: none; overflow: visible; display: none; }
  .panel.m-active { display: block; }
  .panel--left { max-height: none; }
  .panel--left, .panel--center { border-right: none; border-bottom: 1px solid var(--border); }
  /* 72px GNB + 51px guide-mtabs(50px + 1px border-bottom) */
  .panel__bar { position: sticky; top: 123px; flex-wrap: wrap; row-gap: 10px; }
  /* 언어탭 줄이 남는 폭보다 길어지면 스스로 가로 스크롤한다. */
  .panel--right .panel__bar .lang-tabs { min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
  .panel--right .panel__bar .lang-tabs::-webkit-scrollbar { display: none; }
  .panel--right .panel__bar .lang-tab { flex-shrink: 0; }

  /* 터치 타깃 확보 */
  .cat__head, .sub__head, .tr-item { padding-top: 13px; padding-bottom: 13px; }
  .cat__head { font-size: 0.96rem; }
  .tr-item { min-height: 44px; }
  .lang-tab { min-height: 38px; }
  .search-box input { font-size: 14px; }   /* iOS 포커스 시 확대 방지 */
  .cf-row { grid-template-columns: 1fr; gap: 6px; }
  .cf-row input { font-size: 16px; min-height: 40px; }
  .run-exec { width: 100%; justify-content: center; min-height: 46px; }
  .console__actions { flex-wrap: wrap; }
  .center-body, .right-body { padding-left: 16px; padding-right: 16px; }
  .meta-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .cat__name { font-size: 15px; }
  /* 터치에는 진짜 hover 가 없어 탭 후 그림자가 남는다 */
  .run-exec, .run-exec:hover, .run-exec.cooldown { box-shadow: none; }
}
/* ---------- 모바일: Request/Response 표를 필드별 카드로 접는다 ----------
   6열(min-width:560px)을 가로 스크롤로 두면 폰에서는 첫 두 열만 보이고 나머지는
   스크롤이 있는 줄도 모른 채 잘린 것처럼 보인다. 행 하나를 카드 하나로 세우고
   thead 대신 각 칸의 data-label(apiservice.html 템플릿)을 항목명으로 쓴다. */
@media (max-width: 560px) {
  .api-table-scroll { overflow-x: visible; }
  .api-table { display: block; min-width: 0; border: none; border-radius: 0; font-size: var(--fs-text-sm); }
  .api-table thead { display: none; }
  .api-table tbody { display: block; }
  .api-table tbody tr { display: block; margin-bottom: 8px; padding: 4px 0; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); }
  .api-table tbody tr:hover { background: var(--surface); }
  .api-table tbody tr:last-child { margin-bottom: 0; }
  /* justify-items:start — 안 주면 Required 배지가 값 칸 폭만큼 늘어난다(그리드 아이템 기본 stretch). */
  .api-table td { display: grid; grid-template-columns: 84px minmax(0, 1fr); align-items: baseline; justify-items: start; gap: 10px; padding: 5px 13px; border-bottom: none; }
  .api-table td::before { content: attr(data-label); font-size: var(--fs-badge); line-height: var(--lh-badge); font-weight: 700; color: var(--text-dim); text-transform: uppercase; letter-spacing: 0.02em; }
  /* 값이 비면 칸째 내린다 — 설명 없는 필드에 빈 줄이 남지 않게. */
  .api-table td:empty { display: none; }
  /* 필드명은 카드 제목이라 라벨 없이 한 줄을 다 쓴다. */
  .api-table td.fld { grid-template-columns: 1fr; padding-top: 9px; padding-bottom: 7px; font-size: var(--fs-text-md); }
  .api-table td.fld::before { display: none; }
  /* 데스크톱 표에서 폭을 지키려고 건 nowrap 이 카드에서는 칸을 넘치게 한다. */
  .api-table .fld, .api-table .kor, .api-table .typ, .api-table .len { white-space: normal; overflow-wrap: anywhere; }
  .api-table .len { text-align: left; }
  /* 블록 소제목 행(colspan)은 카드가 아니라 구분선 그대로 둔다. */
  .api-table tbody tr.blk-row { border: none; background: none; margin-bottom: 4px; padding: 0; }
  .api-table .blk-row td { display: block; padding: 8px 4px 4px; background: none; }
  .api-table .blk-row td::before { display: none; }
}
@media (max-width: 480px) {
  .tr-head__code { font-size: 1.15rem; }
  .panel__bar { padding: 12px 14px; }
  .console__tabs { overflow-x: auto; }
}