/* BOT 명령어 안내 (botguide.js) — 회원 화면과 관리자 화면이 함께 읽는다.
   카드 틀(.dash-card / .admin-card)과 창(.modal)은 각 화면의 것을 그대로 쓰고, 여기는 안쪽만 그린다. */

.bg-bar{ display: flex; gap: 10px; margin-bottom: 12px; }
.bg-chips{ display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.bg-chip{
  font: 500 12.5px/1 'Noto Sans KR', 'Inter', system-ui, sans-serif;
  padding: 7px 11px; border-radius: 999px; cursor: pointer;
  color: #c6d6e4; background: rgba(0,0,0,.28); border: 1px solid #36557c;
}
.bg-chip:hover{ color: #fff; border-color: #4d7ba3; }
.bg-chip.on{ color: #f3d98b; border-color: #c9a95a; background: rgba(61,143,219,.22); }
.bg-chip.gm{ color: #ffc94d; }
.bg-chip.off{ cursor: default; opacity: .55; }
.bg-scope{ margin: 0 0 14px; font-size: 12.5px; color: #8ea6bc; }

.bg-sec{ margin-bottom: 22px; }
.bg-sec h3{
  margin: 0 0 6px; font: 700 15px/1.3 'Noto Sans KR', 'Inter', system-ui, sans-serif; color: #f3d98b;
  padding-bottom: 6px; border-bottom: 1px solid rgba(201,169,90,.26);
}
.bg-intro{ margin: 6px 0 10px; font-size: 13px; line-height: 1.6; color: #a9bccd; }
.bg-rows{ display: flex; flex-direction: column; }
.bg-row{
  display: grid; grid-template-columns: minmax(150px, 260px) minmax(0, 1fr) auto; gap: 12px;
  align-items: center; padding: 8px 4px; border-bottom: 1px solid rgba(44,71,103,.45);
}
.bg-row:hover{ background: rgba(143,217,240,.04); }

.bg-cmd{
  justify-self: start; max-width: 100%; text-align: left; cursor: pointer;
  font: 600 12.5px/1.35 Consolas, 'D2Coding', ui-monospace, monospace; color: #8fd9f0;
  background: rgba(0,0,0,.35); border: 1px solid #2c4767; border-radius: 4px; padding: 5px 8px;
  overflow-wrap: anywhere;
}
.bg-cmd:hover{ border-color: #4d7ba3; color: #e9f3fa; }
.bg-cmd.copied{ border-color: #6fcf97; color: #6fcf97; }
.bg-cmd.big{ font-size: 14px; padding: 7px 10px; }
.bg-short{ font-size: 13.5px; line-height: 1.5; color: #dbe6ef; }
.bg-alias{ margin-left: 8px; font-size: 12px; color: #7f97ae; }
.bg-info{
  width: 26px; height: 26px; border-radius: 50%; cursor: pointer; flex: none;
  font: italic 700 14px/1 Georgia, 'Times New Roman', serif; color: #f3d98b;
  background: radial-gradient(circle at 50% 35%, rgba(61,143,219,.45), rgba(10,22,38,.9));
  border: 1px solid #c9a95a;
}
.bg-info:hover{ color: #fff; box-shadow: 0 0 0 2px rgba(201,169,90,.35); }
.bg-badge{
  display: inline-block; margin-left: 4px; padding: 2px 6px; border-radius: 3px; vertical-align: 1px;
  font: 700 11px/1.2 'Noto Sans KR', system-ui, sans-serif; color: #1b1406; background: #ffc94d;
}
.bg-badge.user{ background: #6fe0a0; }
.bg-short code, .bg-intro code, .bg-detail code{
  font-family: Consolas, ui-monospace, monospace; font-size: .92em; color: #8fd9f0;
  background: rgba(0,0,0,.35); padding: 1px 5px; border-radius: 3px;
}

/* ── 자세한 설명 창 ─────────────────────────────────────────── */
.bg-modal .bg-box{ max-width: 720px; max-height: calc(100vh - 48px); overflow-y: auto; text-align: left; }
.bg-modal .card-head h2{ font-family: Consolas, ui-monospace, monospace; }
.bg-head{ margin-bottom: 14px; }
.bg-lead{ margin: 10px 0 8px; font-size: 15px; line-height: 1.55; color: #e9f3fa; }
.bg-meta{ display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: 12.5px; color: #8ea6bc; }
.bg-blk{ margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(44,71,103,.55); }
.bg-blk h4{ margin: 0 0 6px; font: 700 13.5px/1.3 'Noto Sans KR', system-ui, sans-serif; color: #f3d98b; }
.bg-blk h4 small{ font-weight: 400; color: #7f97ae; }
.bg-blk p, .bg-blk li{ margin: 0; font-size: 13.5px; line-height: 1.7; color: #d3e0ea; }
.bg-blk ol, .bg-blk ul{ margin: 0; padding-left: 20px; }
.bg-blk li + li{ margin-top: 4px; }
.bg-ex{ display: flex; flex-direction: column; gap: 8px; }
.bg-ex-row{ display: grid; grid-template-columns: minmax(120px, 240px) minmax(0, 1fr); gap: 10px; align-items: start; font-size: 13px; line-height: 1.6; color: #d3e0ea; }
.bg-rel{ display: flex; flex-wrap: wrap; gap: 6px; }

@media (max-width: 700px){
  .bg-row{ grid-template-columns: minmax(0, 1fr) auto; }
  .bg-row .bg-cmd{ grid-column: 1 / 2; }
  .bg-row .bg-short{ grid-column: 1 / -1; grid-row: 2; }
  .bg-row .bg-info{ grid-column: 2; grid-row: 1; }
  .bg-ex-row{ grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .bg-modal{ padding: 10px; }
  .bg-modal .bg-box{ max-height: calc(100vh - 20px); padding: 14px 14px 16px; }
}