/* auth.css — ログイン/新規登録モーダル + マイ地点アカウント行 + お気に入りメモ
   トーンは map.css の Airbnb 系トークン(--ink/--ink-2/--line 等)を継承 */

/* ---- モーダル ---- */
.dfm-auth-overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(0, 0, 0, .42);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.dfm-auth-overlay[hidden] { display: none !important; }
.dfm-auth-card {
  position: relative;
  width: min(520px, 100%);
  /* iOS キーボード表示時も見えている領域基準にする(dvh 対応ブラウザ) */
  max-height: calc(100vh - 48px);
  max-height: calc(100dvh - 48px);
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--shadow);
  padding: 24px;
  animation: dfm-auth-in .18s ease-out;
}
@keyframes dfm-auth-in {
  from { transform: translateY(12px); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}
.dfm-auth-close {
  position: absolute;
  top: 14px; right: 14px;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: none; color: var(--ink-2);
  cursor: pointer;
}
.dfm-auth-close:hover { background: #F7F7F7; color: var(--ink); }
.dfm-auth-title {
  font-size: 18px; font-weight: 700; color: var(--ink);
  letter-spacing: -.01em;
  padding-right: 36px;
}
.dfm-auth-lead {
  margin-top: 6px;
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
}
/* ---- SNS ログイン(Web アプリ AuthModal と同一トーン) ---- */
.dfm-auth-sns[hidden] { display: none !important; }
.dfm-auth-sns { margin-top: 16px; }
.dfm-auth-sns-row { display: flex; gap: 10px; }
.dfm-sns-btn {
  flex: 1;
  height: 52px;
  border: none;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform .16s ease;
}
.dfm-sns-btn:active { transform: scale(.97); }
/* 一時停止中のプロバイダ(現状 Apple): 表示は残しつつ灰色・押下不可 */
.dfm-sns-btn:disabled {
  opacity: .35;
  filter: grayscale(1);
  cursor: not-allowed;
}
.dfm-sns-btn:disabled:active { transform: none; }
.dfm-sns-btn.is-apple { background: #000; color: #fff; }
.dfm-sns-btn.is-discord { background: #5865F2; color: #fff; }
.dfm-sns-btn.is-google { background: #fff; border: 1.5px solid rgba(60, 60, 67, .16); }
.dfm-sns-btn.is-line { background: #06C755; color: #fff; }
.dfm-sns-btn.is-line i {
  font-style: normal;
  font-size: 15px; font-weight: 800; letter-spacing: .5px;
}
.dfm-auth-divider {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 12px;
  margin: 18px 0 2px;
  color: var(--ink-3);
  font-size: 12.5px; font-weight: 600;
}
.dfm-auth-divider span { height: 1px; background: var(--line); }

.dfm-auth-tabs[hidden] { display: none !important; }
.dfm-auth-tabs {
  display: flex;
  background: #F7F7F7;
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
  margin-top: 14px;
}
.dfm-auth-tabs button {
  flex: 1;
  height: 34px;
  border: none; border-radius: var(--r-pill);
  background: none;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  cursor: pointer;
  transition: background .12s, color .12s;
}
.dfm-auth-tabs button.active { background: var(--ink); color: #fff; }

.dfm-auth-form { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.dfm-auth-field { display: flex; flex-direction: column; gap: 5px; }
.dfm-auth-field[hidden] { display: none !important; }
.dfm-auth-field span {
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}
.dfm-auth-field span em {
  font-style: normal;
  font-size: 10.5px; font-weight: 700;
  color: var(--danger);
  margin-left: 4px;
}
.dfm-auth-field input,
.dfm-auth-field select {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit;
  font-size: 14px;
  color: var(--ink);
}
.dfm-auth-field input::placeholder { color: var(--ink-3); }
.dfm-auth-field input:focus,
.dfm-auth-field select:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
/* 2カラム行(姓/名・セイ/メイ) */
.dfm-auth-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.dfm-auth-row[hidden] { display: none !important; }
/* grid の min-width:auto で input 幅がはみ出すのを防ぐ */
.dfm-auth-row > .dfm-auth-field { min-width: 0; }

/* 会員種別(個人/法人)セグメント */
.dfm-auth-seg {
  display: flex;
  background: #F7F7F7;
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 2px;
}
.dfm-auth-seg label { flex: 1; cursor: pointer; position: relative; }
.dfm-auth-seg input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.dfm-auth-seg i {
  display: flex; align-items: center; justify-content: center;
  height: 34px;
  border-radius: var(--r-pill);
  font-style: normal;
  font-size: 13px; font-weight: 700; color: var(--ink-2);
  transition: background .12s, color .12s;
}
.dfm-auth-seg input:checked + i { background: var(--ink); color: #fff; }
.dfm-auth-seg input:focus-visible + i { box-shadow: 0 0 0 2px var(--ink); }

/* 性別ラジオ(丸見せ・横並び) */
.dfm-auth-radios {
  display: flex;
  gap: 22px;
  padding: 4px 2px;
}
.dfm-auth-radios label {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer;
}
.dfm-auth-radios input {
  width: 18px; height: 18px;
  accent-color: var(--ink);
  margin: 0;
}
.dfm-auth-radios i {
  font-style: normal;
  font-size: 14px; color: var(--ink);
}

/* 郵便番号+住所検索ボタン */
.dfm-auth-zip { display: flex; gap: 8px; }
.dfm-auth-zip input { flex: 1; min-width: 0; }
.dfm-auth-zip-btn {
  flex-shrink: 0;
  padding: 0 16px;
  border: 1px solid var(--ink);
  border-radius: 10px;
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.dfm-auth-zip-btn:hover { background: #F7F7F7; }
.dfm-auth-zip-btn:disabled { opacity: .55; cursor: default; }

/* 同意チェック群(利用規約/プライバシー/お知らせ受信) */
.dfm-auth-agrees {
  display: flex;
  flex-direction: column;
  gap: 11px;
  padding: 2px 0;
}
.dfm-auth-agrees[hidden] { display: none !important; }
.dfm-auth-agree {
  display: flex; align-items: center; gap: 9px;
  font-size: 13px; color: var(--ink);
  cursor: pointer;
  line-height: 1.5;
}
.dfm-auth-agree[hidden] { display: none !important; }
.dfm-auth-agree input {
  width: 18px; height: 18px;
  accent-color: var(--ink);
  flex-shrink: 0;
}
.dfm-auth-agree a { color: var(--ink); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.dfm-auth-agree em {
  font-style: normal;
  font-size: 10.5px; font-weight: 700;
  color: var(--danger);
  margin-left: 2px;
}

.dfm-auth-error {
  margin: 0;
  font-size: 12.5px; color: var(--danger); line-height: 1.55;
}
/* 情報メッセージ(確認メール送信など、エラーではない通知) */
.dfm-auth-error.is-info { color: var(--ok); }
.dfm-auth-submit {
  height: 48px;
  border: none; border-radius: 10px;
  background: var(--ink); color: #fff;
  font-size: 14.5px; font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.dfm-auth-submit:hover { background: var(--sky-press); }
.dfm-auth-submit:disabled { opacity: .55; cursor: default; }

/* ---- マイ地点パネルのアカウント行 ---- */
.dfm-account {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
}
.dfm-account-login {
  flex: 1;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 40px;
  border: 1px solid var(--ink);
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink);
  font-size: 13px; font-weight: 700;
  cursor: pointer;
  transition: background .12s;
}
.dfm-account-login:hover { background: #F7F7F7; }
.dfm-account-info {
  display: flex; align-items: center; gap: 10px;
  min-width: 0;
}
.dfm-account-avatar {
  flex-shrink: 0;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ink); color: #fff;
  font-size: 14px; font-weight: 700;
}
.dfm-account-text { display: flex; flex-direction: column; min-width: 0; }
.dfm-account-text strong {
  font-size: 13px; font-weight: 700; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dfm-account-text small {
  font-size: 11px; color: var(--ink-2);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.dfm-account-out {
  flex-shrink: 0;
  height: 30px; padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-pill);
  background: var(--surface); color: var(--ink-2);
  font-size: 12px; font-weight: 600;
  cursor: pointer;
}
.dfm-account-out:hover { color: var(--ink); border-color: var(--ink); }
.dfm-account-out:disabled { opacity: .55; cursor: default; }

/* ---- お気に入りのメモ ---- */
.dfm-pl-item { display: flex; flex-direction: column; }
.dfm-pl-memo-btn {
  flex-shrink: 0;
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 50%;
  background: none; color: var(--ink-3);
  cursor: pointer;
}
.dfm-pl-memo-btn:hover { background: #F7F7F7; color: var(--ink); }
.dfm-pl-memo-btn.has-memo { color: var(--ink); }
.dfm-pl-memo {
  margin: 0 12px 10px;
  padding: 8px 11px;
  background: #F7F7F7;
  border-radius: 10px;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
  cursor: pointer;
}
.dfm-pl-memo:hover { color: var(--ink); }
.dfm-pl-memo-edit {
  margin: 0 12px 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.dfm-pl-memo-edit textarea {
  min-height: 72px;
  padding: 10px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  font: inherit; font-size: 13px; color: var(--ink); line-height: 1.6;
  resize: vertical;
}
.dfm-pl-memo-edit textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 1px var(--ink);
}
.dfm-pl-memo-actions { display: flex; gap: 8px; justify-content: flex-end; }
.dfm-pl-memo-actions button {
  height: 32px; padding: 0 14px;
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700;
  cursor: pointer;
}
.dfm-pl-memo-save {
  border: none;
  background: var(--ink); color: #fff;
}
.dfm-pl-memo-save:disabled { opacity: .55; cursor: default; }
.dfm-pl-memo-cancel {
  border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink-2);
}
.dfm-panel-login-btn {
  margin-top: 12px;
  height: 40px; padding: 0 20px;
  border: none; border-radius: var(--r-pill);
  background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 700;
  cursor: pointer;
}
.dfm-panel-login-btn:hover { background: var(--sky-press); }

/* アプリ利用者向け自動ログイン案内(2026-07 Clerk撤去・SNSボタン置換) */
.dfm-auth-app-hint{font-size:12.5px;color:#717171;line-height:1.6;margin:10px 0 2px;padding:10px 12px;background:#F7F7F7;border-radius:10px;}

/* dlsess セッション確認バー(2026-07 session fixation 対策) */
.dfm-sess-confirm{position:fixed;left:12px;right:12px;bottom:12px;z-index:10010;background:#fff;border-radius:12px;padding:12px 16px;box-shadow:0 4px 24px rgba(0,0,0,.18);display:flex;align-items:center;gap:12px;flex-wrap:wrap;}
.dfm-sess-confirm-text{margin:0;font-size:13px;line-height:1.5;color:#222;}
.dfm-sess-confirm-text small{color:#888;font-size:11px;display:block;margin-top:2px;}
.dfm-sess-confirm-actions{display:flex;gap:8px;margin-left:auto;}
.dfm-sess-confirm-ok{background:#222;color:#fff;border:none;border-radius:9px;padding:8px 16px;font-size:13px;font-weight:600;cursor:pointer;}
.dfm-sess-confirm-ok:disabled{opacity:.6;cursor:default;}
.dfm-sess-confirm-cancel{background:#fff;color:#717171;border:1px solid #EBEBEB;border-radius:9px;padding:8px 14px;font-size:13px;cursor:pointer;}

/* iOS: font-size<16px の input は focus 時にページ全体が自動ズームされるため 16px に統一 */
.dfm-auth-field input, .dfm-auth-field select { font-size: 16px; }