/* serenor-auth.css v1.0.1 (MVP) */
/* NOTE: Visual styles for buttons are SSOT in site style.css (.btn / .btn--primary / .btn--secondary). */
.serenor-auth-root{
  width:100%;
  min-height:100vh;
  padding:24px 16px;
  box-sizing:border-box;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg);
  color:var(--navy);
  white-space: pre-line;
}
.serenor-auth-card{
  max-width:520px;
  margin:0 auto;
  border:1px solid rgba(60,76,105,.18);
  border-radius:14px;
  background:var(--white);
  padding:16px;
}
.serenor-auth-brandbar{
  display:flex;
  justify-content:flex-start;
  align-items:center;
  margin:0 0 16px 0;
}
.serenor-auth-brand-link{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
}
.serenor-auth-brand-logo{
  display:block;
  width:auto;
  height:30px;
}
.serenor-auth-title{font-size:20px;margin:0 0 14px 0;color:var(--navy);text-align:center;}
.serenor-auth-topbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  margin:0 0 12px 0;
}
.serenor-auth-topbar-actions{display:flex;gap:10px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}

/* Top buttons: keep only functional constraints here */
.serenor-auth-topbtn{ white-space:nowrap; }
.serenor-auth-topbtn--ghost{ /* visuals via .btn--secondary */ }
.serenor-auth-topbtn--brand{ /* visuals via .btn--primary */ }

/* Account page header */
.serenor-auth-account-header{
  margin:0 0 12px 0;
}
.serenor-auth-account-header__main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.serenor-auth-account-header .serenor-auth-brandbar{
  margin:0;
}
.serenor-auth-account-header__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  min-width:0;
}
.serenor-auth-account-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.serenor-auth-account-nav-link,
.serenor-auth-account-nav-link:link,
.serenor-auth-account-nav-link:visited{
  min-width:96px;
  white-space:nowrap;
}
.serenor-auth-logout-link{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  background:transparent;
  padding:0 15px 0 0;
  margin:6px 0 0 0;
  color:var(--navy);
  font:inherit;
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  text-decoration:underline;
  text-underline-offset:.18em;
  cursor:pointer;
}
.serenor-auth-logout-link:hover,
.serenor-auth-logout-link:focus-visible{
  color:var(--navy);
  text-decoration:underline;
}

.serenor-auth-note{color:var(--navy);font-size:16px;margin:16px 0 0 0;}
.serenor-auth-row{margin:12px 0;}
.serenor-auth-row--compact{margin:6px 0;}
.serenor-auth-label{display:block;font-size:13px;color:rgba(60,76,105,.86);margin:0 0 6px 0;}
.serenor-auth-input{
  width:100%;
  padding:10px 12px;
  border:1px solid rgba(60,76,105,.25);
  border-radius:10px;
  font-size:16px;
  box-sizing:border-box;
  background:var(--white);
  color:var(--navy);
}
.serenor-profile-row-inline{display:flex;gap:8px;align-items:flex-start;}
.serenor-profile-row-inline > *{flex:1 1 0;min-width:0;}
.serenor-profile-row-inline > input.serenor-auth-input:last-child{flex:1.6 1 0;}
.serenor-auth-actions,
.serenor-auth-root .auth-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:16px;
}
/* .auth-actions も同じレイアウトを適用する */

/* Form action buttons: keep only non-visual normalizations here */
.serenor-auth-btn{ appearance:none; }
.serenor-auth-btn--ghost{ /* visuals via .btn--secondary */ }

/* Plain links (non-button) */
.serenor-auth-link{color:var(--navy);text-decoration:none;font-size:14px;}

.serenor-auth-consent-row{margin-top:14px;}
.serenor-auth-consent{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14px;
  color:var(--navy);
  line-height:1.7;
}
.serenor-auth-consent input[type="checkbox"]{
  margin:3px 0 0 0;
  flex:0 0 auto;
}
.serenor-auth-consent__text{display:inline;}
.serenor-auth-inline-link{
  color:var(--navy);
  text-decoration:underline;
}
.serenor-auth-btn:disabled,
.serenor-auth-root .btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  pointer-events:none;
}

