/* =========================================================
   あす共通デザイン｜部品（asu-components.css）
   v001 / 2026-10-01 / 見本（いろあすさんの採用前）
   先に asu-tokens.css を読み込む。クラスはすべて asu- で始まる（既存サイトのクラスとぶつからない）。
   ========================================================= */

.asu-scope {
  font-family: var(--asu-font);
  font-size: var(--asu-fs-base);
  line-height: 1.6;
  color: var(--asu-text);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
}
.asu-scope *, .asu-scope *::before, .asu-scope *::after { box-sizing: border-box; }

/* ---------- 見出し ---------- */
.asu-h1, .asu-h2, .asu-h3 { margin: 0; line-height: 1.3; letter-spacing: .01em; font-weight: 800; }
.asu-h1 { font-size: 1.75rem; }
.asu-h2 { font-size: 1.3rem; display: flex; align-items: center; gap: 10px; }
.asu-h3 { font-size: 1.05rem; }
/* 見出しの左に「あすライン」（紫→ピンク→橙の短い縦線） */
.asu-h2::before {
  content: ""; flex: none; width: 6px; height: 1.15em; border-radius: 3px;
  background: linear-gradient(180deg, var(--asu-purple), var(--asu-pink) 55%, var(--asu-orange));
}
/* 小見出し（英字ラベル） */
.asu-eyebrow {
  display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--asu-accent-ink);
}
/* 大きい見出しの文字にグラデーション */
.asu-h1--brand {
  background: var(--asu-grad-brand); -webkit-background-clip: text; background-clip: text; color: transparent;
}
[data-site="cup"] .asu-h1--brand {
  background: var(--asu-grad-metal); -webkit-background-clip: text; background-clip: text;
  filter: drop-shadow(0 2px 0 rgb(0 0 0 / 60%)) drop-shadow(0 0 14px rgb(155 92 255 / 35%));
}

/* ---------- ボタン ---------- */
.asu-btn {
  --_bg: var(--asu-surface); --_fg: var(--asu-text); --_bd: var(--asu-line);
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--asu-tap); padding: 0 22px;
  border: 1.5px solid var(--_bd); border-radius: var(--asu-radius-pill);
  background: var(--_bg); color: var(--_fg);
  font: inherit; font-size: 1rem; font-weight: 800; letter-spacing: .02em; line-height: 1.2;
  text-decoration: none; cursor: pointer; user-select: none; touch-action: manipulation;
  box-shadow: var(--asu-shadow);
  transition: transform var(--asu-dur) var(--asu-ease), box-shadow var(--asu-dur) var(--asu-ease), filter var(--asu-dur);
}
.asu-btn:focus-visible { outline: 3px solid var(--asu-focus); outline-offset: 3px; }
/* 押したとき：少し沈む。指を離すと弾んで戻る */
.asu-btn:active, .asu-btn.is-pressed { transform: translateY(1px) scale(.965); box-shadow: var(--asu-shadow-press); transition-duration: 60ms; }
.asu-btn:not(:active):not(.is-pressed) { transition-timing-function: var(--asu-ease-pop); }
@media (hover: hover) { .asu-btn:hover { filter: brightness(1.06); } }

