/* 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 は各ページで<link>読み込み(並列化のため@import廃止) */

/* ============================================================
   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,#535D6B 0%,#626D7B 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;
  --warn:#F5A623;
  --warn-soft:#FEF6E8;
  --info-soft:var(--color-paper-3);   /* 情報=中立グレー（ローズ=ブランド/選択、朱色=警告 と区別） */

  /* Depth & shape */
  --shadow-sm:var(--shadow-card);
  --shadow:0 10px 32px rgba(66,72,82,.06);
  --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-xs:1.2rem;
  --fs-sm:1.3rem;
  --fs-md:1.5rem;
  --fs-lg:1.7rem;
  --fs-xl:2.0rem;
  --fs-2xl:2.4rem;
  --fs-3xl:3.0rem;

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

/* ---------- 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);
  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);
}
.btn-block{display:flex;width:100%}
.btn-lg{padding:17px 34px;font-size:var(--fs-lg)}
.btn .arrow{font-weight:700}
.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;
  padding:3px 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:#177A4C}
.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:var(--fs-sm);
  font-weight:500;
  color:var(--ink2);
  margin-bottom:7px;
  letter-spacing:.04em;
}
input[type="checkbox"],input[type="radio"]{accent-color:var(--primary)}
.input,.select{
  width:100%;
  padding:13px 14px;
  border:1.5px solid var(--line2);
  border-radius:var(--r-sm);
  background:#fff;
  font-size:var(--fs-md);
  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-xs);color:var(--ink3);margin-top:6px}
.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 40px;
  font-size:var(--fs-sm);
  line-height:1.7;
}
.note::before{
  position:absolute;left:15px;top:14px;
  display:flex;align-items:center;justify-content:center;
  width:15px;height:15px;
  border:1.25px solid currentColor;border-radius:50%;
  font-size:.85rem;font-weight:700;line-height:15px;
  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);
  background:var(--ink);color:#fff;
  font-size:var(--fs-sm);font-weight:500;
  padding:11px 22px;border-radius:var(--radius-pill);
  opacity:0;pointer-events:none;
  transition:opacity .25s ease,transform .25s ease;
  z-index:200;
  box-shadow:var(--shadow);
  white-space:nowrap;
}
.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}
.num{font-variant-numeric:tabular-nums;letter-spacing:.01em}
.pos{color:var(--success);font-weight:700}
.neg{color:var(--danger);font-weight:700}
.muted{color:var(--ink3)}
.small{font-size:var(--fs-xs)}
.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)}
}

/* Hallmark · component: navigation chevrons · genre: modern-minimal · design-system: design.md
 * 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{
  display:inline-grid;
  place-items:center;
  width:12px;
  height:12px;
  flex:0 0 12px;
  font-size:0;
  line-height:0;
}
.btn .arrow::before{
  content:"";
  width:6px;
  height:6px;
  border-block-start:1.5px solid currentColor;
  border-inline-end:1.5px solid currentColor;
  transform:rotate(45deg);
  transform-origin:center;
}