/* Hallmark · genre: modern-minimal · macrostructure: shared-foundation · design-system: design.md · designed-as-app · pre-emit critique: P5 H5 E4 S5 R5 V4 */
/* tokens.css は各 HTML が <link rel="stylesheet" href="tokens.css?v=..."> で base.css より先に読み込む
   （@import は直列読み込みになり、キャッシュバスターも二重管理になるため 2026-09-16 に廃止） */

/* ============================================================
   RISE Lending — base.css
   Design tokens + reset + shared components.
   White-label: change the tokens below and the whole site follows.
   ============================================================ */

:root{
  /* Brand */
  --primary:var(--color-accent);
  --primary-deep:var(--color-navy-800);
  --primary-soft:var(--color-paper-3);
  --primary-grad:linear-gradient(135deg,#272C33 0%,#39404A 100%);

  /* Ink (text) */
  --ink:var(--color-ink);
  --ink2:var(--color-ink-2);
  --ink3:var(--color-muted);
  --ink-invert:#FFFFFF;

  /* Surfaces */
  --bg:var(--color-paper);
  --bg-soft:var(--color-paper-2);
  --bg-mint:var(--color-paper-3);
  --card:#FFFFFF;
  --line:var(--color-rule);
  --line2:var(--color-rule-2);

  /* Semantic */
  --accent:var(--color-yellow);        /* CTA on dark */
  --danger:var(--color-negative);
  --danger-soft:#FBEDE8;
  --success:var(--color-positive);
  --success-soft:#EAF7F1;
  --success-ink:#177A4C;              /* 増加を示す数値の文字色（白地 5.3:1）。ホームの「本日の利息」だけで使う */
  --warn:#F5A623;
  --warn-soft:#FEF6E8;
  --info-soft:var(--color-paper-3);   /* 情報=中立グレー（ローズ=ブランド/選択、朱色=警告 と区別） */
  --chart-bar-strong:var(--color-accent);   /* 棒グラフ: 最新（選択中）の棒 */
  --chart-bar-soft:var(--color-blue-300);   /* 棒グラフ: それ以外の棒（rose 300。rose 100 だと白地で棒の形が読みにくい） */

  /* Depth & shape */
  --shadow-sm:var(--shadow-card);
  --shadow:0 10px 32px rgba(31,35,40,.10);
  --shadow-lg:var(--shadow-product);
  --r-sm:var(--radius-input);
  --r:var(--radius-card);
  --r-lg:20px;

  /* Type */
  --font:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
  --font-latin:"Inter",Arial,sans-serif;
  /* --fs-* は tokens.css に一本化した（base.css を読むページはすべて tokens.css を先に読む） */

  /* Layout */
  --header-h:56px;
  --tabbar-h:62px;
  --content-max:760px;
  --lp-max:1120px;

  /* 進む・戻るのシェブロン（マイページ全体で1つの形）。文字の「›」「‹」は使わない。
     線幅 1.6px・高さ 10px・角は丸め。色は置いた場所の currentColor（行末はグレー、リンクは文字と同じ色）。 */
  --icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M1.75 2l4.5 5-4.5 5' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --chevron-w:8px;
  --chevron-h:14px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:62.5%;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 12px);overflow-x:clip}
