/* static/css/a60.css */

/* 遮罩層 - 全螢幕置中 */
.help-modal-mask {
  position: fixed;
  inset: 0;                       /* top:0; right:0; bottom:0; left:0; */
  background: rgba(0, 0, 0, 0.7);
  display: none;                  /* 預設隱藏 */
  align-items: center;
  justify-content: center;
  z-index: 9999;                  /* 確保最上層 */
  padding: 1rem;                  /* 小螢幕時不至於貼邊 */
}

/* 內容框 */
.help-modal {
  background: #111;
  border-radius: 12px;
  max-width: 500px;
  width: 100%;
  box-shadow: 0 8px 24px rgba(0, 255, 255, 0.2);
  padding: 2rem;
  color: #fff;
  position: relative;
  overflow-y: auto;
  max-height: 90vh;               /* 高度超過時滾動 */
}

/* 關閉按鈕 (右上角) */
.help-modal .close-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #ccc;
  cursor: pointer;
  line-height: 1;
  padding: 0;
}
.help-modal .close-btn:hover {
  color: #fff;
}

/* 標題 */
.help-modal h2 {
  margin: 0 0 1rem;
  font-size: 1.75rem;
  border-bottom: 1px solid #333;
  padding-bottom: 0.5rem;
}

/* 內容文字 */
.help-modal p,
.help-modal li {
  font-size: 1rem;
  line-height: 1.6;
  margin: 0.5rem 0;
}

/* 清單內縮 */
.help-modal ul {
  padding-left: 1.2rem;
  margin: 0.5rem 0 1rem;
}

/* 小螢幕調整 */
@media (max-width: 400px) {
  .help-modal {
    padding: 1rem;
  }
  .help-modal h2 {
    font-size: 1.5rem;
  }
}