/* =========================================================
   common.css – 共通トークン / ボタン / トースト / ヘッダー帯
   ========================================================= */

/* ---- トークン ---- */
:root{
  --acc:   #ff9fcf;      /* アクセント */
  --acc-2: #ffeaf3;      /* 薄い面・背景 */
  --acc-3: #ffd6e9;      /* 枠・区切り */
  --ink:   #333;         /* 文字色 */
  --muted: #7a7a7a;      /* 補助文字 */
  --panel: #fff;         /* カード面 */
  --btn-shadow:#d46b8e;  /* ボタン影 */
}

html,body{ color:var(--ink); font-family:"Meiryo", system-ui, -apple-system, "Segoe UI", sans-serif; }
*{ box-sizing:border-box; }

/* ---- ボタン（共通） ---- */
.btn{
  display:inline-block; height:32px; padding:0 12px;
  border:0; border-radius:14px; color:#fff; background:var(--acc);
  font-weight:700; font-size:.92rem; letter-spacing:.01em;
  box-shadow:0 2px 0 var(--btn-shadow);
  transition:transform .12s, filter .15s, opacity .2s;
  cursor:pointer;
}
.btn:hover{ filter:brightness(.98); transform:translateY(-1px); }
.btn:active{ transform:none; }
.btn:disabled{ opacity:.6; cursor:progress; }

/* ---- トースト ---- */
.toast{
  position:fixed; left:50%; bottom:16px; transform:translateX(-50%) translateY(6px);
  padding:.45rem .75rem; border-radius:10px; font-weight:700;
  opacity:0; pointer-events:none; box-shadow:0 6px 16px rgba(0,0,0,.12);
  transition:opacity .2s, transform .2s; z-index:9999;
}
.toast--show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast--ok{ background:#e8fff0; color:#207244; }
.toast--ng{ background:#ffe5ea; color:#b3395a; }

/* ---- タイトルバナー帯（装備もふもふと同じ帯＋上下縁） ---- */
.header-area {
  background: #ffe4e1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 0;
  border-top: 2px solid #ffb6c1;
  border-bottom: 2px solid #ffb6c1;
  box-shadow: 0 2px 4px rgba(0,0,0,.05);
}
.header-wrapper {
  display: flex;
  align-items: center;
  gap: 10px;
}
.header-title-img {
  height: 48px;
}
.header-gif {
  height: 64px;
}

/* 小物 */
.muted{ color:var(--muted); }
small { color:var(--muted); font-size:0.85em; }
.chip{ display:inline-block; padding:.15rem .5rem; border-radius:999px; font-size:.8em; background:#ffe6f3; color:var(--ink); }
.chip--ghost{ background:#f7f2f6; color:#6b5566; }
.sr-only{ position:absolute!important; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }