/* ==========================================================================
   demo-ui.css — 全サンプルアプリ共通UI
   これを読むだけで全サンプルの見た目が揃う。デザイナー投入時もここだけ直せばよい。
   ※ tokens.css を先に読み込むこと
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--c-base);color:var(--c-text);font-family:var(--f-sans);
  line-height:1.75;-webkit-font-smoothing:antialiased}
body.has-dk-bar{padding-top:0}
img{max-width:100%;height:auto}
h1,h2,h3{line-height:1.3;margin:0}

/* ---------- サンプルバー ---------- */
.dk-bar{position:sticky;top:0;z-index:var(--z-header);display:flex;align-items:center;gap:.75rem;
  flex-wrap:wrap;padding:.6rem clamp(.9rem,2.5vw,1.5rem);
  background:linear-gradient(100deg,rgba(var(--c-accent-rgb),.10),rgba(var(--c-accent-2-rgb),.08));
  border-bottom:1px solid var(--c-accent-bd);backdrop-filter:blur(10px)}
.dk-bar__dot{width:8px;height:8px;border-radius:50%;background:var(--c-accent);flex:none;
  box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),.55);animation:dkPulse 2.2s infinite}
@keyframes dkPulse{70%{box-shadow:0 0 0 9px rgba(var(--c-accent-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--c-accent-rgb),0)}}
.dk-bar__msg{margin:0;flex:1;min-width:200px;font-size:var(--fs-xs);color:var(--c-text-dim)}
.dk-bar__msg strong{color:var(--c-accent-ink)}
.dk-bar__reset,.dk-bar__back{font-size:var(--fs-xs);font-weight:700;white-space:nowrap;
  padding:.45em 1em;border-radius:var(--r-pill);border:var(--bd);background:var(--c-surface);
  color:var(--c-text);cursor:pointer;text-decoration:none;transition:all .2s var(--ease-soft)}
.dk-bar__reset:hover,.dk-bar__back:hover{background:var(--grad-brand);border-color:transparent;color:var(--c-on-accent)}
/* プライバシーポリシーへの導線。ボタン2つと並ぶので、
   押しボタンには見えないよう控えめなテキストリンクにする */
.dk-bar__privacy{font-size:var(--fs-xs);white-space:nowrap;color:var(--c-text-dim);
  text-decoration:underline;text-underline-offset:2px}
.dk-bar__privacy:hover{color:var(--c-accent-ink)}
@media(prefers-reduced-motion:reduce){.dk-bar__dot{animation:none}}

/* ---------- レイアウト ---------- */
.dk-wrap{max-width:1100px;margin-inline:auto;padding:clamp(1.25rem,3vw,2.5rem)}
.dk-head{margin-bottom:var(--s-6)}
.dk-head h1{font-size:clamp(1.4rem,1rem+1.6vw,2rem);font-weight:900}
.dk-head p{margin:.5rem 0 0;color:var(--c-muted);font-size:var(--fs-sm)}
.dk-grid{display:grid;gap:var(--s-5)}
@media(min-width:900px){.dk-grid--2{grid-template-columns:1fr 1fr}
  .dk-grid--side{grid-template-columns:1.4fr .6fr;align-items:start}}

/* ---------- パネル ---------- */
.dk-panel{border:var(--bd);border-radius:var(--r-card);background:var(--c-surface);
  padding:clamp(1rem,2.2vw,1.6rem);box-shadow:var(--sh-card)}
.dk-panel__head{display:flex;align-items:center;justify-content:space-between;gap:.75rem;
  margin-bottom:var(--s-4);flex-wrap:wrap}
.dk-panel__head h2{font-size:1rem;font-weight:700}
.dk-head .dk-eyebrow,
.dk-eyebrow{font-family:var(--f-display);font-size:10px;line-height:1;font-weight:600;
  letter-spacing:.16em;text-transform:uppercase;color:var(--c-accent-ink);margin:0}