body{
  font-family:var(--font);
  font-size:var(--fs-md);
  font-weight:400;
  line-height:1.8;
  letter-spacing:.01em;
  color:var(--ink);
  background:var(--bg);
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font-family:inherit;font-size:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,select,textarea{font-family:inherit;font-size:inherit;color:inherit}
ul,ol{list-style:none}
strong{font-weight:700}
:focus-visible{outline:2px solid var(--primary);outline-offset:2px}

/* Hallmark · component: global tap highlight reset · genre: modern-minimal · design-system: design.md
 * Browser-native rectangular tap overlay is removed; semantic selected states and
 * keyboard-visible focus rings remain controlled by each component.
 * mobile: pass (320 / 375 / 414 / 768) · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
html,
a,
button,
summary,
label,
input,
select,
textarea,
[role="button"],
[role="link"],
[tabindex]{
  -webkit-tap-highlight-color:transparent;
}
.btn,
button,
input[type="button"],
input[type="submit"],
[role="button"]{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  touch-action:manipulation;
}
.btn:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input[type="button"]:focus:not(:focus-visible),
input[type="submit"]:focus:not(:focus-visible),
[role="button"]:focus:not(:focus-visible){
  outline:none;
}

/* ---------- Typography helpers ---------- */
.section-label{
  display:block;
  color:var(--primary);
  font-size:var(--fs-sm);
  font-family:var(--font-latin),var(--font);
  font-weight:600;
  letter-spacing:.14em;
  margin-bottom:8px;
}
.section-title{
  font-size:clamp(2.2rem,5.2vw,3.2rem);
  font-weight:700;
  line-height:1.35;
  letter-spacing:.01em;
}
.section-lead{
  margin-top:14px;
  color:var(--ink2);
  font-size:var(--fs-md);
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-weight:500;
  font-size:var(--fs-md);
  line-height:1.3;
  letter-spacing:.04em;
  border-radius:6px;
  padding:14px 28px;
  min-height:44px;
  transition:background .2s ease,border-color .2s ease,transform .15s ease;
  text-align:center;
  white-space:nowrap;
}
.btn:active{transform:scale(.97)}
.btn-primary{
  background:var(--primary);
  color:#fff;
  box-shadow:none;
}
.btn-accent{
  background:var(--accent);
  color:var(--ink);
  box-shadow:none;
}
.btn-outline{
  background:#fff;
  color:var(--primary-deep);
  border:1.5px solid var(--primary);
}
.btn-ghost{
  color:var(--ink2);
  border:1.5px solid var(--line2);
  background:#fff;
}
.btn-danger{
  background:#fff;
  color:var(--danger);
  border:1.5px solid var(--danger);
}
/* 確認シートの実行ボタンだけは朱の塗りにする（design-rules §4「主ボタンは塗り」）。
   取消（.btn-ghost）と同じ形・同じ幅で文字色しか違わない状態をなくす。
   ページ本体の .btn-danger（期限前返還カード・退会リンク）は枠線のまま残して誤操作しにくくする。 */
.confirm-actions .btn-danger{
  background:var(--danger);
  color:var(--ink-invert);
  border-color:var(--danger);
}
/* 反復行のボタン（契約書類の「ダウンロード」など）。ローズは主ボタン・選択状態の色なので使わない */
.btn-quiet{
  background:#fff;
  color:var(--ink2);
  border:1.5px solid var(--line2);
}
/* 全幅ボタンは 1 定義（design-rules §4: 52px・16px・700・角丸12）。
   app.css / site.css で高さ・文字・角丸を再定義しない。 */
.btn-block{
  display:flex;width:100%;
  min-height:52px;
  padding:0 20px;
  font-size:1.6rem;font-weight:700;
  border-radius:var(--radius-app-control);
}
.btn-lg{padding:17px 34px;font-size:var(--fs-lg)}
.btn-block.btn-lg{min-height:52px;padding:0 20px;font-size:1.6rem}
.btn[disabled]{opacity:.45;pointer-events:none}
.btn-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}

/* ---------- Cards ---------- */
.card{
  background:var(--card);
  border-radius:var(--r);
  box-shadow:none;
  border:1px solid var(--line);
}
.card-pad{padding:22px}

/* ---------- Coin icon ---------- */
.coin-ic{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:36px;height:36px;
  border-radius:50%;
  overflow:hidden;
  flex:0 0 auto;
  background:#fff;
}
.coin-ic img{width:100%;height:100%;object-fit:cover}
.coin-ic img[src*="sol.png"],.coin-ic img[src*="ada.png"]{width:76%;height:76%;object-fit:contain}
.coin-ic.sm{width:28px;height:28px}
.coin-ic.lg{width:56px;height:56px}

