/* =========================================================
   JPN Auth Modal (Login)
   ========================================================= */

:root{
  --jpn-auth-radius: 16px;
  --jpn-auth-border: rgba(15,23,42,.12);
  --jpn-auth-shadow: 0 24px 70px rgba(0,0,0,.35);
  --jpn-auth-bg: #ffffff;
  --jpn-auth-muted: rgba(15,23,42,.65);
  --jpn-auth-text: rgba(15,23,42,.92);
}

/* モーダルが開いている間はスクロール固定 */
body.jpn-modal-open{
  overflow: hidden;
}

/* 背景 */
.jpn-modal-backdrop{
  position: fixed;
  inset: 0;
  display: none;
  background: rgba(2, 6, 23, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 9998;
}

/* 既存CSSの display:none !important に負けないようにする */
.jpn-modal-backdrop.is-open{
  display: block !important;
}

.jpn-modal.is-open{
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* モーダル本体 */
.jpn-modal{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;

  width: min(92vw, 440px);
  max-height: calc(100vh - 32px);
  overflow: auto;

  background: var(--jpn-auth-bg);
  border: 1px solid var(--jpn-auth-border);
  border-radius: var(--jpn-auth-radius);
  box-shadow: var(--jpn-auth-shadow);

  z-index: 9999;
}

/* 画面が低い端末（横持ち等）では上寄せに切り替え */
@media (max-height: 520px){
  .jpn-modal{
    top: 16px;
    transform: translate(-50%, 0);
    max-height: calc(100vh - 32px);
  }
}

/* ヘッダー */
.jpn-modal__hd{
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 16px 18px;
  color: var(--jpn-auth-text);
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  border-bottom: 1px solid rgba(15,23,42,.08);
}

.jpn-modal__hd > div{
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* 閉じるボタン */
.jpn-modal__close{
  appearance: none;
  border: 0;
  background: transparent;
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: rgba(15,23,42,.7);
}

.jpn-modal__close:hover{
  background: rgba(15,23,42,.06);
}

.jpn-modal__close:focus-visible{
  outline: 3px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}

/* 本文 */
.jpn-modal__bd{
  padding: 18px;
}

/* メッセージ（エラー等） */
.jpn-auth-msg{
  display: block;
  margin: 0 0 12px;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(239, 68, 68, .25);
  background: rgba(239, 68, 68, .08);
  color: rgba(185, 28, 28, .95);
  font-size: 13px;
  line-height: 1.4;
}

/* 入力 */
.jpn-auth-row{
  margin: 12px 0;
}

.jpn-auth-row label{
  display: block;
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--jpn-auth-muted);
}

.jpn-auth-row input[type="text"],
.jpn-auth-row input[type="password"]{
  width: 100%;
  box-sizing: border-box;
  padding: 12px 14px;

  border-radius: 12px;
  border: 1px solid rgba(15,23,42,.14);
  background: rgba(248,250,252,.9);
  color: var(--jpn-auth-text);

  transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
}

.jpn-auth-row input[type="text"]:focus,
.jpn-auth-row input[type="password"]:focus{
  outline: none;
  border-color: rgba(59,130,246,.55);
  box-shadow: 0 0 0 4px rgba(59,130,246,.18);
  background: #fff;
}

/* remember me */
.jpn-auth-row label input[type="checkbox"]{
  transform: translateY(1px);
  margin-right: 8px;
}
.jpn-auth-row--remember{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--jpn-auth-muted);
  font-size: 13px;
}

/* アクション */
.jpn-auth-actions{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 14px;
}

/* primary button */
.jpn-auth-actions button{
  width: 100%;
  border: 0;
  border-radius: 12px;
  padding: 12px 14px;
  cursor: pointer;

  font-weight: 700;
  color: #fff;
  background: rgba(15,23,42,.92);

  transition: transform .12s ease, filter .12s ease, background-color .12s ease;
}
.jpn-auth-actions button:hover{
  filter: brightness(1.06);
}
.jpn-auth-actions button:active{
  transform: translateY(1px);
}
.jpn-auth-actions button:focus-visible{
  outline: 3px solid rgba(59,130,246,.35);
  outline-offset: 2px;
}

/* secondary link button */
.jpn-auth-actions a{
  display: inline-flex;
  align-items: center;
  justify-content: center;

  border-radius: 12px;
  padding: 12px 14px;

  border: 1px solid rgba(15,23,42,.14);
  background: rgba(255,255,255,.9);
  color: rgba(15,23,42,.9);
  text-decoration: none;
  font-weight: 700;

  transition: background-color .12s ease, transform .12s ease;
}
.jpn-auth-actions a:hover{
  background: rgba(15,23,42,.04);
}
.jpn-auth-actions a:active{
  transform: translateY(1px);
}