/* ===== Design Tokens (app.css / admin.css 共通) =====
   フロント・管理画面の両レイアウトが、各ページCSSの前に読み込む共有変数。
   ファイル固有のトークン（app: --gl/--nh、admin: --sidebar-w/--header-h）は
   各 CSS の :root 側に残す。 */
:root {
  /* --- LP パレット（一次トークン: 紺×オレンジ 王道・信頼ブルー） --- */
  --navy:        #0e2f57;
  --navy-2:      #123a6b;
  --navy-3:      #1b4374;
  --navy-hl:     #ffd28a;
  --orange:      #e8871e;
  --orange-dk:   #c26608;
  --orange-sh:   #b96812;
  --orange-tint: #fdeeda;
  --orange-line: #f0dcc0;
  --orange-line2:#f4e3cd;
  --purple:      #7a4a9e;
  --tint-purple: #f4eefa;
  --ink:         #1c2b3a;
  --body-soft:   #476180;
  --muted-2:     #5c6b7d;
  --legal-c:     #41505f;
  --sky:         #eef4fa;
  --sky-2:       #d7e8f8;
  --sky-3:       #eaf3fc;
  --sky-4:       #c8def4;
  --sky-line:    #d7e4f2;
  --gray-bg:     #eef2f7;
  --cream:       #fff7ec;
  --input-line:  #cfd9e4;
  --on-navy:     #dbe7f4;
  --on-navy-dim: #9db8d8;

  /* --- レガシーエイリアス（app.css / admin.css の既存参照が消費） --- */
  --bg:    var(--sky);
  --surf:  #fff;
  --surf2: #e9f1fa;
  --surf3: var(--sky-line);
  --bdr:   var(--sky-line);
  --bdr-strong: var(--sky-4);
  --a:     var(--navy-2);
  --ah:    #1d5aa8;
  --al:    rgba(18,58,107,.1);
  --g:     var(--orange);
  --t:     var(--ink);
  --tm:    rgba(28,43,58,.85);
  --tf:    var(--body-soft);
  --sh:    0 4px 24px rgba(14,47,87,.1);
  --r:     12px;
  --r-md:  10px;
  --r-sm:  8px;
  --r-full: 999px;
  --c-danger:    #c0392b;
  --c-danger-dk: #922b21;
  --c-warning:   var(--orange-dk);
  --c-success:   #27ae60;
  --sh-sm: 0 1px 6px rgba(14,47,87,.06);
  --serif: 'Roboto', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', system-ui, sans-serif;
  --sans:  'Roboto', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', system-ui, sans-serif;
  --mono:  var(--sans);
}

input::placeholder,
textarea::placeholder {
  color: #64748b;
  opacity: 1;
}

.tax-label {
  font-size: 0.5em;
  font-weight: normal;
  color: inherit;
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  border-color: var(--a);
  box-shadow: 0 0 0 3px var(--al);
}

.form-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* 無効/送信中ボタン共通（多重送信ガード: app.js / admin.js） */
button:disabled {
  opacity: .6;
  cursor: not-allowed;
}

/* パスワード表示/非表示トグル（app.js / admin.js が自動注入） */
.password-field { position: relative; display: block; }
.password-field input { padding-right: 44px; }
.password-toggle {
  position: absolute;
  right: 6px;
  top: 50%;                          /* 入力欄の高さ差（app/admin/compact）に非依存 */
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: var(--tm);
}
.password-toggle:hover { color: var(--t); }
.password-toggle svg { width: 20px; height: 20px; }
.password-toggle .icon-eye-off { display: none; }
.password-toggle.is-visible .icon-eye { display: none; }
.password-toggle.is-visible .icon-eye-off { display: block; }