/* signmap 인앱 도움말 드로어 스타일 — help.js 가 주입하는 DOM 전용.
   드로어는 .modal-bg(help-bg) 재사용 → 백드롭/Esc/단축키차단은 style.css 의 .modal-bg 규칙이 담당.
   여기서는 우편함을 오른쪽 서랍으로 바꾸고(help-bg), 내부 타이포만 정의한다. */

/* 인라인 도움말 "?" — 각 화면 상단 우측 버튼그룹에 이웃과 같은 규격(.btn)으로 주입.
   버튼 크롬(테두리·높이)은 이웃 .btn 을 그대로 따르고, 글리프만 브랜드 레드로 구분한다. */
.help-open { padding-left: 11px; padding-right: 11px; }
.help-open .qm { color: #e5322d; font-weight: 800; font-size: 15px; line-height: 1; }
.help-open:hover .qm { color: #c81e1e; }

/* 서랍: .modal-bg 의 가운데 정렬을 오른쪽 스트레치로 override */
#help-modal[hidden] { display: none !important; }
.help-bg { justify-content: flex-end !important; align-items: stretch !important; }
.help-drawer {
  width: min(460px, 94vw); max-width: 94vw;
  height: 100vh; max-height: 100vh;
  margin: 0; border-radius: 0;
  display: flex; flex-direction: column;
  background: #fff; color: #1f2430;
  box-shadow: -8px 0 28px rgba(0,0,0,.22);
  overflow: hidden;
  animation: help-slide .18s ease-out;
}
@keyframes help-slide { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }

.help-head { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid #e5e7eb; flex: 0 0 auto; }
.help-head .help-title { flex: 1; font-size: 15px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.help-back { border: none; background: none; cursor: pointer; font-size: 22px; line-height: 1; color: #374151; padding: 0 4px; }
.help-back:hover { color: #111827; }
.help-drawer .close { cursor: pointer; color: #6b7280; width: 18px; height: 18px; flex: 0 0 auto; }
.help-drawer .close:hover { color: #111827; }

.help-search { padding: 10px 14px; border-bottom: 1px solid #eef0f3; flex: 0 0 auto; }
.help-q { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid #d1d5db; border-radius: 8px; font-size: 13px; outline: none; }
.help-q:focus { border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }

.help-body { flex: 1 1 auto; overflow-y: auto; padding: 14px 16px 28px; -webkit-overflow-scrolling: touch; }

/* 목차 */
.help-cat { margin-bottom: 16px; }
.help-cat h3 { margin: 6px 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; color: #6b7280; }
.help-list { list-style: none; margin: 0; padding: 0; }
.help-list li { margin: 0; }
.help-list a.help-a { display: block; padding: 8px 10px; border-radius: 8px; color: #1f2430; text-decoration: none; font-size: 14px; }
.help-list a.help-a:hover { background: #f3f4f6; color: #111827; }
.help-empty { color: #6b7280; font-size: 14px; padding: 24px 4px; text-align: center; }

/* 아티클 */
.help-fallback { background: #fff7ed; color: #b45309; border: 1px solid #fed7aa; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; margin-bottom: 12px; }
.help-article { font-size: 14px; line-height: 1.62; color: #24303f; }
.help-article h4, .help-article h5, .help-article h6 { margin: 18px 0 8px; font-size: 13px; font-weight: 700; color: #111827; }
.help-article p { margin: 0 0 10px; }
.help-article ul, .help-article ol { margin: 0 0 12px; padding-left: 22px; }
.help-article li { margin: 4px 0; }
.help-article a { color: #2563eb; text-decoration: none; }
.help-article a:hover { text-decoration: underline; }
.help-article strong { font-weight: 700; color: #111827; }
.help-article code { background: #eef1f5; border-radius: 4px; padding: 1px 5px; font: 600 12px/1.4 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #334155; }
.help-article blockquote { margin: 10px 0; padding: 8px 12px; background: #f1f6ff; border-left: 3px solid #2563eb; border-radius: 0 6px 6px 0; color: #334155; font-size: 13.5px; }

.help-actions { margin: 14px 0 6px; }
.help-actbtn { display: inline-block; padding: 8px 14px; border: 1px solid #2563eb; background: #fff; color: #2563eb; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; }
.help-actbtn:hover { background: #2563eb; color: #fff; }

.help-related { margin-top: 20px; padding-top: 12px; border-top: 1px solid #eef0f3; }
.help-related h4 { margin: 0 0 6px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .02em; color: #6b7280; }

@media (prefers-color-scheme: dark) {
  .help-drawer { background: #1a1e26; color: #e5e7eb; }
  .help-head { border-bottom-color: #2b313c; }
  .help-head .help-title { color: #f3f4f6; }
  .help-search { border-bottom-color: #262c36; }
  .help-q { background: #12151b; border-color: #384150; color: #e5e7eb; }
  .help-list a.help-a { color: #dbe0e7; }
  .help-list a.help-a:hover { background: #242a33; color: #fff; }
  .help-article { color: #d3d9e2; }
  .help-article h4, .help-article strong { color: #f3f4f6; }
  .help-article code { background: #242a33; color: #cbd5e1; }
  .help-article blockquote { background: #1b2431; border-left-color: #3b82f6; color: #cbd5e1; }
  .help-related, .help-related h4 { border-top-color: #262c36; }
  .help-fallback { background: #2a2113; color: #fbbf24; border-color: #78430f; }
}