/* 主：あすグラデーション。上側に光の筋 */
.asu-btn--primary {
  --_bg: var(--asu-grad-button); --_fg: var(--asu-on-primary); --_bd: transparent;
  text-shadow: 0 1px 1px rgb(0 0 0 / 22%);
  box-shadow: 0 6px 18px rgb(200 0 58 / 24%), inset 0 1px 0 rgb(255 255 255 / 35%);
}
.asu-btn--primary::after {
  content: ""; position: absolute; inset: 0 0 50% 0; z-index: -1; border-radius: inherit;
  background: linear-gradient(180deg, rgb(255 255 255 / 22%), transparent);
}
/* あすカップでは、銀の縁と紫・橙の光（AEOS NOVAの雰囲気） */
[data-site="cup"] .asu-btn--primary {
  border: 1.5px solid transparent;
  background: var(--asu-grad-button) padding-box, linear-gradient(180deg, #ffffff, #8a93a6 50%, #e9ecf2) border-box;
  box-shadow: -6px 0 18px rgb(155 92 255 / 40%), 6px 0 18px rgb(255 138 42 / 38%), inset 0 1px 0 rgb(255 255 255 / 30%);
}
/* 副：白地＋差し色の縁 */
.asu-btn--secondary { --_bg: var(--asu-surface); --_fg: var(--asu-accent-ink); --_bd: var(--asu-accent); }
[data-site="cup"] .asu-btn--secondary { --_bg: rgb(255 255 255 / 4%); --_fg: var(--asu-text); --_bd: var(--asu-silver-lo); }
/* 危険：消す・取り消すなど */
.asu-btn--danger { --_bg: var(--asu-danger-btn); --_fg: var(--asu-on-danger); --_bd: transparent; }
/* 文字だけ */
.asu-btn--ghost { --_bg: transparent; --_fg: var(--asu-accent-ink); --_bd: transparent; box-shadow: none; }
/* 小さい（一覧の中など）。見た目は小さく、押せる範囲は確保 */
.asu-btn--sm { min-height: var(--asu-tap-s); padding: 0 14px; font-size: .875rem; }
.asu-btn--sm::before { content: ""; position: absolute; inset: -6px -2px; }
.asu-btn--block { display: flex; width: 100%; }
.asu-btn--icon { width: var(--asu-tap); padding: 0; }
.asu-btn[disabled], .asu-btn[aria-disabled="true"] {
  cursor: not-allowed; filter: grayscale(.85) opacity(.55); box-shadow: none; transform: none;
}
/* 読み込み中 */
.asu-btn.is-loading { color: transparent; text-shadow: none; pointer-events: none; }
.asu-btn.is-loading::before {
  content: ""; position: absolute; inset: 50% auto auto 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px;
  border: 2.5px solid var(--_fg); border-right-color: transparent; border-radius: 50%;
  animation: asu-spin .7s linear infinite;
}
/* 押した場所から広がる光（JSが付ける） */
.asu-ripple {
  position: absolute; z-index: -1; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: currentColor; opacity: .28; pointer-events: none;
  animation: asu-ripple 520ms var(--asu-ease) forwards;
}
.asu-btn--primary .asu-ripple, .asu-btn--danger .asu-ripple { background: #fff; }
.asu-btn-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }

/* ---------- 入力欄 ---------- */
.asu-field { display: grid; gap: 6px; }
.asu-label { font-size: .9rem; font-weight: 800; }
.asu-label .asu-req { margin-left: 6px; font-size: .72rem; color: var(--asu-pink); }
[data-site="cup"] .asu-label .asu-req { color: #ff7a9c; }
.asu-input, .asu-select, .asu-textarea {
  width: 100%; min-height: var(--asu-tap); padding: 10px 14px;
  border: 1.5px solid var(--asu-line); border-radius: var(--asu-radius);
  background: var(--asu-surface-2); color: var(--asu-text);
  font: inherit; font-size: max(16px, 1rem); /* 16px未満だとiPhoneで画面が勝手に拡大する */
  transition: border-color var(--asu-dur), box-shadow var(--asu-dur), background var(--asu-dur);
  appearance: none; -webkit-appearance: none;
}
.asu-textarea { min-height: 96px; resize: vertical; }
.asu-input::placeholder, .asu-textarea::placeholder { color: var(--asu-muted); opacity: .8; }
.asu-input:focus, .asu-select:focus, .asu-textarea:focus {
  outline: none; border-color: var(--asu-accent); background: var(--asu-surface);
  box-shadow: 0 0 0 4px var(--asu-accent-soft);
}
.asu-select {
  padding-right: 40px;
  background-image: linear-gradient(45deg, transparent 50%, var(--asu-muted) 50%), linear-gradient(-45deg, transparent 50%, var(--asu-muted) 50%);
  background-position: right 20px center, right 14px center; background-size: 6px 6px; background-repeat: no-repeat;
}
.asu-hint { font-size: .8rem; color: var(--asu-muted); }
.asu-field.is-error .asu-input, .asu-field.is-error .asu-select, .asu-field.is-error .asu-textarea {
  border-color: var(--asu-danger); box-shadow: 0 0 0 4px var(--asu-danger-soft);
}
.asu-field.is-error .asu-hint { color: var(--asu-danger); font-weight: 700; }
/* チェック */
.asu-check { display: inline-flex; align-items: center; gap: 10px; min-height: var(--asu-tap); cursor: pointer; font-weight: 700; }
.asu-check input {
  appearance: none; -webkit-appearance: none; flex: none; width: 24px; height: 24px; margin: 0;
  border: 2px solid var(--asu-line); border-radius: 7px; background: var(--asu-surface-2);
  display: grid; place-items: center; transition: background var(--asu-dur), border-color var(--asu-dur), transform var(--asu-dur) var(--asu-ease-pop);
}
.asu-check input::after {
  content: ""; width: 7px; height: 12px; margin-top: -3px; border: solid #fff; border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0); transition: transform var(--asu-dur) var(--asu-ease-pop);
}
.asu-check input:checked { background: var(--asu-grad-button); border-color: transparent; }
.asu-check input:checked::after { transform: rotate(45deg) scale(1); }
.asu-check input:active { transform: scale(.88); }
.asu-check input:focus-visible { outline: 3px solid var(--asu-focus); outline-offset: 2px; }
/* 切り替えスイッチ */
.asu-switch { display: inline-flex; align-items: center; gap: 10px; min-height: var(--asu-tap); cursor: pointer; font-weight: 700; }
.asu-switch input {
  appearance: none; -webkit-appearance: none; flex: none; position: relative; width: 52px; height: 30px; margin: 0;
  border-radius: 999px; background: var(--asu-line); transition: background var(--asu-dur);
}
.asu-switch input::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgb(0 0 0 / 25%); transition: transform 220ms var(--asu-ease-pop);
}
.asu-switch input:checked { background: var(--asu-grad-button); }
.asu-switch input:checked::after { transform: translateX(22px); }
.asu-switch input:focus-visible { outline: 3px solid var(--asu-focus); outline-offset: 2px; }

/* ---------- カード ---------- */
.asu-card {
  position: relative; display: block; padding: 16px;
  border: 1px solid var(--asu-line); border-radius: var(--asu-radius-l);
  background: var(--asu-surface); color: inherit; text-decoration: none;
  box-shadow: var(--asu-shadow);
}
[data-site="cup"] .asu-card {
  background: linear-gradient(180deg, rgb(255 255 255 / 5%), transparent 40%), var(--asu-surface);
  border-color: var(--asu-line);
}
/* 押せるカード */
.asu-card--press { cursor: pointer; transition: transform var(--asu-dur) var(--asu-ease-pop), box-shadow var(--asu-dur); }
.asu-card--press:active { transform: scale(.98); box-shadow: var(--asu-shadow-press); transition-duration: 60ms; }
.asu-card--press:focus-visible { outline: 3px solid var(--asu-focus); outline-offset: 3px; }
/* 上に色の帯（ブランド／タイプ） */
.asu-card--band { overflow: hidden; padding-top: 22px; }
.asu-card--band::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--_band, var(--asu-grad-brand));
}
.asu-card--attack  { --_band: var(--type-grad-attack); }
.asu-card--defense { --_band: var(--type-grad-defense); }
.asu-card--speed   { --_band: var(--type-grad-speed); }
.asu-card--balance { --_band: var(--type-grad-balance); }
.asu-card--support { --_band: var(--type-grad-support); }
/* 目立たせたいカード：縁があすグラデーション */
.asu-card--feature {
  border: 2px solid transparent;
  background: linear-gradient(var(--asu-surface), var(--asu-surface)) padding-box, var(--asu-grad-brand) border-box;
}
.asu-card__title { margin: 0 0 4px; font-size: 1.05rem; font-weight: 800; }
.asu-card__meta { margin: 0; font-size: .85rem; color: var(--asu-muted); }
.asu-card__row { display: flex; align-items: center; gap: 12px; }

