/* ============================================================================
   pontsukapon — src/assets/css/shell.css
   ----------------------------------------------------------------------------
   tokens.css の §3〜§6（基礎レイヤ／シェル部品／共通ユーティリティ／法務組版）。
   読み込み順は tokens.css → shell.css → themes.css → ページ固有CSS。
   ここは寸法と間合いだけを持つ。色は必ず §2 のテーマ17トークン経由で受け取る。
   ============================================================================ */


/* ═══ §3  基礎レイヤ ══════════════════════════════════════════════════════
   「html だけが地色を持ち、body 以下は透明」を全アプリ共通の規則にする。
   Pareidol の雲はこの規則の上でだけ成立する（特殊対応ではなく規則）。
   ======================================================================== */

*,*::before,*::after{ box-sizing:border-box; }
/* ↑ 3LPとも同じ全消しリセット（* { margin:0; padding:0 }）を持っているが、
   それはアプリCSS側から削除し、余白は下の要素規則で作り直す。 */

html{
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  overflow-x: clip;              /* ★ body ではなく html に置く。body だと sticky が壊れる */
}
@supports not (overflow-x: clip){ html{ overflow-x: hidden; } }

body{
  margin: 0;
  background: transparent;       /* ★ここに色を敷いた瞬間に Pareidol の雲が死ぬ */
  min-height: 100svh;
  display: flex;                 /* flex はスタッキングコンテキストを作らないので安全 */
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
main{ flex: 1 0 auto; padding-top: var(--sp-shell-top); }

h1,h2,h3,h4{ margin:0; font-family:var(--font-display); font-weight:600;
             line-height:var(--lh-head); letter-spacing:var(--ls-head); }
h1{ font-size:var(--fs-h1) }
h2{ font-size:var(--fs-h2) }
h3{ font-size:var(--fs-h3) }
p { margin:0 0 var(--sp-5); }
img,svg,video{ max-width:100%; height:auto; }
ul,ol{ margin:0; padding:0; }
strong{ font-weight:500; color:var(--accent); }

/* リンク規則：text-decoration-color で下線を出し入れする。
   border-bottom を使わないので .btn / .card 側で打ち消しを書く必要がない。 */
a{
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: transparent;
  text-decoration-thickness: 1px;
  text-underline-offset: .35em;
  transition: color var(--dur-1) var(--ease),
              text-decoration-color var(--dur-1) var(--ease);
}
/* ★★ ホバーの門番（2026-08-03）★★
   タッチ端末は「タップした要素に :hover が残り続ける」。指を離しても、別の
   ところを触るまで剥がれない。だから **このファイルの :hover は例外なく**
   `@media (hover: hover) and (pointer: fine)` の中に置く。
   ★ **:focus-visible は絶対に囲わない。**キーボード操作の唯一の手掛かりで、
     入力手段が hover を持つかどうかとは無関係。だから2つは必ず行を分ける。
   ★ この a:hover は `a{text-decoration-color:transparent}` と対で
     「ホバーで下線が出る」を作っている唯一の規則。囲うとホバーを持たない端末
     では下線が出ない。法務ページ（.doc a）と汎用ページ（.page-doc a・§6）は
     静止時の下線色を自前で持たせてあるので、本文のリンクは見分けが付く。 */
@media (hover: hover) and (pointer: fine){
  a:hover{ text-decoration-color: currentColor; }
}
:where(.btn,.card,.badge-link,.brand,.shell-head a,.shell-foot a,
       .works a,.next-work__link,.chip){ text-decoration:none; }

:where(a,button,summary,input,select,textarea):focus-visible{
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 2px;
}

.visually-hidden{
  position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.skip{ position:absolute; left:-9999px; }
.skip:focus{
  left:var(--gutter); top:var(--sp-2); z-index:var(--z-skip);
  background:var(--surface); color:var(--fg-1);
  padding:var(--sp-2) var(--sp-4); border-radius:var(--r-pill);
  border:var(--hair) solid var(--rule);
}


/* ═══ §4  シェル部品 ══════════════════════════════════════════════════════ */

/* --- 落款（サイト全体の署名。形は不変・色だけテーマ） -------------------- */
.seal{
  inline-size: var(--seal-sz); block-size: var(--seal-sz);
  border-radius: var(--r-seal);
  background: var(--accent);
  color: var(--accent-ink);
  display: grid; place-items: center;
  font-family: var(--font-mark); font-weight: 600;
  font-size: calc(var(--seal-sz) * .62);
  line-height: 1; flex: none;
  box-shadow: 0 1px 3px rgba(0,0,0,.14);
  user-select: none;
}
.seal--lg{ --seal-sz: var(--seal-sz-lg); border-radius: calc(var(--r-seal) * 2); }

/* --- ヘッダー ------------------------------------------------------------ */
.shell-head{
  position: sticky; top: 0; z-index: var(--z-head);
  background: var(--bg);                       /* ← 常にそのアプリの地色 */
  border-bottom: var(--hair) solid transparent;
  transition: border-color var(--dur-2) var(--ease);
}
@supports (backdrop-filter: blur(1px)) and (color: color-mix(in srgb, red 50%, blue)){
  .shell-head{
    background: color-mix(in srgb, var(--bg) 86%, transparent);
    -webkit-backdrop-filter: saturate(1.15) blur(10px);
            backdrop-filter: saturate(1.15) blur(10px);
  }
}
.shell-head.is-scrolled{ border-bottom-color: var(--rule); }

.shell-head__in{
  max-width: calc(var(--shell-max-wide) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  height: var(--head-h);
  display: flex; align-items: center; gap: var(--sp-3);
  font-size: var(--fs-small);
}
@media (max-width:560px){
  .shell-head__in{ height:var(--head-h-sm); gap:var(--sp-2); }
}

.brand{ display:flex; align-items:center; gap:var(--sp-3); color:var(--fg-1); }
.brand__name{ display:flex; flex-direction:column; line-height:1.25; }
/* ★ 2026-08-03: 明朝（--font-mark / --ls-mark .14em）から本文書体へ戻した。
   ポータルの新デザインが無彩・ゴシックになったのに合わせて、シェルの
   ブランド名もそこへ揃える。値は dw-a が上書きしていたものと同じ。 */
.brand__ja{ font-family:var(--font-body); font-size:15px; letter-spacing:.08em; }
.brand__en{ font-size:9px; letter-spacing:var(--ls-en); color:var(--fg-3); }
@media (max-width:768px){ .brand__en{ display:none; } }

.shell-head__sep{ inline-size:1px; block-size:20px; background:var(--rule); flex:none; }
.shell-head__app{
  font-family: var(--font-display);   /* ← ヘッダーで唯一アプリの筆致が差し込まれる */
  font-size: 14px; color: var(--fg-2);
  transition: color var(--dur-1) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  .shell-head__app:hover{ color: var(--accent); }
}

.shell-head__nav{ margin-left:auto; }
.shell-head__nav a{ font-size:var(--fs-note); color:var(--fg-3); }
@media (hover: hover) and (pointer: fine){
  .shell-head__nav a:hover{ color:var(--fg-1); text-decoration-color:currentColor; }
}

/* --- フッター（シェル唯一の主罫をここに1本） ---------------------------- */
.shell-foot{
  margin-top: var(--sp-shell-bottom);
  border-top: var(--hair) solid var(--rule);
}
.shell-foot__in{
  max-width: calc(var(--shell-max) + var(--gutter)*2);
  margin-inline: auto;
  padding: var(--sp-7) var(--gutter) var(--sp-5);
  display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6);
  font-size: var(--fs-note); line-height: 1.9;
}
@media (max-width:720px){ .shell-foot__in{ grid-template-columns:1fr; gap:var(--sp-6); } }

.shell-foot__sign .seal{ margin-bottom: var(--sp-3); }
/* ★ 2026-08-03: .brand__ja と同じ理由で本文書体へ戻した。 */
.shell-foot__name{ font-family:var(--font-body); font-size:var(--fs-small);
                   letter-spacing:.08em; margin:0 0 var(--sp-1); }
.shell-foot__note{ color:var(--fg-3); margin:0; }

.shell-foot__h{ margin:0 0 var(--sp-3); }
.shell-foot__col li{ list-style:none; }
.shell-foot__col a{ color:var(--fg-2); }
@media (hover: hover) and (pointer: fine){
  .shell-foot__col a:hover{ color:var(--accent); text-decoration-color:currentColor; }
}

.shell-foot__base{
  max-width: calc(var(--shell-max) + var(--gutter)*2);
  margin-inline: auto;
  padding: var(--sp-4) var(--gutter) var(--sp-8);
  border-top: var(--hair) solid var(--rule-2);
  display: flex; justify-content: space-between; gap: var(--sp-4);
  font-size: var(--fs-note); color: var(--fg-3);
}
.shell-foot__base p{ margin:0; }
.shell-foot__work{ font-family:var(--font-display); color:var(--fg-2); }
.shell-foot__base a{ color:var(--fg-3); }
@media (max-width:520px){ .shell-foot__base{ flex-direction:column; } }

/* --- 次の作品へ（LPのみ・法務ページには出さない） ------------------------ */
.next-work{
  max-width: calc(var(--shell-max) + var(--gutter)*2);
  margin: var(--sp-9) auto 0;
  padding-inline: var(--gutter);
}
.next-work__link{
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "label swatch" "name swatch" "tag swatch";
  align-items: center;
  gap: var(--sp-1) var(--sp-5);
  padding-block: var(--sp-6);
  border-top: var(--hair) solid var(--rule-2);
  border-bottom: var(--hair) solid var(--rule-2);
  color: var(--fg-2);
  transition: color var(--dur-1) var(--ease);
}
.next-work__label{ grid-area:label; margin:0; }
.next-work__name{ grid-area:name; font-family:var(--font-display);
                  font-size:var(--fs-h3); color:var(--fg-1); }
.next-work__tagline{ grid-area:tag; font-size:var(--fs-note); color:var(--fg-3); }
.next-work__swatch{
  grid-area:swatch; inline-size:14px; block-size:14px; border-radius:50%;
  background: var(--n-accent, var(--fg-3));    /* 次のアプリの色。予告はこの点1つだけ */
  transition: transform var(--dur-1) var(--ease);
}
/* ★ 門番あり。組み合わせ規則（:hover の子孫）も同じ @media の中にまとめる。 */
@media (hover: hover) and (pointer: fine){
  .next-work__link:hover{ color: var(--fg-1); }
  .next-work__link:hover .next-work__swatch{ transform: scale(1.3); }
}

/* --- LP 用の任意ヘッダー帯（既存3LPは lpHead:false で出さない） ---------- */
.lp-head{
  max-width: calc(var(--shell-max) + var(--gutter)*2);
  margin-inline: auto; padding: var(--sp-8) var(--gutter) var(--sp-6);
}
.lp-head__name{ font-size:var(--fs-h1); margin:var(--sp-2) 0 0; }
.lp-head__tagline{ font-size:var(--fs-lead); color:var(--fg-2);
                   max-width:var(--measure-text); margin:var(--sp-4) 0 0; }
.lp-head__cta{ margin:var(--sp-6) 0 0; }


/* ═══ §5  共通ユーティリティ（LP・ポータルどちらでも使える） ══════════════ */

.eyebrow{
  font-size: var(--fs-micro);
  letter-spacing: var(--ls-micro);
  color: var(--fg-3);
  margin: 0 0 var(--sp-4);
  font-weight: 500;
}
/* .eyebrow の中身はアプリの自由。"Inside botch" / "Gallery" / "〇一 しくみ" を
   そのまま入れてよい。共通化するのはサイズ・字間・色だけ。 */

.sec{
  max-width: calc(var(--shell-max) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--sp-section);
}
.sec--wide{ max-width: calc(var(--shell-max-wide) + var(--gutter)*2); }
.sec__head{ margin-bottom: var(--sp-block); }
.sec__rule{ display:block; inline-size:var(--rule-w); block-size:var(--hair);
            background:var(--accent); margin-top:var(--sp-3); }

.lead{ font-size:var(--fs-lead); color:var(--fg-2);
       max-width:var(--measure-text); font-weight:400; }

.trio{ display:grid; gap:var(--sp-5); grid-template-columns:repeat(3,1fr); }
@media (max-width:720px){ .trio{ grid-template-columns:1fr; } }

.card{
  background: var(--surface);
  border: var(--hair) solid var(--rule-2);
  border-radius: var(--card-r);
  padding: var(--card-pad);
  transition: transform var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}
@media (hover: hover) and (pointer: fine){
  a.card:hover{ transform:translateY(var(--lift)); border-color:var(--accent-line); }
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height: var(--btn-h);
  padding-inline: var(--btn-px);
  border-radius: var(--btn-r);
  border: var(--hair) solid transparent;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight:500;
  letter-spacing:.06em; cursor:pointer; background:none;
  transition: transform var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease),
              opacity var(--dur-1) var(--ease);
}
.btn[disabled]{ opacity:.55; cursor:default; transform:none; }
.btn--primary{ background:var(--accent); color:var(--accent-ink); }
.btn--ghost{ background:var(--accent-soft); color:var(--fg-1); border-color:var(--accent-line); }
.btn--quiet{ background:transparent; color:var(--fg-2); border-color:var(--rule); }
/* ★ 門番あり。★ .btn[disabled]（0,2,0）は上に置いてあるので、囲っても
   「押せないのに浮く」は起きない（詳細度で勝っている）。 */
@media (hover: hover) and (pointer: fine){
  .btn:hover{ transform: translateY(var(--lift)); }
  .btn--primary:hover{ opacity:.9; }
}

/* ★ Apple 公式バッジには .btn を絶対に当てない（改色・変形はガイドライン違反）。
     .badge-link は高さを揃えるだけの器。 */
.badge-link{ display:inline-flex; align-items:center; line-height:0; }
.badge-link img{ display:block; height:62px; width:auto; }
@media (hover: hover) and (pointer: fine){
  .badge-link:hover{ transform: translateY(var(--lift)); }
}


/* ═══ §6  法務ページの共通組版（.doc）と動き ═════════════════════════════
   法務6枚（botch×3 / Pareidol×2 / こぼれび×1）を完全に同じ組版に載せ、
   色と見出し書体だけがテーマで変わる。本文の文言・日付・言語構成は触らない。
   ======================================================================== */

.doc{
  max-width: calc(var(--measure-text) + var(--gutter)*2);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: 0 var(--sp-section);
  line-height: var(--lh-doc);
  counter-reset: doc;
}
.doc h1{ font-size:var(--fs-h2); margin-bottom:var(--sp-6); }
.doc h1 span{ display:block; font-size:.62em; font-weight:500;
              color:var(--fg-2); font-family:var(--font-body); margin-top:var(--sp-2); }
.doc h2{
  display:flex; align-items:baseline; gap:.7em;
  font-size:var(--fs-h3);
  margin: var(--sp-8) 0 var(--sp-4);
  padding-top: var(--sp-7);
  border-top: var(--hair) solid var(--rule-2);
}
.doc h2:first-of-type{ border-top:0; padding-top:0; margin-top:var(--sp-6); }
.doc h3{ font-size:var(--fs-body); margin:var(--sp-6) 0 var(--sp-3); }
.doc .no,
.doc .num{
  font-family: var(--font-num);
  font-size: 13px; font-weight: 500;
  letter-spacing: .18em;
  color: var(--accent-line);
  font-variant-numeric: tabular-nums;
  flex: none;
}
/* CSS カウンタ版（こぼれび privacy の 01〜15 用）。
   HTML 直書き版（Pareidol）は .no にそのまま数字が入っているので何もしない。 */
.doc--counter ol{ list-style:none; counter-reset: doc; }
.doc--counter ol > li{ counter-increment: doc; }
.doc--counter .num::before{ content: counter(doc, decimal-leading-zero); }

.doc p{ color:var(--fg-2); margin:0 0 var(--sp-4); }
.doc ul{ list-style:none; margin:0 0 var(--sp-4); }
.doc ul > li{ position:relative; padding-left:1.2em; color:var(--fg-2); }
.doc ul > li::before{ content:"・"; position:absolute; left:0; color:var(--accent-line); }
.doc a{ color:var(--accent); text-decoration-color:var(--accent-line); }
.doc .note{
  background: var(--surface);
  border-left: 2px solid var(--accent-line);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  font-size: var(--fs-small);
  color: var(--fg-2);
}
.doc .divider{
  text-align:center; letter-spacing:.5em; color:var(--accent);
  opacity:.75; margin-block: var(--sp-8); user-select:none;
}
.doc .meta,
.doc .updated{ font-size:var(--fs-note); color:var(--fg-3); margin-top:var(--sp-7); }

/* ★ 法務ページに入場アニメは付けない（静的表示）。
     初期 opacity:0 は、CSS が届かない／セレクタが1行ずれるだけで
     条文が真っ白になる。ストア審査上そのリスクは演出に見合わない。 */

/* --- 汎用ページ（/about /contact）。ポータルと同じ地の上に置く -------------
   ★ 2026-08-03 に portal.css から移設した。移設前は about / contact が
     `pageCss: ["/assets/css/portal.css"]` でこれだけのために読んでいて、
     ポータルの作り込み（2600行）を丸ごと巻き込んでいた。ここへ移したので
     両ページの front matter から pageCss を落とし、portal.css は本当に
     `/` 専用になった。**値は1つも変えていない。**
   ★ a の下線色だけ足してある（.doc a と同じ扱い）。§3 の a:hover を
     ホバー門番の中へ入れたので、静止時の下線をここが持たないと、
     ホバーを持たない端末で本文のリンクが素の文字と見分けが付かなくなる。 */
.page-doc{ max-width:calc(var(--measure-text) + var(--gutter)*2);
  margin-inline:auto; padding:0 var(--gutter) var(--sp-section); }
.page-doc h1{ font-size:var(--fs-h2); margin-bottom:var(--sp-6); }
.page-doc h2{ font-size:var(--fs-h3); margin:var(--sp-8) 0 var(--sp-3); }
.page-doc p{ color:var(--fg-2); }
.page-doc dl{ margin:0; }
.page-doc dt{ font-size:var(--fs-note); color:var(--fg-3); margin-top:var(--sp-5); }
.page-doc dd{ margin:var(--sp-1) 0 0; color:var(--fg-2); }
.page-doc a{ text-decoration-color: var(--accent-line); }

/* --- 呼吸（botch / Pareidol に同名同値で存在するものを1本に統合） -------- */
@keyframes breathe-dot{
  0%,100%{ opacity:.55; transform:scale(.85); }
  50%    { opacity:1;   transform:scale(1.15); }
}
.dot{
  inline-size:7px; block-size:7px; border-radius:50%;
  background: var(--accent);
  box-shadow: 0 0 10px 1px var(--accent);   /* この滲みを落とすと「灯り」が死ぬ */
  animation: breathe-dot var(--breathe) ease-in-out infinite;
  flex: none;
}

/* --- モーション抑制（3LPとも未対応だったのでシェルで受ける） ------------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    /* ★ 2026-08-03 追加。duration だけ潰しても **delay は残る**。
       fill-mode:both の animation と組むと「遅延のあいだ 0% の姿で固まる」
       ＝ 0.5s のあいだ opacity:0 で消えている、が起きる。入口で塞ぐ。 */
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
  }
  /* Pareidol の雲は「止める」と終端（translateX(-560px)＝画面外）へ飛ぶので、
     静止位置を個別に与える。--cloud-x は pareidol.css が .c1〜.c6 に定義する。 */
  .cloud{
    animation: none !important;
    transform: translateX(var(--cloud-x, 30vw)) !important;
  }
}