/* Error: keep within navy/lav/white palette */
.serenor-auth-error{
  margin-top:16px;
  color:var(--notice);
  font-size:16px;
  white-space:pre-wrap;
}
.serenor-auth-kv{
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:14px;
  padding:10px 0;
  border-bottom:1px solid rgba(60,76,105,.12);
}
.serenor-auth-kv b{font-weight:600;}

.serenor-auth-row[data-balance] .serenor-auth-kv{
  align-items:baseline;
}
.serenor-auth-row[data-balance] .serenor-auth-kv b{
  font-size:clamp(.95rem, 3.6vw, 1.05rem);
  font-weight:700;
}
.serenor-auth-row[data-balance] .serenor-auth-kv span{
  color:var(--notice);
  font-size:clamp(1.05rem, 4vw, 1.2rem);
  font-weight:800;
}

@media (max-width:380px){
  .serenor-auth-account-header__main{
    gap:10px;
  }
  .serenor-auth-account-nav{
    gap:6px;
  }
  .serenor-auth-account-nav-link,
  .serenor-auth-account-nav-link:link,
  .serenor-auth-account-nav-link:visited{
    min-width:90px;
    padding-inline:8px;
    font-size:11.5px;
  }
  .serenor-auth-logout-link{
    font-size:12px;
  }
}

/* --- UI tune: account header 2-row --- */
.serenor-auth-subbar{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:10px;
  margin:8px 0 10px 0;
  flex-wrap:wrap;
}
.serenor-auth-row--right{
  display:flex;
  justify-content:flex-end;
  align-items:center;
}