/* ---------- タブ ---------- */
.asu-tabs { display: grid; gap: 12px; }
.asu-tablist {
  position: relative; display: flex; padding: 4px; gap: 0;
  border-radius: var(--asu-radius-pill); background: var(--asu-surface-2); border: 1px solid var(--asu-line);
  overflow-x: auto; scrollbar-width: none;
}
.asu-tablist::-webkit-scrollbar { display: none; }
.asu-tab {
  position: relative; z-index: 1; flex: 1 0 auto; min-height: 40px; padding: 0 16px;
  border: 0; border-radius: var(--asu-radius-pill); background: transparent; color: var(--asu-muted);
  font: inherit; font-size: .92rem; font-weight: 800; white-space: nowrap; cursor: pointer;
  transition: color var(--asu-dur);
}
.asu-tab[aria-selected="true"] { color: var(--asu-on-primary); }
.asu-tab:focus-visible { outline: 3px solid var(--asu-focus); outline-offset: -3px; }
/* 選ばれたタブの下地（JSが位置と幅を入れて滑らせる） */
.asu-tab-ink {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0;
  border-radius: var(--asu-radius-pill); background: var(--asu-grad-button);
  box-shadow: 0 4px 12px rgb(200 0 58 / 22%);
  transform: translateX(var(--_x, 4px)); width: var(--_w, 0);
  transition: transform 260ms var(--asu-ease), width 260ms var(--asu-ease);
}
.asu-tabpanel[hidden] { display: none; }
.asu-tabpanel { animation: asu-fade-up 220ms var(--asu-ease); }

