/* 부록 — 지면 규칙(크림 바탕 · 테라코타 강조 · 각진 모서리)을 따른다. */

/* ── 본문 속의 여는 단추 ─────────────────────────────── */
.gp-content .gp-more,
.gp-more{
  font:inherit;
  display:inline-flex;align-items:baseline;gap:7px;
  margin:0 2px;padding:2px 10px 3px;
  border:1px solid var(--gp-line,#e3e4dd);
  border-bottom-width:2px;
  border-radius:2px;
  background:var(--gp-cream,#fbfcf6);
  color:var(--gp-ink,#111);
  font-size:.92em;font-weight:700;letter-spacing:-.01em;line-height:1.5;
  cursor:pointer;text-align:left;
  word-break:keep-all;
}
.gp-more:hover{border-color:var(--gp-accent,#b5502a);color:var(--gp-accent,#b5502a)}
.gp-more:focus-visible{outline:2px solid var(--gp-accent,#b5502a);outline-offset:2px}
.gp-more-k{
  font-size:9.5px;font-weight:800;letter-spacing:.14em;
  color:var(--gp-accent,#b5502a);white-space:nowrap;
}
.gp-more-t{text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--gp-line,#e3e4dd)}

/* ── 창 ─────────────────────────────────────────────── */
.gp-aside{
  padding:0;border:0;background:transparent;
  width:min(860px, calc(100vw - 32px));
  max-width:none;max-height:calc(100vh - 48px);
  overflow:visible;
}
.gp-aside::backdrop{background:rgba(17,17,17,.52)}
.gp-aside:not([open]){display:none}

.gp-aside-panel{
  display:flex;flex-direction:column;
  max-height:calc(100vh - 48px);
  background:var(--gp-paper,#fff);
  border:1px solid var(--gp-line,#e3e4dd);
  border-top:3px solid var(--gp-ink,#111);
  border-radius:2px;
  box-shadow:0 26px 80px rgba(0,0,0,.30);
  overflow:hidden;
}

.gp-aside-head{
  position:relative;flex:0 0 auto;
  padding:20px 58px 16px 24px;
  border-bottom:1px solid var(--gp-line,#e3e4dd);
  background:var(--gp-cream,#fbfcf6);
}
.gp-aside .gp-aside-kicker{
  margin:0 0 6px;font-size:11px;font-weight:800;letter-spacing:.18em;
  color:var(--gp-accent,#b5502a);text-transform:uppercase;line-height:1.4;
}
.gp-aside .gp-aside-t{
  margin:0;padding:0;border:0;
  font-size:21px;font-weight:800;letter-spacing:-.03em;line-height:1.35;
  color:var(--gp-ink,#111);word-break:keep-all;
}
.gp-aside-x{
  position:absolute;top:18px;right:18px;
  width:30px;height:30px;padding:0;
  border:1px solid var(--gp-line,#e3e4dd);border-radius:50%;
  background:#fff;cursor:pointer;
}
.gp-aside-x::before,.gp-aside-x::after{
  content:"";position:absolute;left:8px;top:14px;width:12px;height:1.6px;
  background:var(--gp-ink-soft,#555);
}
.gp-aside-x::before{transform:rotate(45deg)}
.gp-aside-x::after{transform:rotate(-45deg)}
.gp-aside-x:hover{border-color:var(--gp-ink,#111)}
.gp-aside-x:hover::before,.gp-aside-x:hover::after{background:var(--gp-ink,#111)}

.gp-aside-body{
  flex:1 1 auto;overflow-y:auto;overscroll-behavior:contain;
  padding:22px 24px 26px;
  font-size:16px;line-height:1.9;color:var(--gp-ink,#111);
  word-break:keep-all;
}
.gp-aside .gp-aside-body > *:first-child{margin-top:0}
.gp-aside .gp-aside-body p{margin:0 0 16px}
.gp-aside .gp-aside-body p:last-child{margin-bottom:0}
.gp-aside .gp-aside-body h3{font-size:16px;font-weight:800;letter-spacing:-.02em;
  margin:26px 0 10px;padding:0;border:0;line-height:1.5}
.gp-aside .gp-aside-body h4{font-size:14px;font-weight:800;letter-spacing:-.02em;
  margin:22px 0 8px;padding:0;border:0;line-height:1.5}
.gp-aside .gp-aside-body ul,
.gp-aside .gp-aside-body ol{margin:0 0 16px;padding-left:1.3em}
.gp-aside .gp-aside-body li + li{margin-top:6px}
.gp-aside .gp-aside-body table{width:100%;border-collapse:collapse;font-size:14px;margin:0 0 16px}
.gp-aside .gp-aside-body th,
.gp-aside .gp-aside-body td{
  border:0;border-bottom:1px solid var(--gp-line,#e3e4dd);
  padding:8px 10px 8px 0;text-align:left;vertical-align:baseline;
}
.gp-aside .gp-aside-body thead th{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--gp-ink-faint,#8a8a85);
}
.gp-aside .gp-aside-body tbody td,
.gp-aside .gp-aside-body tbody th{font-variant-numeric:tabular-nums}
.gp-aside .gp-aside-body td:last-child,
.gp-aside .gp-aside-body th:last-child{padding-right:0;text-align:right}
.gp-aside .gp-aside-body tr.is-sum th,
.gp-aside .gp-aside-body tr.is-sum td{
  border-bottom:0;border-top:1px solid var(--gp-ink,#111);font-weight:800;
}
.gp-aside .gp-aside-body .gp-math{margin:22px 0}

.gp-aside-foot{
  flex:0 0 auto;padding:12px 24px;
  border-top:1px solid var(--gp-line,#e3e4dd);
  background:var(--gp-cream,#fbfcf6);
  display:flex;justify-content:flex-end;
}
.gp-aside-done{
  font:inherit;font-size:13px;font-weight:700;
  padding:9px 18px;border:1px solid var(--gp-ink,#111);border-radius:2px;
  background:var(--gp-ink,#111);color:#fff;cursor:pointer;
}
.gp-aside-done:hover{background:#000}

/* 지면이 뒤에서 함께 구르지 않게. */
html.gp-aside-on,html.gp-aside-on body{overflow:hidden}

/* 창 안의 대화형 장치는 본문 폭을 벗어날 이유가 없다. */
.gp-aside-body .gpk,
.gp-aside-body .gpk-rm{
  width:100%;margin-left:0;transform:none;
}

/* <dialog> 를 모르는 브라우저 */
.gp-aside.is-fallback{
  position:fixed;inset:24px auto auto 50%;transform:translateX(-50%);
  z-index:100000;display:block;
}

@media (max-width:620px){
  .gp-aside{width:calc(100vw - 16px);max-height:calc(100vh - 24px)}
  .gp-aside-panel{max-height:calc(100vh - 24px)}
  .gp-aside-head{padding:16px 50px 13px 16px}
  .gp-aside-t{font-size:18px}
  .gp-aside-body{padding:18px 16px 22px;font-size:15px}
  .gp-aside-foot{padding:10px 16px}
}