@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+JP:wght@400;500;600&display=swap');
/* ============================================================================
   ds-toast — PlusOnePoint のトースト / 確認ダイアログ
   iziToast の置き換え。css/ds/tokens.css の変数に追従する。
   （このファイル単体でも壊れないよう、var() には必ずフォールバックを置く）
   本番の読み込み口: 共通ヘッダー7本。開発・確認は /prototype/popup/
   ========================================================================= */

.dst-viewport {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1200;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: auto 1fr auto;
  padding: clamp(0.75rem, 2vw, 1.25rem);
  gap: 0.75rem;
}
.dst-viewport[hidden] { display: none; }

/* 9 スロット（3×3）。position 名でここに入る */
.dst-slot {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-width: 0;
}
.dst-slot--top-left      { grid-area: 1 / 1; align-items: flex-start; }
.dst-slot--top-center    { grid-area: 1 / 2; align-items: center; }
.dst-slot--top-right     { grid-area: 1 / 3; align-items: flex-end; }
.dst-slot--bottom-left   { grid-area: 3 / 1; align-items: flex-start; justify-content: flex-end; }
.dst-slot--bottom-center { grid-area: 3 / 2; align-items: center; justify-content: flex-end; }
.dst-slot--bottom-right  { grid-area: 3 / 3; align-items: flex-end; justify-content: flex-end; }
.dst-slot--center        { grid-area: 2 / 1 / 3 / 4; align-items: center; justify-content: center; }

/* 背面の幕 */
.dst-scrim {
  position: fixed;
  inset: 0;
  z-index: 1180;
  background: var(--scrim, rgba(4, 26, 43, 0.6));
  opacity: 0;
  transition: opacity var(--dur-base, 240ms) var(--ease-out, cubic-bezier(0.22, 0.9, 0.3, 1));
  pointer-events: auto;
}
.dst-scrim.is-in { opacity: 1; }

