/* JAPACAR UI 基盤（デザイントークン＋共通部品）2026-11-13
   画面ごとの色・文字・余白のバラつきを無くす土台。値はここでだけ決め、画面側は変数と部品クラスを使う。
   第1弾の適用: 入口（/start・/manager/start）と会員エリア（membership_home）。承認後に全画面へ展開。 */

:root{
  /* 色 */
  --jc-ink:#1d2a36;        /* 本文・見出し（青みの濃紺） */
  --jc-slate:#5c6b78;      /* 補足文 */
  --jc-line:#dce2e8;       /* 罫線・枠 */
  --jc-deck:#f4f5f3;       /* ページ背景 */
  --jc-surface:#ffffff;    /* カード面 */
  --jc-harbor:#0a5c8f;     /* 操作色（ボタン・リンク） */
  --jc-harbor-deep:#084a74;
  --jc-signal:#d7282f;     /* ロゴの赤。1ページ1か所（ブランドの目印）と重大エラーのみ */
  --jc-ok:#1e7a4a;    --jc-ok-bg:#eef6f1;
  --jc-wait:#8a6400;  --jc-wait-bg:#faf6eb;
  --jc-alert:#b3261e; --jc-alert-bg:#fbf0ef;
  --jc-info:#39566d;  --jc-info-bg:#eef3f7;
  /* 形・文字 */
  --jc-radius:10px;
  --jc-font:'IBM Plex Sans','IBM Plex Sans JP',-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP',sans-serif;
}

body{font-family:var(--jc-font);color:var(--jc-ink);}

/* ---- ボタン ----
   「押せる物」に見える立体感: 面のごく薄い縦の光＋外側の影＋押した時に 1px 沈む。装飾のグラデとは別物 */
