/* =============================================================
   ログイン誘導モーダル（Type E）
   - リアクション/ブックマーク/フォロー/通報 等のエンゲージメント
     アクションを未ログインで押した際に出すライトな登録誘導
   - <dialog> 要素ベース。showModal() で開く
   - キャラ画像は未納品のため点線プレースホルダー
   ============================================================= */

/* ::backdrop はモーダル外側の半透明レイヤー（dialog のネイティブ機能） */
.login-modal::backdrop {
  background: rgba(15, 23, 42, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* dialog 要素のリセット */
.login-modal {
  /* <dialog> の UA スタイルはブラウザ間で差があり、
     showModal() で開いた際に inset:0 が効かず左上寄せになるケースがある。
     明示的に position:fixed; inset:0; margin:auto; を指定して中央寄せする。 */
  position: fixed;
  inset: 0;
  margin: auto;
  border: none;
  padding: 0;
  background: transparent;
  width: min(92vw, 440px);
  height: auto;
  max-height: 90vh;
  border-radius: var(--radius-lg);
  overflow: visible;
  color: var(--color-text-primary);
}

.login-modal[open] {
  animation: login-modal-pop 180ms ease-out;
}

@keyframes login-modal-pop {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* パネル本体 */
.login-modal__panel {
  position: relative;
  background: var(--color-base-1);
  border-radius: var(--radius-lg);
  padding: var(--space-6) var(--space-5) var(--space-5);
  box-shadow: var(--shadow-lg);
  max-height: 90vh;
  overflow-y: auto;
  box-sizing: border-box;
}

/* 閉じるボタン */
.login-modal__close {
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: var(--radius-full);
  color: var(--color-text-secondary);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.login-modal__close:hover {
  background: var(--color-base-2);
  color: var(--color-text-primary);
}

.login-modal__close:focus-visible {
  outline: 2px solid var(--color-main);
  outline-offset: 2px;
}

/* ナビキャラ */
.login-modal__visual {
  display: flex;
  justify-content: center;
  margin-bottom: var(--space-4);
}

.login-modal__navi {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
}

/* 本文 */
.login-modal__body {
  text-align: center;
}

.login-modal__title {
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  color: var(--color-text-primary);
  line-height: var(--line-height-tight);
  margin: 0 0 var(--space-3);
}

.login-modal__lead {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  line-height: var(--line-height-relaxed);
  margin: 0 0 var(--space-5);
}

/* CTA */
.login-modal__cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}

/* 注意文 */
.login-modal__note {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  line-height: var(--line-height-relaxed);
  margin: 0;
}

.login-modal__note a {
  color: var(--color-text-secondary);
  text-decoration: underline;
}

/* スクロールロック（body 側で制御） */
body.has-modal-open {
  overflow: hidden;
}

/* PC */
@media (min-width: 769px) {
  .login-modal {
    width: min(92vw, 460px);
  }

  .login-modal__panel {
    padding: var(--space-8) var(--space-6) var(--space-6);
  }

  .login-modal__title {
    font-size: var(--font-size-xl);
  }

  .login-modal__lead {
    font-size: var(--font-size-base);
  }
}