/* ---------- Chips / badges ---------- */
.chip{
  display:inline-flex;align-items:center;gap:4px;
  font-size:var(--fs-xs);font-weight:500;line-height:1.5;
  padding:4px 10px;border-radius:var(--radius-pill);
  background:var(--primary-soft);color:var(--primary-deep);
  letter-spacing:.03em;
}
.chip-warn{background:var(--warn-soft);color:var(--color-warn-ink)}
.chip-danger{background:var(--danger-soft);color:var(--danger)}
.chip-info{background:#fff;color:var(--color-ink);box-shadow:inset 0 0 0 1px var(--color-rule-2)}  /* 情報/進行中=白地アウトライン。中立=グレー塗り と区別 */
.chip-success{background:var(--success-soft);color:var(--success)}
.chip-campaign{background:var(--color-navy-800);color:var(--color-gold)}

/* ---------- Forms ---------- */
.field{margin-bottom:18px}
.card-pad .field:last-child{margin-bottom:0}
.field-label{
  display:block;
  font-size:1.4rem;
  font-weight:700;
  color:var(--ink);
  margin-bottom:8px;
  letter-spacing:.02em;
  line-height:1.5;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--primary)}
.input,.select{
  width:100%;
  min-height:52px;
  padding:13px 16px;
  border:1.5px solid var(--line2);
  border-radius:var(--radius-panel);
  background:#fff;
  font-size:1.6rem;
  transition:border-color .15s ease;
  -webkit-appearance:none;
  appearance:none;
}
.input:focus,.select:focus{border-color:var(--primary);outline:none}
.input::placeholder{color:var(--ink3)}
.select-wrap{position:relative}
.select-wrap::after{
  content:"";
  position:absolute;right:14px;top:50%;
  width:8px;height:8px;
  border-right:2px solid var(--ink3);
  border-bottom:2px solid var(--ink3);
  transform:translateY(-70%) rotate(45deg);
  pointer-events:none;
}
.field-note{font-size:var(--fs-sm);color:var(--ink3);margin-top:6px;line-height:1.6}
/* 欄の直下に固定表示するエラー（トーストで出さない）。show で表示。 */
.field-error{display:none;margin-top:7px;font-size:var(--fs-sm);line-height:1.6;color:var(--danger);font-weight:500}
.field-error.show,.field-error:not([hidden]).is-visible{display:block}
.section-title,.auth-title,.page-title{overflow-wrap:anywhere;min-width:0}

/* ---------- Notes / alerts ---------- */
.note{
  position:relative;
  border-radius:var(--r-sm);
  padding:12px 16px 12px 42px;
  font-size:var(--fs-sm);
  line-height:1.7;
}
.note::before{
  position:absolute;left:14px;top:13px;
  display:flex;align-items:center;justify-content:center;
  width:18px;height:18px;
  border:1.25px solid currentColor;border-radius:50%;
  font-size:1.2rem;font-weight:700;line-height:18px;
  opacity:.82;
}
.note-info::before{content:"i"}
.note-warn::before,.note-danger::before{content:"!"}
.note-warn{background:var(--warn-soft);color:var(--color-warn-ink)}
.note-danger{background:var(--danger-soft);color:var(--color-negative-ink)}
.note-info{background:var(--bg-mint);color:var(--ink2)}
.note strong{display:block;margin-bottom:2px}