/* ------------------------------------------------------------------ カード */
.dst {
  --dst-accent: var(--sky-600, #2e86c4);
  --dst-accent-soft: var(--sky-50, #f2f8fc);
  pointer-events: auto;
  position: relative;
  box-sizing: border-box;
  width: min(30rem, calc(100vw - 2rem));
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem 0.85rem;
  padding: 0.95rem 1.05rem;
  background: var(--surface, #fff);
  color: var(--ink, #2a343f);
  border: 1px solid var(--line, #e1e8ef);
  border-radius: var(--r-md, 14px);
  box-shadow: var(--shadow-2, 0 2px 4px rgba(20,32,44,.05), 0 6px 16px rgba(20,32,44,.08));
  font-family: "IBM Plex Sans JP", var(--font-sans, "Noto Sans JP", sans-serif);
  font-size: var(--fs-small, 0.875rem);
  line-height: 1.75;
  overflow: hidden;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* confirm（中央・ボタンあり）は少しゆったり見せる */
.dst--dialog {
  width: min(27rem, calc(100vw - 2rem));
  grid-template-columns: 1fr;
  gap: 0.6rem;
  padding: 1.6rem 1.5rem 1.3rem;
  text-align: center;
  box-shadow: var(--shadow-4, 0 8px 16px rgba(20,32,44,.06), 0 28px 64px rgba(20,32,44,.16));
}

.dst__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--r-pill, 999px);
  background: var(--dst-accent-soft);
  color: var(--dst-accent);
  font-size: 0.85rem;
  flex-shrink: 0;
}
/* ダイアログのアイコンは塗りにして芯を出す（薄い丸＋太字がぼやけて見えるため） */
.dst--dialog .dst__icon {
  width: 2.75rem;
  height: 2.75rem;
  margin: 0 auto 0.5rem;
  font-size: 1.15rem;
  background: var(--dst-accent);
  color: #fff;
}

.dst__body { min-width: 0; align-self: center; }
.dst--dialog .dst__body { align-self: auto; }
/* 閉じるボタンぶんの逃げ（トーストのみ・閉じるボタンがあるとき） */
.dst--has-close .dst__body { padding-right: 1.35rem; }

.dst__title {
  margin: 0 0 0.1rem;
  font-weight: 600;
  font-size: var(--fs-body, 1rem);
  color: var(--ink-strong, #043f6d);
  letter-spacing: 0.005em;
}
.dst--dialog .dst__title {
  font-weight: 600;
  font-size: 1.2rem;
  letter-spacing: 0.01em;
  margin-bottom: 0.35rem;
}
.dst__message { margin: 0; overflow-wrap: anywhere; }
.dst__message a { color: var(--sky-700, #1b5aa0); text-decoration: underline; }

/* 閉じるボタンは常に右上へ固定（グリッド内だと本文量で左右にぶれる） */
.dst__close {
  position: absolute;
  top: 0.5rem;
  right: 0.55rem;
  border: 0;
  background: transparent;
  color: var(--ink-subtle, #6e8093);
  font-size: 0.9rem;
  line-height: 1;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: var(--r-xs, 4px);
  transition: color var(--dur-fast, 140ms), background var(--dur-fast, 140ms);
}
.dst__close:hover { color: var(--ink, #2a343f); background: var(--surface-sunken, #f7f9fb); }

/* ボタン列 */
.dst__actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-top: 0.6rem;
}
.dst__actions button {
  font: inherit;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0.66rem 1.35rem;
  border-radius: 10px;
  border: 1px solid var(--line-strong, #cbd6e0);
  background: var(--surface, #fff);
  color: var(--ink-strong, #043f6d);
  -webkit-font-smoothing: antialiased;
  transition: transform var(--dur-fast,140ms) var(--ease-out,ease),
              background var(--dur-fast,140ms), border-color var(--dur-fast,140ms);
}
.dst__actions button:hover { background: var(--surface-sunken, #f7f9fb); border-color: var(--neutral-400, #9aaab8); }
.dst__actions button:active { transform: translateY(1px); }
/* 先頭 or focus 指定のボタン = 主アクション。影は使わず色面で立てる */
.dst__actions button.is-primary {
  background: var(--cta, #1b5aa0);
  border-color: var(--cta, #1b5aa0);
  color: #fff;
  box-shadow: none;
}
.dst__actions button.is-primary:hover {
  background: var(--cta-hover, #15467e);
  border-color: var(--cta-hover, #15467e);
  transform: translateY(-1px);
}
.dst--error .dst__actions button.is-primary {
  background: var(--pink-600, #d82d60); border-color: var(--pink-600, #d82d60);
  box-shadow: none;
}
.dst--error .dst__actions button.is-primary:hover { background: var(--pink-700, #b41f4c); }

/* progress bar */
.dst__progress {
  position: absolute;
  left: 0; bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left;
  background: var(--dst-accent);
  opacity: 0.5;
}

/* ---- タイプ別の色 ---- */
.dst--success { --dst-accent: var(--sky-600, #2e86c4);   --dst-accent-soft: var(--sky-50, #f2f8fc); }
.dst--info    { --dst-accent: var(--navy-500, #2a6291);  --dst-accent-soft: var(--navy-50, #f0f5f9); }
.dst--warning { --dst-accent: var(--orange-600, #d68b00);--dst-accent-soft: var(--orange-50, #fff8e9); }
.dst--error   { --dst-accent: var(--pink-600, #d82d60);  --dst-accent-soft: var(--pink-50, #fef2f5); }
.dst--question{ --dst-accent: var(--navy-600, #0e4f7d);  --dst-accent-soft: var(--navy-50, #f0f5f9); }

/* success だけはブランドの「肯定＝空色」、チェックを塗りにする */
.dst--success .dst__icon { background: var(--sky-600, #2e86c4); color: #fff; }
.dst--dialog.dst--success .dst__icon { background: var(--sky-600, #2e86c4); }

/* ============================================================================
   アクセントの見せ方（[data-accent] で切り替え。本番では1つに固定する）
     bar      … 左（ダイアログは上）に色帯。既定
     plain    … 帯なし。色はアイコンチップだけが持つ。いちばん静か
     panel    … トーストは左に全高の淡色コラム／ダイアログは上に淡色バンド
     hairline … 上辺に1pxの色ライン＋アイコンチップ
   ========================================================================= */

/* --- bar（既定） --- */
[data-accent="bar"] .dst { border-left: 3px solid var(--dst-accent); }
[data-accent="bar"] .dst--dialog { border-left-width: 1px; border-top: 3px solid var(--dst-accent); }

/* --- plain --- */
/* 追加スタイルなし。アイコンチップのみ */

/* --- panel（単色） --- */
[data-accent="panel"] .dst {
  padding-left: 3.6rem;
}
[data-accent="panel"] .dst > .dst__icon {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2.75rem;
  height: auto;
  border-radius: 0;
  background: var(--dst-accent);
  color: #fff;
  font-size: 1.1rem;
}
[data-accent="panel"] .dst--dialog {
  padding-left: 1.5rem;
  padding-top: 4.6rem;
}
[data-accent="panel"] .dst--dialog > .dst__icon {
  position: absolute;
  left: 0; right: 0; top: 0;
  width: 100%;
  height: 3.3rem;
  border-radius: 0;
  background: var(--dst-accent);
  color: #fff;
  margin: 0;
  font-size: 1.5rem;
}

/* --- hairline --- */
[data-accent="hairline"] .dst { border-top: 2px solid var(--dst-accent); }

/* ---- 出入りアニメーション ---- */
@keyframes dst-in-right { from { opacity: 0; transform: translateX(24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dst-in-left  { from { opacity: 0; transform: translateX(-24px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dst-in-top   { from { opacity: 0; transform: translateY(-18px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes dst-in-bottom{ from { opacity: 0; transform: translateY(18px) scale(.98); }  to { opacity: 1; transform: none; } }
@keyframes dst-in-pop   { from { opacity: 0; transform: translateY(8px) scale(.94); }   to { opacity: 1; transform: none; } }

.dst { animation: dst-in-pop var(--dur-base, 240ms) var(--ease-spring, cubic-bezier(0.34,1.4,0.5,1)) both; }
.dst-slot--top-right .dst, .dst-slot--bottom-right .dst { animation-name: dst-in-right; }
.dst-slot--top-left .dst, .dst-slot--bottom-left .dst   { animation-name: dst-in-left; }
.dst-slot--top-center .dst    { animation-name: dst-in-top; }
.dst-slot--bottom-center .dst { animation-name: dst-in-bottom; }

.dst.is-leaving {
  animation: dst-out var(--dur-base, 240ms) var(--ease-out, ease) both;
}
@keyframes dst-out { to { opacity: 0; transform: translateY(-6px) scale(.96); } }

@media (max-width: 560px) {
  .dst-viewport { grid-template-columns: 1fr; }
  .dst-slot { grid-column: 1; align-items: stretch !important; }
  .dst-slot--top-left, .dst-slot--top-center, .dst-slot--top-right { grid-area: 1 / 1; }
  .dst-slot--center { grid-area: 2 / 1; }
  .dst-slot--bottom-left, .dst-slot--bottom-center, .dst-slot--bottom-right { grid-area: 3 / 1; }
  .dst { width: 100%; }
}