/*! ===========================================================================
 * 以下の §7 には yui540/css-animations 由来のコードが含まれています。
 * Portions of the section below are derived from yui540/css-animations.
 *   https://github.com/yui540/css-animations
 *
 * 以下の @keyframes / パターンが該当します:
 *   slide-in, popup, seed-pop, breathe
 * （原典から改変して使用しています / modified from the original）
 *
 * ---------------------------------------------------------------------------
 * MIT License
 *
 * Copyright (c) 2026 yui540
 *
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 *
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 *
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * ========================================================================= */

/* ═══ §7  入場のモーション語彙（全ページ共通）═════════════════════════════
   2026-08-03 に portal.css（旧 dw-a）から上げた5本。原理は
   「1秒未満／ease-in-out／必ず行き過ぎて戻る／fill-mode both」。
   ★ ここは **@keyframes の定義だけ**。誰に当てるかはページ側が決める。
     尺は tokens.css §1 の --dur-in / --dur-pop / --dur-step / --breathe-slow、
     曲線は --ease-inout。
   ★★ **キーフレーム名は文書全体で global。**ページ固有のCSSで同名を
     定義し直すと、後から読まれたほうが勝って全ページの動きが変わる。
   ★ 名前の dw- 接頭辞は残してある。改名すると portal.css（約20箇所）と
     JS（animationName === 'dw-land' の判定）まで巻き込むため。
   ======================================================================== */

/* 弾んで置かれる — 出典: yui540/css-animations 2026-04-25 tips-1 slide-in を改変。
   落下量を減らし、着地で 1.045 まで行き過ぎてから戻す。 */
@keyframes dw-tile-in{
  from{ opacity:0; transform: translateY(26px) scale(.90); }
  58% { opacity:1; transform: translateY(-5px) scale(1.045); }
  to  { opacity:1; transform: translateY(0)    scale(1); }
}
/* ポップイン — 出典: 2026-06-09 tips-2 seed-pop / 2026-04-17 tips-1 popup を減量 */
@keyframes dw-pop{
  from{ opacity:0; transform: scale(.7); }
  55% { opacity:1; transform: scale(1.12); }
  to  { opacity:1; transform: scale(1); }
}
/* ただのフェード（主力） */
@keyframes dw-fade-up{
  from{ opacity:0; transform: translateY(8px); }
  to  { opacity:1; transform: translateY(0); }
}
/* 下から立ち上がる（1文字ずつの結び）— slide-in の軽い版 */
@keyframes dw-rise{
  from{ opacity:0; transform: translateY(46%); }
  60% { opacity:1; transform: translateY(-8%); }
  to  { opacity:1; transform: translateY(0); }
}
/* 呼吸（常時）— 出典: 2026-06-09 tips-2 breathe。1.075s → 2.8s に伸ばした。 */
@keyframes dw-breathe{
  from,to{ transform: scale(.82); opacity:.55; }
  50%    { transform: scale(1.14); opacity:1; }
}