.serenor-purchase-desc{
  margin:12px 0 0 0;
  line-height:1.8;
}
.serenor-purchase-plans{
  display:grid;
  gap:12px;
  margin-top:16px;
}
.serenor-purchase-plan{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid rgba(60,76,105,.18);
  border-radius:12px;
  background:var(--white);
  cursor:pointer;
}
.serenor-purchase-plan__control{
  display:flex;
  align-items:center;
  justify-content:center;
  padding-top:2px;
}
.serenor-purchase-plan__radio{
  margin:0;
}
.serenor-purchase-plan__body{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.serenor-purchase-plan__title{
  font-size:16px;
  font-weight:700;
  color:var(--navy);
}
.serenor-purchase-plan__detail{
  font-size:14px;
  color:rgba(60,76,105,.76);
}
.serenor-purchase-note{
  margin-top:12px;
}
.serenor-purchase-actions > .btn,
.serenor-purchase-actions > .serenor-auth-btn,
.serenor-purchase-actions > .serenor-auth-link{
  min-width:0;
}
.serenor-purchase-actions > *{
  flex:1 1 0;
  text-align:center;
}

.serenor-auth-link--muted{font-size:13px;color:rgba(60,76,105,.72);}
.serenor-auth-btn--danger{border-color:rgba(140,70,70,.28);}

.serenor-auth-withdraw-wrap{
  margin-top:22px;
  text-align:center;
}
.serenor-auth-withdraw-link{
  color:var(--notice);
  text-decoration:underline;
  font-size:14px;
}


.serenor-auth-root{position:relative;}
.serenor-auth-busy-overlay{
  position:fixed;
  inset:0;
  display:none;
  align-items:center;
  justify-content:center;
  background:rgba(60,76,105,.28);
  z-index:9999;
  pointer-events:all;
}
.serenor-auth-busy-overlay.is-active{display:flex;}
.serenor-auth-busy-panel{
  min-width:220px;
  padding:20px 24px;
  border-radius:16px;
  background:#fff;
  box-shadow:0 10px 30px rgba(60,76,105,.18);
  text-align:center;
}
.serenor-auth-spinner{
  width:32px;
  height:32px;
  margin:0 auto 12px;
  border:3px solid rgba(60,76,105,.18);
  border-top-color:var(--navy);
  border-radius:50%;
  animation:serenor-auth-spin .9s linear infinite;
}
.serenor-auth-busy-text{
  font-size:14px;
  color:var(--navy);
  animation:serenor-auth-busy-pulse 1.2s ease-in-out infinite;
}
.serenor-auth-withdraw-link[aria-disabled="true"]{
  pointer-events:none;
  opacity:.6;
}
@keyframes serenor-auth-spin{
  to{transform:rotate(360deg);}
}
@keyframes serenor-auth-busy-pulse{
  0%,100%{opacity:1;}
  50%{opacity:.45;}
}


.serenor-auth-brandbar--verify{
  margin-bottom:18px;
}
.serenor-verify-guide{
  margin:18px 0 4px;
  padding:14px 16px;
  border:1px solid rgba(60,76,105,.14);
  border-radius:12px;
  background:rgba(60,76,105,.03);
}
.serenor-verify-guide__title{
  margin:0 0 10px 0;
  font-size:15px;
  font-weight:700;
  color:var(--navy);
}
.serenor-verify-guide__list{
  margin:0;
  padding-left:1.2em;
  color:var(--navy);
  font-size:14px;
  line-height:1.8;
}
.serenor-verify-guide__list li + li{
  margin-top:6px;
}
.serenor-verify-guide__item--important{
  font-weight:700;
}

.serenor-payment-page .serenor-auth-card{
  max-width:520px;
}
.serenor-payment-page .serenor-auth-note{
  text-align:center;
}

/* Compact nav header shared by verify / purchase pages */
.serenor-auth-compact-header{
  margin:0 0 14px 0;
}
.serenor-auth-compact-header__main{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.serenor-auth-compact-header .serenor-auth-brandbar{
  margin:0;
}
.serenor-auth-compact-header__right{
  display:flex;
  flex-direction:column;
  align-items:flex-end;
  min-width:0;
}
.serenor-auth-compact-nav{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
}
.serenor-auth-compact-nav-link,
.serenor-auth-compact-nav-link:link,
.serenor-auth-compact-nav-link:visited{
  min-width:96px;
  white-space:nowrap;
}
.serenor-auth-compact-account-link,
.serenor-auth-compact-account-link:link,
.serenor-auth-compact-account-link:visited{
  display:inline-block;
  margin:6px 15px 0 0;
  color:var(--navy);
  font-size:13px;
  font-weight:700;
  line-height:1.3;
  text-decoration:underline;
  text-underline-offset:.18em;
}
.serenor-auth-compact-account-link:hover,
.serenor-auth-compact-account-link:focus-visible{
  color:var(--navy);
  text-decoration:underline;
}
.serenor-verify-actions{
  justify-content:center;
}
.serenor-verify-guide__title{
  text-align:center;
}
.serenor-verify-guide__body{
  color:var(--navy);
  font-size:14px;
  line-height:1.8;
}
.serenor-verify-guide__block{
  display:grid;
  gap:6px;
}
.serenor-verify-guide__text{
  margin:0;
}
.serenor-verify-guide__divider{
  height:1px;
  margin:12px 0;
  background:rgba(60,76,105,.16);
}
.serenor-purchase-card-brand{
  display:block;
  width:min(100%, 360px);
  height:auto;
  margin:12px auto 0;
}
.serenor-purchase-actions--single{
  justify-content:center;
}
.serenor-purchase-actions--single > *{
  flex:0 1 auto;
  min-width:180px;
}
@media (max-width:380px){
  .serenor-auth-compact-header__main{
    gap:10px;
  }
  .serenor-auth-compact-nav{
    gap:6px;
  }
  .serenor-auth-compact-nav-link,
  .serenor-auth-compact-nav-link:link,
  .serenor-auth-compact-nav-link:visited{
    min-width:90px;
    padding-inline:8px;
    font-size:11.5px;
  }
  .serenor-auth-compact-account-link{
    font-size:12px;
  }
}
.serenor-purchase-actions.serenor-purchase-actions--single > .btn,
.serenor-purchase-actions.serenor-purchase-actions--single > .serenor-auth-btn{
  min-width:180px;
}