/* ---------- Toast ---------- */
.toast{
  position:fixed;
  left:50%;bottom:calc(var(--tabbar-h) + 24px);
  transform:translate(-50%,20px);
  width:max-content;max-width:calc(100% - 32px);
  background:var(--ink);color:#fff;
  font-size:var(--fs-md);font-weight:500;line-height:1.5;
  padding:12px 20px;border-radius:var(--radius-panel);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:200;
  box-shadow:var(--shadow);
  white-space:normal;text-align:center;
}
.toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- Utilities ---------- */
.tc{text-align:center}
.mt-8{margin-top:8px}.mt-16{margin-top:16px}.mt-24{margin-top:24px}
.mb-8{margin-bottom:8px}.mb-16{margin-bottom:16px}
/* 数値は必ず Inter・tabular（和文を含む .num もあるので --font にフォールバック） */
.num{font-family:var(--font-latin),var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.pos{color:var(--ink);font-weight:700}   /* 数値の増減は符号で示し、色は使わない（design-rules §3） */
.neg{color:var(--ink);font-weight:700}
.muted{color:var(--ink3)}
.small{font-size:var(--fs-sm)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

@media (hover:hover) and (pointer:fine){
  .btn-primary:hover{background:var(--color-accent-hover)}
  .btn-accent:hover{background:var(--color-gold)}
  .btn-outline:hover{background:var(--color-soft-blue)}
}

/* 進む・戻るのシェブロン（1つの部品）: 形は :root の --icon-chevron。HTML は <span class="ui-chevron" aria-hidden="true"></span>
 * Font glyphs have uneven optical bounds. A fixed square and geometric stroke keep
 * every forward affordance visually centered against its label at every viewport.
 * mobile: pass (320 / 375 / 414 / 768) · pre-emit critique: P5 H5 E5 S5 R5 V5
 */
.btn .arrow,
.ui-chevron{
  display:inline-block;
  flex:0 0 var(--chevron-w);
  width:var(--chevron-w);
  height:var(--chevron-h);
  background-color:currentColor;
  -webkit-mask:var(--icon-chevron) center / 100% 100% no-repeat;
  mask:var(--icon-chevron) center / 100% 100% no-repeat;
  vertical-align:middle;
}
/* 戻る（左向き）は同じ形を左右反転 */
.ui-chevron.is-back{transform:scaleX(-1)}

/* ============================================================
   契約書面の表示と同意（仕様書 §2.3）
   最下部までスクロールして初めてチェックできる。
   ============================================================ */
.auth-card.auth-card-wide{max-width:680px}
.agreement-meta{
  display:grid;grid-template-columns:auto 1fr;gap:4px 12px;
  margin:20px 0 10px;padding:12px 14px;
  background:var(--bg-soft);border-radius:var(--r-sm);
  font-size:var(--fs-sm);
}
.agreement-meta .k{color:var(--ink3)}
.agreement-meta .v{color:var(--ink);font-weight:700}
/* 契約書の見出し。上のリード文とのあいだを空ける */
.agreement-label{margin-top:22px}
.agreement-box{
  height:min(46vh,380px);overflow-y:auto;overscroll-behavior:contain;
  padding:18px 18px 22px;
  border:1px solid var(--line2);border-radius:var(--radius-panel);
  background:var(--card);
  font-size:var(--fs-md);line-height:1.8;color:var(--ink2);
  transition:border-color var(--dur-short) var(--ease-out);
}
.agreement-box:focus-visible{outline:2px solid var(--color-focus);outline-offset:2px}
.agreement-box.is-read{border-color:var(--success)}
.agreement-box h3{
  margin:22px 0 6px;font-size:var(--fs-lg);font-weight:700;color:var(--ink);line-height:1.5;
}
.agreement-box h3:first-child{margin-top:0}
.agreement-box p{margin:0 0 10px}
.agreement-box ul{margin:0 0 10px;padding-left:1.2em}
.agreement-box li{margin:4px 0}
.agreement-box strong{color:var(--ink);font-weight:700}
.agreement-hint{
  margin:8px 0 0;font-size:var(--fs-sm);color:var(--ink3);text-align:center;line-height:1.6;
}
/* 「最後まで進む」ボタン（枠内を末尾までスクロールして到達判定を走らせる） */
.agreement-jump{
  display:flex;align-items:center;justify-content:center;
  width:100%;min-height:44px;margin-top:8px;
  border:1.5px solid var(--line2);border-radius:var(--radius-app-control);
  background:#fff;color:var(--primary-deep);
  font-size:var(--fs-sm);font-weight:700;
}
.agreement-jump[hidden]{display:none}
/* 同意チェック: label 全体をタップ領域に（48px）・チェックボックス 24px。
   input が label の中にあっても外にあっても同じ見た目になる。 */
.agreement-consent,.auth-consent{
  display:flex;align-items:center;gap:12px;
  min-height:48px;margin-top:16px;
  text-align:left;
}
.agreement-consent label,.auth-consent label{
  display:block;flex:1 1 auto;min-width:0;
  padding:8px 4px;
  font-size:var(--fs-md);line-height:1.5;color:var(--ink);
  text-align:left;cursor:pointer;
}
/* input を label の中に入れた構造（推奨: <label><input type="checkbox">文言</label>）では label が行全体 */
.agreement-consent label:has(> input),.auth-consent label:has(> input){
  display:flex;align-items:center;gap:12px;min-height:48px;
}
.agreement-consent input[type="checkbox"],.auth-consent input[type="checkbox"]{
  flex:0 0 auto;width:24px;height:24px;margin:0;accent-color:var(--primary);
}
.agreement-consent input:disabled + label{color:var(--ink3);cursor:not-allowed}
.agreement-consent input:disabled{cursor:not-allowed}
.agreement-note{
  margin:12px 0 0;font-size:var(--fs-sm);line-height:1.7;color:var(--ink3);
}
/* 満期後の取扱いの選択 */
.after-maturity{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.after-maturity label{
  display:flex;gap:10px;align-items:flex-start;
  padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm);
  cursor:pointer;transition:border-color var(--dur-micro) var(--ease-out),background var(--dur-micro) var(--ease-out);
}
.after-maturity label:has(input:checked){border-color:var(--primary);background:var(--color-soft-blue)}
.after-maturity input{width:22px;height:22px;margin:2px 0 0;flex:0 0 auto}
.after-maturity label{min-height:56px;padding:14px 16px;border-radius:var(--radius-panel)}
.after-maturity .am-name{display:block;font-size:var(--fs-md);font-weight:700;color:var(--ink);line-height:1.5}
.after-maturity .am-desc{display:block;margin-top:2px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink3)}


/* ============================================================
   共通部品（2026-09-16 高齢者対応の改修で追加。app / 認証の両方で使う）
   design-rules §4 準拠。Phase 2 の各ページはここから選ぶ。
   ============================================================ */

/* 「次にやること」pill: 主数値の直下に 1 つだけ置く。
   <a class="next-action" href="../verify.html"><span class="na-label">次にやること</span><span class="na-text">本人確認を完了する</span><span class="na-arrow" aria-hidden="true"></span></a> */
.next-action{
  display:flex;align-items:center;gap:10px;
  min-height:52px;padding:8px 16px;
  border-radius:var(--radius-panel);
  background:var(--color-soft-blue);color:var(--color-accent-text);
  font-size:var(--fs-md);font-weight:700;line-height:1.4;
}
.next-action .na-label{
  flex:0 0 auto;padding:2px 8px;border-radius:var(--radius-chip);
  background:var(--card);color:var(--color-accent-text);
  font-size:var(--fs-sm);font-weight:700;letter-spacing:.02em;
}
.next-action .na-text{flex:1 1 auto;min-width:0}
.next-action .na-arrow{
  flex:0 0 var(--chevron-w);width:var(--chevron-w);height:var(--chevron-h);
  background-color:currentColor;
  -webkit-mask:var(--icon-chevron) center / 100% 100% no-repeat;
  mask:var(--icon-chevron) center / 100% 100% no-repeat;
}
.next-action:active{opacity:.8}

/* ステップ番号付きの見出し（1画面内のステップ「1 銘柄」「2 数量」…）。
   <h2 class="step-head"><span class="step-no">1</span>銘柄を選ぶ</h2> */
.step-head{
  display:flex;align-items:center;gap:10px;
  margin:0 0 10px;
  font-size:1.8rem;font-weight:700;line-height:1.35;letter-spacing:.01em;color:var(--primary-deep);
}
.step-head .step-no{
  flex:0 0 auto;display:inline-grid;place-items:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--primary-deep);color:#fff;
  font-family:var(--font-latin),var(--font);font-size:1.5rem;font-weight:700;line-height:1;
}
.step-head .step-note{margin-left:auto;font-size:var(--fs-sm);font-weight:500;color:var(--ink3)}