/* ---------- ボタン ---------- */
.dk-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45em;
  padding:.62em 1.3em;border-radius:var(--r-pill);border:var(--bd);background:var(--c-surface-2);
  color:var(--c-text);font-size:var(--fs-sm);font-weight:700;cursor:pointer;
  transition:all .2s var(--ease-soft);font-family:inherit}
.dk-btn:hover{transform:translateY(-1px);border-color:var(--c-accent)}
.dk-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
.dk-btn--primary{background:var(--grad-brand);border-color:transparent;color:var(--c-on-accent)}
.dk-btn--ghost{background:none}
.dk-btn--sm{padding:.4em .9em;font-size:var(--fs-xs)}

/* ---------- フォーム ---------- */
.dk-field{margin-bottom:var(--s-4)}
.dk-field > label{display:block;font-size:var(--fs-xs);font-weight:700;color:var(--c-text-dim);
  margin-bottom:.4rem}
.dk-input,.dk-select,.dk-textarea{width:100%;padding:.7em .9em;border-radius:var(--r-sm);
  border:var(--bd);background:var(--c-base);color:var(--c-text);font-family:inherit;
  font-size:var(--fs-sm);transition:border-color .2s var(--ease-soft)}
.dk-input:focus,.dk-select:focus,.dk-textarea:focus{outline:none;border-color:var(--c-accent)}
.dk-textarea{min-height:110px;resize:vertical;line-height:1.8}

/* ---------- テーブル ---------- */
.dk-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.dk-table th{text-align:left;font-size:var(--fs-xs);font-weight:700;color:var(--c-muted);
  padding:.6em .7em;border-bottom:var(--bd);white-space:nowrap}
.dk-table td{padding:.75em .7em;border-bottom:1px solid var(--c-line-soft);vertical-align:top}
.dk-table tr:last-child td{border-bottom:none}
.dk-table--scroll{display:block;overflow-x:auto}

/* ---------- バッジ ---------- */
.dk-badge{display:inline-block;font-size:var(--fs-xs);font-weight:700;padding:.25em .8em;
  border-radius:var(--r-pill);border:var(--bd);color:var(--c-text-dim);white-space:nowrap}
.dk-badge--ok{color:var(--c-ok);border-color:var(--c-ok-bd);background:var(--c-ok-bg)}
.dk-badge--warn{color:var(--c-warn);border-color:var(--c-warn-bd);background:var(--c-warn-bg)}
.dk-badge--ng{color:var(--c-ng);border-color:var(--c-ng-bd);background:var(--c-ng-bg)}
.dk-badge--info{color:var(--c-info);border-color:var(--c-info-bd);background:var(--c-info-bg)}
.dk-badge--accent{background:var(--grad-brand);border-color:transparent;color:var(--c-on-accent)}

/* ---------- 空状態 ---------- */
.dk-empty{text-align:center;padding:var(--s-7) var(--s-4);color:var(--c-muted);font-size:var(--fs-sm)}

/* ---------- トースト ---------- */
.dk-toasts{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);z-index:var(--z-toast);
  display:flex;flex-direction:column;gap:.5rem;align-items:center;pointer-events:none;width:max-content;
  max-width:calc(100vw - 32px)}
.dk-toast{padding:.7em 1.3em;border-radius:var(--r-pill);border:var(--bd);
  background:var(--c-tooltip-bg);backdrop-filter:blur(10px);color:var(--c-tooltip-text);
  font-size:var(--fs-sm);box-shadow:var(--sh-lift);
  opacity:0;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease)}
.dk-toast.is-in{opacity:1;transform:none}
.dk-toast--ok{border-color:rgba(var(--c-ok-rgb),.65)}
.dk-toast--ng{border-color:rgba(var(--c-ng-rgb),.65)}
@media(prefers-reduced-motion:reduce){.dk-toast{transition:none;opacity:1;transform:none}}