/* 가이드 — 왼쪽 글 목록 + 본문. site.css · page.css 와 같은 색, 옛 엔진 호환 문법만 사용 */
.gd { display: flex; align-items: flex-start; }
.gd__side { width: 210px; flex: 0 0 210px; margin-right: 32px; position: -webkit-sticky; position: sticky; top: 76px;
  background: #121827; border: 1px solid rgba(150, 175, 255, .14); border-radius: 12px; padding: 12px 10px; }
.gd__label { color: #dfc683; font-size: .75rem; letter-spacing: .2em; margin: 16px 8px 6px; }
.gd__all, .gd__link { display: block; padding: 8px 12px; border-radius: 8px; color: #c9d0de; text-decoration: none; font-weight: 700; font-size: .93rem; }
.gd__all:hover, .gd__link:hover { background: #182033; color: #fff; }
.gd__all.on, .gd__link.on { background: rgba(73, 184, 255, .12); color: #49b8ff; }
.gd__main { flex: 1; min-width: 0; margin: 0 0 40px; max-width: 860px; word-break: keep-all; }
.gd__main.doc { margin-top: 0; }
.gd__foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-top: 40px; padding-top: 20px;
  border-top: 1px solid rgba(150, 175, 255, .14); }

/* 목록 카드 */
.gd__cards { display: flex; flex-wrap: wrap; margin: 0 -7px; }
.gd__card { display: block; width: calc(50% - 14px); margin: 0 7px 14px; padding: 18px 20px; border-radius: 12px; text-decoration: none;
  background: #121827; border: 1px solid rgba(150, 175, 255, .14); color: #e8ecf5; }
.gd__card:hover { border-color: #49b8ff; background: #182033; }
.gd__card b { display: block; font-size: 1.1rem; margin-bottom: 6px; }
.gd__card span { display: block; color: #98a2b8; font-size: .92rem; min-height: 2.8em; }
.gd__card i { display: block; margin-top: 10px; color: #49b8ff; font-style: normal; font-weight: 700; font-size: .9rem; }

/* 본문 부품 */
.gd__main h3 { font-size: 1.08rem; margin: 22px 0 8px; color: #e8ecf5; }
.gt { width: 100%; border-collapse: collapse; background: #121827; border: 1px solid rgba(150, 175, 255, .14); margin: 0 0 12px; }
.gt th, .gt td { padding: 10px 14px; border-bottom: 1px solid rgba(150, 175, 255, .1); text-align: left; vertical-align: top; color: #c9d0de; }
.gt th { color: #98a2b8; font-size: .82rem; font-weight: 700; background: #0f1422; white-space: nowrap; }
.gt td b { color: #e8ecf5; }
.gt .num { text-align: right; white-space: nowrap; }
.gt tfoot td { background: #0f1422; font-weight: 700; color: #dfc683; }
.gd-note, .gd-warn { margin: 14px 0; padding: 14px 18px; border-radius: 10px; color: #c9d0de; }
.gd-note { background: rgba(73, 184, 255, .08); border: 1px solid rgba(73, 184, 255, .3); }
.gd-warn { background: rgba(223, 198, 131, .08); border: 1px solid rgba(223, 198, 131, .35); }
.gd-note b, .gd-warn b { color: #e8ecf5; }
.gd-cmd { font-family: Consolas, "D2Coding", monospace; color: #dfc683; background: #0a0d15; border: 1px solid rgba(150, 175, 255, .14);
  border-radius: 6px; padding: 2px 8px; white-space: nowrap; }
.gd-flow { display: flex; flex-wrap: wrap; align-items: center; margin: 4px 0 14px; }
.gd-flow span { background: #182033; border: 1px solid rgba(111, 125, 255, .45); border-radius: 8px; padding: 8px 14px; margin: 0 8px 8px 0; font-weight: 700; color: #e8ecf5; }
.gd-flow em { margin: 0 8px 8px 0; color: #98a2b8; font-style: normal; }

@media (max-width: 913px) {
  .gd { display: block; }
  .gd__side { position: static; width: auto; margin: 0 0 20px; }
  .gd__card { width: calc(100% - 14px); }
  .gt th, .gt td { padding: 9px 10px; }
  /* 숫자 칸이 많은 표는 줄을 바꾸지 않고 옆으로 민다 */
  .gt--wide { display: block; overflow-x: auto; white-space: nowrap; }
}