/* ===== 📖 マイページ上部の使い方ガイド(常設・畳んだ既定) — 3サイズで崩れない =====
   元コード: web/mypage.html:19-107（分割時点の HEAD 基準・2026-07-19）
   参照元 HTML: mypage.html */
.mp-guide {
  border: 1px solid var(--line, #2a2f3a);
  border-radius: 12px;
  background: var(--bg-2, #181c2e);
  margin-bottom: 16px;
  overflow: hidden;
}
.mp-guide-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  min-height: 44px;
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  user-select: none;
}
.mp-guide-summary::-webkit-details-marker { display: none; }
.mp-guide-icon { font-size: 18px; flex-shrink: 0; }
.mp-guide-title { flex: 1; line-height: 1.4; }
.mp-guide-chevron {
  flex-shrink: 0;
  color: var(--text-2);
  transition: transform .18s ease;
  font-size: 14px;
}
.mp-guide[open] .mp-guide-chevron { transform: rotate(180deg); }
.mp-guide-body { padding: 4px 16px 18px; }
.mp-guide-lead {
  margin: 0 0 14px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-2);
}
.mp-guide-step {
  border: 1px solid var(--line, #2a2f3a);
  border-left: 4px solid var(--accent, #5b8cff);
  border-radius: 10px;
  background: var(--bg, #0d1018);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.mp-guide-step:last-child { margin-bottom: 0; }
.mp-guide-step.step-1 { border-left-color: #5b8cff; }
.mp-guide-step.step-2 { border-left-color: #f0b73a; }
.mp-guide-step.step-3 { border-left-color: #f472b6; }
.mp-guide-step-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}
.mp-guide-num {
  width: 32px; height: 32px;
  flex-shrink: 0;
  border-radius: 50%;
  display: grid; place-items: center;
  font-weight: 800; font-size: 15px;
  background: var(--bg-3, #15192a);
  color: var(--text);
  border: 2px solid var(--line, #2a2f3a);
}
.mp-guide-step.step-1 .mp-guide-num { background: #5b8cff22; border-color: #5b8cff; color: #5b8cff; }
.mp-guide-step.step-2 .mp-guide-num { background: #f0b73a22; border-color: #f0b73a; color: #f0b73a; }
.mp-guide-step.step-3 .mp-guide-num { background: #f472b622; border-color: #f472b6; color: #f472b6; }
.mp-guide-step-title {
  font-size: 14.5px; font-weight: 700; color: var(--text);
  line-height: 1.45;
}
.mp-guide-step-body {
  font-size: 13.5px; line-height: 1.8; color: var(--text-2);
  padding-left: 44px;
}
.mp-guide-actions {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px; padding-left: 44px;
}
.mp-guide-actions .btn { min-height: 40px; display: inline-flex; align-items: center; }
@media (max-width: 480px) {
  .mp-guide-step-body, .mp-guide-actions { padding-left: 0; }
  .mp-guide-actions .btn { flex: 1 1 100%; justify-content: center; }
  .mp-guide-title { font-size: 14px; }
}