/* ---------- バッジ ---------- */
.asu-badge {
  --_bg: var(--asu-accent-soft); --_fg: var(--asu-accent-ink); --_dot: var(--asu-accent);
  display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 0 10px;
  border-radius: var(--asu-radius-pill); background: var(--_bg); color: var(--_fg);
  font-size: .78rem; font-weight: 800; line-height: 1; white-space: nowrap;
}
.asu-badge::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--_dot); }
.asu-badge--nodot::before { display: none; }
.asu-badge--attack  { --_bg: var(--type-attack-soft);  --_fg: var(--type-attack-ink);  --_dot: var(--type-attack); }
.asu-badge--defense { --_bg: var(--type-defense-soft); --_fg: var(--type-defense-ink); --_dot: var(--type-defense); }
.asu-badge--speed   { --_bg: var(--type-speed-soft);   --_fg: var(--type-speed-ink);   --_dot: var(--type-speed); }
.asu-badge--balance { --_bg: var(--type-balance-soft); --_fg: var(--type-balance-ink); --_dot: var(--type-balance); }
.asu-badge--support { --_bg: var(--type-support-soft); --_fg: var(--type-support-ink); --_dot: var(--type-support); }
/* 濃いバッジ（タイプ色で塗る） */
.asu-badge--solid::before { display: none; }
.asu-badge--solid.asu-badge--attack  { --_bg: var(--type-grad-attack);  --_fg: var(--type-attack-on); }
.asu-badge--solid.asu-badge--defense { --_bg: var(--type-defense);      --_fg: var(--type-defense-on); }
.asu-badge--solid.asu-badge--speed   { --_bg: var(--type-grad-speed);   --_fg: var(--type-speed-on); }
.asu-badge--solid.asu-badge--balance { --_bg: var(--type-grad-balance); --_fg: var(--type-balance-on); }
.asu-badge--solid.asu-badge--support { --_bg: var(--type-support);      --_fg: var(--type-support-on); }
/* NEW など */
.asu-badge--new { --_bg: var(--asu-pink); --_fg: #fff; }
.asu-badge--new::before { display: none; }
.asu-badge--brand { --_bg: var(--asu-grad-button); --_fg: #fff; }
.asu-badge--brand::before { display: none; }

/* ---------- お知らせ ---------- */
.asu-notice {
  --_c: var(--asu-info); --_bg: var(--asu-info-soft);
  display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: start;
  padding: 12px 14px; border-radius: var(--asu-radius);
  background: var(--_bg); color: var(--_c); border: 1px solid color-mix(in srgb, var(--_c) 22%, transparent);
  font-size: .92rem; line-height: 1.55;
}
.asu-notice__icon {
  display: grid; place-items: center; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--_c); color: var(--asu-surface); font-size: .8rem; font-weight: 900; font-style: normal;
}
.asu-notice__title { display: block; font-weight: 800; }
.asu-notice__body { color: var(--asu-text); }
.asu-notice__close {
  width: 32px; height: 32px; margin: -6px -6px 0 0; border: 0; border-radius: 50%;
  background: transparent; color: var(--_c); font-size: 1.1rem; cursor: pointer;
}
.asu-notice__close:focus-visible { outline: 3px solid var(--asu-focus); }
.asu-notice--success { --_c: var(--asu-success); --_bg: var(--asu-success-soft); }
.asu-notice--warning { --_c: var(--asu-warning); --_bg: var(--asu-warning-soft); }
.asu-notice--danger  { --_c: var(--asu-danger);  --_bg: var(--asu-danger-soft); }
.asu-notice.is-leaving { animation: asu-fade-out 200ms var(--asu-ease) forwards; }
/* 画面下に出る短いお知らせ（JS: asuKit.toast()） */
.asu-toast-host {
  position: fixed; z-index: 1000; left: 0; right: 0; bottom: calc(16px + env(safe-area-inset-bottom));
  display: grid; justify-items: center; gap: 8px; pointer-events: none; padding: 0 16px;
}
.asu-toast {
  max-width: 420px; padding: 12px 18px; border-radius: var(--asu-radius-pill);
  background: #1b1830; color: #fff; font-family: var(--asu-font); font-size: .92rem; font-weight: 700;
  box-shadow: 0 10px 30px rgb(0 0 0 / 30%); animation: asu-toast-in 260ms var(--asu-ease-pop);
}
[data-site="cup"] .asu-toast { background: #f4f2fb; color: #1b1830; }
.asu-toast.is-leaving { animation: asu-fade-out 200ms var(--asu-ease) forwards; }

/* ---------- 動き ---------- */
@keyframes asu-spin { to { transform: rotate(360deg); } }
@keyframes asu-ripple { to { transform: scale(28); opacity: 0; } }
@keyframes asu-fade-up { from { opacity: 0; transform: translateY(6px); } }
@keyframes asu-fade-out { to { opacity: 0; transform: translateY(4px); } }
@keyframes asu-toast-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
/* 動きを減らす設定の人には、動きを止める */
@media (prefers-reduced-motion: reduce) {
  .asu-scope *, .asu-toast { animation-duration: 1ms !important; transition-duration: 1ms !important; }
  .asu-ripple { display: none; }
}