/* 5段ステッパー（口座開設: メール認証 → SMS認証 → 本人確認 → 基本契約 → 完了）
   <div class="stepper" data-step="1" data-total="5">
     <p class="stepper-head">ステップ <span class="num">1/5</span> メール認証</p>
     <ol class="stepper-track"><li class="is-current">メール認証</li><li>SMS認証</li><li>本人確認</li><li>基本契約</li><li>完了</li></ol>
   </div>
   通過済みは li.is-done、現在地は li.is-current。ページ内ステップ（貸付 1/4 等）にも使える。 */
.stepper{display:grid;gap:10px;margin:0 0 20px}
.stepper-head{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--primary-deep);line-height:1.5}
.stepper-head .num{color:var(--primary);margin:0 .2em}
.stepper-track{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:6px;margin:0;padding:0;list-style:none}
.stepper-track li{
  position:relative;padding-top:12px;
  font-size:var(--fs-xs);line-height:1.35;color:var(--ink3);text-align:center;
  overflow-wrap:anywhere;
}
.stepper-track li::before{
  content:"";position:absolute;left:0;right:0;top:0;height:6px;border-radius:var(--radius-pill);
  background:var(--line);
}
.stepper-track li.is-done::before{background:var(--success)}
.stepper-track li.is-current::before{background:var(--primary)}
.stepper-track li.is-current{color:var(--primary-deep);font-weight:700}
.stepper-track li.is-done{color:var(--ink2)}

