/* --- 탈출 설명서 docs 구조 보강 (pools 폴더의 escape.html) -------------------
   칸 구조는 src/docs-kit.css, 카드·표는 src/pools.css 가 담당하고
   여기에는 docs 킷과 escape 카드가 만나는 경계의 규칙만 둔다. */

/* docs-kit 의 .docs-section h3(부제목) 규칙이 스텝 카드 제목을 덮어쓰므로 되돌린다 */
.esc-article .escape-step h3 {
  margin: 0 0 var(--pagu-space-2);
  font-size: var(--pagu-text-base);
  font-weight: 700;
}

/* 앵커 이동 시 스티키 헤더에 가리지 않게 */
.esc-article .escape-step,
.esc-article .docs-fig {
  scroll-margin-top: 96px;
}

/* 칸 안에 다시 놓인 경고 박스 — 카드 간격을 맞춘다 */
.esc-article .escape-warn {
  margin-top: var(--pagu-space-3);
}

/* --- 순서도 Fig (.esc-flow) -------------------------------------------------
   데스크톱에서는 한 줄, 좁아지면 세로 목록 — 상자 하나만 외롭게 남지 않는다. */

.esc-article .esc-flow {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.esc-article .esc-flow li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 0;
}

.esc-article .esc-flow li + li::before {
  content: "→";
  flex: 0 0 auto;
  color: var(--pagu-muted);
  font-size: 14px;
}

.esc-article .esc-flow-a {
  display: inline-flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 0;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--pagu-line);
  border-radius: var(--pagu-radius-sm);
  background: var(--pagu-bg-subtle);
  color: var(--pagu-fg) !important;
  font-size: 14px;
  font-weight: 650;
  text-align: center;
  text-decoration: none !important;
}

.esc-article .esc-flow-a:hover {
  border-color: var(--pagu-accent);
}

.esc-article .esc-flow-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  border-radius: var(--pagu-radius-full);
  background: var(--pagu-accent-weak);
  color: var(--pagu-accent-strong);
  font-size: 12px;
  font-weight: 700;
}

/* 좁은 화면 — 상자를 세로로 쌓아 어떤 개수든 균형이 맞게 */
@media (max-width: 1023.98px) {
  .esc-article .esc-flow {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }

  .esc-article .esc-flow li {
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }

  .esc-article .esc-flow li + li::before {
    content: "↓";
  }

  .esc-article .esc-flow-a {
    justify-content: flex-start;
    text-align: left;
  }
}

/* --- details 로 접힌 단계 카드 — 제목이 곧 열기 버튼 ------------------------ */

.esc-article details.escape-step {
  padding: 0;
}

.esc-article details.escape-step > summary {
  display: flex;
  align-items: center;
  gap: var(--pagu-space-2);
  min-height: 44px;
  padding: var(--pagu-space-4);
  cursor: pointer;
  color: var(--pagu-fg);
  font-size: var(--pagu-text-base);
  font-weight: 700;
  list-style: none;
}

.esc-article details.escape-step > summary::-webkit-details-marker {
  display: none;
}

.esc-article details.escape-step > summary::after {
  content: "▸";
  margin-left: auto;
  flex: 0 0 auto;
  color: var(--pagu-muted);
  font-size: 13px;
  transition: transform var(--fast) var(--ease);
}

.esc-article details.escape-step[open] > summary::after {
  transform: rotate(90deg);
}

.esc-article details.escape-step > summary:hover {
  color: var(--pagu-accent-strong);
}

.esc-article details.escape-step[open] > summary {
  border-bottom: 1px solid var(--pagu-line);
}

/* 접힌 카드의 번호 배지 (열린 카드의 .escape-step h3 .escape-no 와 같은 모양) */
.esc-article details.escape-step > summary .escape-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  border-radius: var(--pagu-radius-full);
  background: var(--pagu-accent);
  color: var(--pagu-panel);
  font-size: var(--pagu-text-xs);
  font-weight: 700;
}

/* 접힌 카드 안쪽 여백 — 카드 패딩을 summary 가 가져가므로 본문은 옆·아래만 */
.esc-article details.escape-step > :is(p, ul, ol) {
  margin-right: var(--pagu-space-4);
  margin-left: var(--pagu-space-4);
}

.esc-article details.escape-step > :last-child {
  margin-bottom: var(--pagu-space-4);
}

/* --- 핵심 숫자 타일: 좁은 화면에서도 3개가 한 줄 ------------------------------- */

@media (max-width: 420px) {
  .esc-article .docs-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .esc-article .docs-stat {
    padding: 8px 9px;
  }

  .esc-article .docs-stat-v {
    font-size: 15px;
  }

  .esc-article .docs-stat-v .docs-stat-u {
    font-size: 11px;
  }

  .esc-article .docs-stat-l {
    font-size: 11px;
  }
}

/* 칩 열 목차로 바뀌는 폭(docs-kit 의 1280px 경계)에서는 앵커 여유를 더 둔다 */
@media (max-width: 1279.98px) {
  .esc-article .escape-step,
  .esc-article .docs-fig {
    scroll-margin-top: 132px;
  }
}