.jcui-btn{display:inline-block;padding:12px 22px;border-radius:8px;
  background:linear-gradient(to bottom,#116ba3,var(--jc-harbor) 55%,#09507d);color:#fff;
  border:1px solid #084a74;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(29,42,54,.28),0 2px 6px rgba(29,42,54,.12);
  font-family:var(--jc-font);font-weight:600;font-size:.95rem;line-height:1.2;text-decoration:none;cursor:pointer;}
.jcui-btn:hover{background:linear-gradient(to bottom,#0f6296,var(--jc-harbor-deep) 55%,#07436a);color:#fff;text-decoration:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(29,42,54,.3),0 3px 8px rgba(29,42,54,.14);}
.jcui-btn:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.22),0 1px 1px rgba(29,42,54,.2);}
.jcui-btn:focus-visible{outline:3px solid rgba(10,92,143,.35);outline-offset:2px;}
.jcui-btn--outline{background:linear-gradient(to bottom,#ffffff,#f4f7f9);color:var(--jc-harbor);border:1px solid #9fb8c9;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(29,42,54,.14),0 2px 5px rgba(29,42,54,.07);}
.jcui-btn--outline:hover{background:linear-gradient(to bottom,#f7fafc,#e9f0f5);color:var(--jc-harbor-deep);border-color:var(--jc-harbor);}
.jcui-btn--outline:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(29,42,54,.12);}

/* ---- カード ---- */
.jcui-card{background:var(--jc-surface);border:1px solid var(--jc-line);border-radius:var(--jc-radius);padding:20px 22px;}

/* ---- 状態チップ ---- */
.jcui-chip{display:inline-block;padding:3px 10px;border-radius:6px;font-size:.78rem;font-weight:600;line-height:1.5;}
.jcui-chip--ok{background:var(--jc-ok-bg);color:var(--jc-ok);}
.jcui-chip--wait{background:var(--jc-wait-bg);color:var(--jc-wait);}
.jcui-chip--alert{background:var(--jc-alert-bg);color:var(--jc-alert);}
.jcui-chip--info{background:var(--jc-info-bg);color:var(--jc-info);}

/* ---- お知らせ枠（旧: 色つきグラデ枠の置き換え） ---- */
.jcui-note{font-size:.85rem;line-height:1.65;border-radius:8px;padding:10px 12px;border:1px solid var(--jc-line);background:var(--jc-surface);color:var(--jc-ink);}
.jcui-note--wait{background:var(--jc-wait-bg);border-color:#ecdfb8;color:#6b5200;}
.jcui-note--alert{background:var(--jc-alert-bg);border-color:#f0cfcb;color:var(--jc-alert);}
.jcui-note--info{background:var(--jc-info-bg);border-color:#d6e2ec;color:var(--jc-info);}

/* ---- 状態パネル（旧: グラデのヒーロー枠の置き換え。左のキーラインが状態色） ---- */
.jcui-status{background:var(--jc-surface);border:1px solid var(--jc-line);border-left:4px solid var(--jc-info);
  border-radius:var(--jc-radius);padding:18px 22px;margin:0 0 22px;}
.jcui-status--ok{border-left-color:var(--jc-ok);}
.jcui-status--wait{border-left-color:var(--jc-wait);}
.jcui-status--alert{border-left-color:var(--jc-alert);}
.jcui-status__kicker{font-size:.8rem;font-weight:600;color:var(--jc-slate);margin:0 0 2px;}
.jcui-status h2{font-size:1.25rem;font-weight:700;letter-spacing:-.015em;color:var(--jc-ink);margin:0 0 8px;}
.jcui-status p{font-size:.92rem;color:var(--jc-ink);line-height:1.65;margin:0;}
.jcui-status .jcui-btn{margin-top:14px;}

/* ---- 入口（ログイン・登録）カード ---- */
.otp-shell{max-width:430px;margin:48px auto;padding:0 18px;}
.otp-logo{text-align:center;margin:0 0 18px;}
.otp-logo img{height:32px;}
.otp-card{background:var(--jc-surface);border:1px solid var(--jc-line);border-top:3px solid var(--jc-signal);
  border-radius:12px;padding:28px 24px;}
.otp-card h1{font-size:1.3rem;font-weight:700;letter-spacing:-.015em;color:var(--jc-ink);margin:0 0 8px;}
.otp-card p{font-size:.92rem;color:var(--jc-slate);line-height:1.7;margin:0 0 16px;}
.otp-card label{display:block;font-size:.82rem;font-weight:600;color:var(--jc-ink);margin:0 0 6px;}
.otp-card input[type=email],.otp-card input.code{width:100%;box-sizing:border-box;height:48px;border:1px solid var(--jc-line);
  border-radius:8px;padding:8px 14px;font-size:1rem;font-family:var(--jc-font);color:var(--jc-ink);background:var(--jc-surface);}
.otp-card input[type=email]:focus,.otp-card input.code:focus{outline:none;border-color:var(--jc-harbor);box-shadow:0 0 0 3px rgba(10,92,143,.15);}
.otp-card input.code{letter-spacing:8px;text-align:center;font-size:1.5rem;font-weight:700;}
.otp-card button{width:100%;height:48px;margin-top:14px;border-radius:8px;color:#fff;
  background:linear-gradient(to bottom,#116ba3,var(--jc-harbor) 55%,#09507d);
  border:1px solid #084a74;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 1px 2px rgba(29,42,54,.28),0 2px 6px rgba(29,42,54,.12);
  font-family:var(--jc-font);font-weight:600;font-size:.95rem;cursor:pointer;}
.otp-card button:hover{background:linear-gradient(to bottom,#0f6296,var(--jc-harbor-deep) 55%,#07436a);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 4px rgba(29,42,54,.3),0 3px 8px rgba(29,42,54,.14);}
.otp-card button:active{transform:translateY(1px);box-shadow:inset 0 1px 2px rgba(0,0,0,.22),0 1px 1px rgba(29,42,54,.2);}
.otp-card button:focus-visible{outline:3px solid rgba(10,92,143,.35);outline-offset:2px;}
.otp-card button:disabled{opacity:.55;cursor:default;transform:none;}
.otp-agree{display:flex;gap:8px;align-items:flex-start;margin-top:14px;font-size:.82rem;color:var(--jc-ink);line-height:1.6;}
.otp-agree input{margin-top:3px;}
.otp-agree a{color:var(--jc-harbor);}
.otp-hint{font-size:.85rem;color:var(--jc-info);background:var(--jc-info-bg);border:1px solid #d6e2ec;border-radius:8px;padding:9px 11px;}
.otp-note{font-size:.85rem;line-height:1.65;color:#6b5200;background:var(--jc-wait-bg);border:1px solid #ecdfb8;border-radius:8px;padding:9px 11px;margin:0 0 12px;}
.otp-sub{font-size:.82rem;color:var(--jc-slate);margin-top:14px;text-align:center;line-height:1.7;}
.otp-sub a,.otp-below a{color:var(--jc-harbor);font-weight:600;text-decoration:none;}
.otp-below{text-align:center;margin-top:16px;font-size:.85rem;}
.otp-err,.otp-card p.otp-err{color:var(--jc-alert);font-size:.82rem;margin:6px 0 0;}

/* ---- スクロールの印（スマホで「下に続きがある」ことを知らせる。public/js/jc-ui.js が出し入れ） ---- */
.jcui-scrollhint{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:60;
  display:flex;align-items:center;gap:6px;padding:8px 14px;border-radius:999px;
  background:rgba(29,42,54,.92);color:#fff;font-family:var(--jc-font);font-size:.82rem;font-weight:600;line-height:1;
  box-shadow:0 2px 10px rgba(29,42,54,.3);pointer-events:none;opacity:1;transition:opacity .35s;}
.jcui-scrollhint.is-hidden{opacity:0;}
.jcui-scrollhint svg{display:block;animation:jcui-nudge 1.6s ease-in-out infinite;}
@keyframes jcui-nudge{0%,100%{transform:translateY(0);}50%{transform:translateY(3px);}}
@media (prefers-reduced-motion: reduce){.jcui-scrollhint svg{animation:none;}}

/* スマホ: 文字を一段大きく（14px台の本文は画面が近い分小さく感じる。入力は16px以上＝iOSの自動ズームも防ぐ） */
@media (max-width:640px){
  .otp-shell{margin:28px auto;}
  .otp-card{padding:24px 18px;}
  .otp-card h1{font-size:1.35rem;}
  .otp-card p{font-size:1rem;}
  .otp-card label{font-size:.9rem;}
  .otp-agree,.otp-sub,.otp-below{font-size:.92rem;}
  .otp-hint,.otp-note,.jcui-note{font-size:.95rem;}
  .jcui-status h2{font-size:1.2rem;}
  .jcui-status p{font-size:1rem;}
}