/* 送付先アドレスの表示（ネットワーク名 → QR → 4桁区切りの全文 → コピー → 直下に赤の注意1行）
   <div class="address-block">
     <div class="ab-network">Bitcoin ネットワーク</div>
     <div class="ab-qr">…svg…</div>
     <div class="ab-address num" id="addr">bc1q 7kmx 4dp0 …</div>
     <button class="btn btn-outline btn-block">送付先アドレスをコピー</button>
     <p class="ab-warn">Bitcoin 以外のネットワークで送ると資産が失われます。</p>
   </div> */
.address-block{
  display:flex;flex-direction:column;align-items:center;gap:14px;
  padding:20px 16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-app-card);
}
.address-block .ab-network{font-size:var(--fs-md);font-weight:700;color:var(--primary-deep)}
.address-block .ab-qr{width:200px;height:200px;padding:10px;border:1px solid var(--line);border-radius:var(--radius-panel);background:#fff}
.address-block .ab-qr svg{width:100%;height:100%}
.address-block .ab-address{
  width:100%;padding:14px 16px;
  border:1px dashed var(--line2);border-radius:var(--radius-panel);background:var(--bg-soft);
  font-family:var(--font-latin),var(--font);font-size:1.5rem;font-weight:500;line-height:1.7;letter-spacing:.02em;
  color:var(--ink);text-align:center;overflow-wrap:anywhere;word-break:break-all;
  user-select:all;-webkit-user-select:all;
}
.address-block .ab-warn{
  width:100%;margin:0;
  font-size:var(--fs-sm);line-height:1.6;font-weight:500;color:var(--danger);text-align:center;
}

/* 送信中 → 完了の状態（確認シート内・ページ内どちらでも）。
   <div class="submit-state" hidden><div class="ss-visual"><span class="ss-spinner"></span><svg class="ss-check">…</svg></div>
   <strong class="ss-title">貸付を開始しました</strong><p class="ss-text">…</p><p class="ss-meta">契約番号 …</p><a class="btn btn-primary btn-block">…</a></div>
   .is-visible で表示、.is-complete でチェックに切替。 */
.submit-state{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;min-height:320px;padding:32px 20px;text-align:center;
  background:#fff;
}
.submit-state[hidden]{display:none}
.submit-state .ss-visual{position:relative;width:82px;height:82px;margin-bottom:14px}
.submit-state .ss-spinner{position:absolute;inset:0;border:4px solid var(--color-blue-100);border-top-color:var(--primary);border-radius:50%;animation:ssSpin .8s linear infinite}
.submit-state .ss-check{position:absolute;inset:0;width:82px;height:82px;opacity:0;transform:scale(.78);transition:opacity var(--dur-long) var(--ease-out),transform var(--dur-long) var(--ease-out)}
.submit-state .ss-check circle{fill:var(--success);stroke:none}
.submit-state .ss-check path{fill:none;stroke:var(--ink-invert);stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.submit-state .ss-title{font-size:2rem;font-weight:700;line-height:1.4;color:var(--primary-deep)}
.submit-state .ss-text{margin:0;font-size:var(--fs-md);line-height:1.7;color:var(--ink2);max-width:36ch}
.submit-state .ss-meta{margin:4px 0 0;font-size:var(--fs-sm);line-height:1.6;color:var(--ink3)}
.submit-state .btn{margin-top:18px;max-width:320px}
.submit-state.is-complete .ss-spinner{opacity:0;animation:none}
.submit-state.is-complete .ss-check{opacity:1;transform:scale(1)}
@keyframes ssSpin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.submit-state .ss-spinner{animation:none}.submit-state .ss-check{transition:none}}

/* パスワード欄の「表示」トグル
   <div class="input-with-toggle"><input class="input" type="password"><button type="button" class="input-toggle" aria-pressed="false">表示</button></div> */
.input-with-toggle{position:relative}
.input-with-toggle .input{padding-right:72px}
.input-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  min-width:44px;min-height:44px;padding:0 10px;
  border-radius:var(--radius-chip);
  color:var(--primary-deep);font-size:var(--fs-sm);font-weight:700;
}
.input-toggle:active{background:var(--bg-soft)}