.page-title .escape-key {
  margin: var(--pagu-space-4) 0;
  padding-left: var(--pagu-space-3);
  border-left: 3px solid var(--pagu-accent);
  color: var(--pagu-fg);
  font-weight: 700;
}

/* 2026-10-30 — reading guides share the compact heading and continuous rails. */
.esc-shell .page-title { margin-bottom: 12px; }
.esc-shell .page-title .escape-key { margin: 6px 0; padding: 6px 0; border: 0; border-block: 1px solid var(--pagu-line); font-size: 13px; font-weight: 600; }
.esc-shell .page-title .escape-intro { margin: 4px 0 0; font-size: 13px; line-height: 1.5; }
.esc-shell .escape-nav { margin: 8px 0 0; gap: 8px; }
.esc-shell .escape-nav .pool-link { min-height: var(--pagu-control-height); padding: 4px 8px; font-size: 12px; }
.esc-article > .docs-section:first-child { border-top: 0; }
.esc-shell code { font-size: 12px; }
.esc-article .docs-section { margin-top: 24px; }
.esc-article .escape-warn { margin: 8px 0 0; padding: 12px; background: var(--pagu-bg-subtle); }
.esc-article .escape-step { padding: 12px; border-radius: 2px; margin-bottom: 8px; }
.esc-article .escape-step h3 { gap: 8px; margin-bottom: 8px; font-size: 14px; line-height: 20px; }
.esc-article .escape-step :is(p, ul, ol) { margin-bottom: 8px; line-height: 1.5; }
.esc-article .escape-step > :last-child { margin-bottom: 0; }
.esc-article .escape-step h3 .escape-no,
.esc-article details.escape-step > summary .escape-no,
.esc-article .esc-flow-no { border-radius: 2px; background: var(--pagu-bg-subtle); color: var(--pagu-muted); border: 1px solid var(--pagu-line); }
.esc-article .esc-flow { gap: 0; }
.esc-article .esc-flow li { align-items: stretch; gap: 0; }
.esc-article .esc-flow li + li::before { align-self: center; padding-inline: 8px; }
.esc-article .esc-flow-a { justify-content: flex-start; padding: 8px 12px; font-size: 13px; text-align: left; }
.esc-article .escape-verified { padding: 1px 5px; border-color: var(--pagu-line); background: var(--pagu-bg-subtle); color: var(--pagu-muted); font-weight: 500; }
.esc-article .docs-stats { gap: 0; margin-top: 8px; }
.esc-article .docs-stat { padding: 8px 12px; }
.esc-article :is(.docs-stat-l, .docs-stat-v .docs-stat-u) { font-size: 12px; }
.esc-article .table-wrap { border: 0; border-radius: 0; overflow-x: auto; overflow-y: hidden; }
.esc-article .escape-table { line-height: 19px; }
.esc-article .escape-table :is(th, td) { height: 36px; padding: 8px; vertical-align: top; font-size: 13px; line-height: 19px; }
.esc-article .escape-table thead th { font-size: 12px; }
.esc-article .escape-table code { font-size: 13px; line-height: 19px; }
.esc-article details.escape-step { padding: 0; }
.esc-article details.escape-step > summary { padding: 12px; }
.esc-article details.escape-step > :is(p, ul, ol) { margin-inline: 12px; }
.esc-article details.escape-step > :last-child { margin-bottom: 12px; }
@media (min-width: 1024px) {
  .esc-article .docs-stat { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-block: 6px; }
  .esc-article .docs-stat-l { order: -1; margin: 0; text-align: left; }
  .esc-article .docs-stat-v { margin: 0; white-space: nowrap; }
}
@media (min-width: 1280px) {
  .esc-shell .docs-toc { padding-top: 0; }
  .esc-shell .page-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 16px; }
  .esc-shell .page-title-row { flex: 1 1 800px; }
  .esc-shell .escape-nav { order: 1; margin: 0 0 2px auto; }
  .esc-shell .page-title .escape-key { order: 2; flex-basis: 100%; }
  .esc-shell .page-title .escape-intro { order: 3; flex-basis: 100%; }
}
@media (max-width: 1023px) {
  .esc-article .esc-flow li { align-items: stretch; }
  .esc-article .esc-flow li + li::before { padding: 4px 0; }
}
@media (max-width: 767px) {
  .esc-shell .page-title .escape-intro,
  .esc-article .escape-step :is(p, li) { font-size: 14px; }
  .esc-article .docs-stat { padding: 8px; }
  .esc-article .docs-stat-v { font-size: 18px; }
  .esc-article .escape-table tr { margin-bottom: 0; border: 0; border-bottom: 1px solid var(--pagu-line); border-radius: 0; }
  .esc-article .escape-table td { padding: 8px 0; height: auto; }
}
@media (max-width: 767px), (pointer: coarse) {
  .esc-shell .escape-nav .pool-link { min-height: 44px; }
}