/* 6桁コードの単一入力欄（letter-spacing で桁を見せる）
   <input class="input otp-single num" inputmode="numeric" autocomplete="one-time-code" maxlength="6" pattern="[0-9]*"> */
.otp-single{
  min-height:60px;padding:8px 12px 8px calc(12px + .45em);
  font-family:var(--font-latin),var(--font);font-size:2.8rem;font-weight:600;letter-spacing:.45em;
  text-align:center;caret-color:var(--primary);
}
.otp-single::placeholder{color:var(--line2);letter-spacing:.45em}
/* 再送の行（60秒カウントダウン付き）
   <p class="resend-line"><button type="button" class="resend-btn" disabled>認証コードを再送する（<span class="num">60</span>秒後）</button></p> */
.resend-line{margin:12px 0 0;text-align:center}
.resend-btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:44px;padding:0 12px;
  color:var(--primary-deep);font-size:var(--fs-sm);font-weight:700;text-decoration:underline;text-underline-offset:3px;
}
.resend-btn:disabled{color:var(--ink3);text-decoration:none;cursor:default}

/* 画面末尾の「ご注意」（注記は 1 画面 1 回・ここに集約）
   <section class="notice-section"><h2>ご注意</h2><ul><li>…</li></ul></section> */
.notice-section{padding-top:4px}
.notice-section h2{margin:0 0 8px;font-size:var(--fs-md);font-weight:700;color:var(--ink2)}
.notice-section ul{display:grid;gap:6px;padding-left:1.2em;list-style:disc}
.notice-section li,.notice-section p{margin:0;font-size:var(--fs-sm);line-height:1.7;color:var(--ink3)}

/* 主ボタンの直上の不可逆の一文（13px・2行以内） */
.irreversible-note{margin:0 0 10px;font-size:var(--fs-sm);line-height:1.6;color:var(--ink2);text-align:center}

/* 空状態（状態1文＋次の1文＋主ボタン1つ） */
.empty-state{padding:28px 16px;text-align:center;background:#fff;border:1px dashed var(--line2);border-radius:var(--radius-app-card)}
.empty-state .es-title{margin:0;font-size:var(--fs-md);font-weight:700;color:var(--ink)}
.empty-state .es-text{margin:6px 0 0;font-size:var(--fs-sm);line-height:1.7;color:var(--ink3)}
.empty-state .btn{margin-top:16px}

/* 下部固定バー（主ボタン）を置く画面は本文末尾に 88px の余白 */
.has-bottom-bar{padding-bottom:88px}