/* ============================================================================
   cv-ink.css  選ぶカード「色が満ちる」＋お知らせ欄＋並びの演出  v1（2026-10-05）

   正本＝~/Dropbox/Obsidian_Main/12_AIツールMVP/_design/cv-ink.css（JS は同じ場所の cv-ink.js）
   基準＝memory/reference_web_ui_no_ai_look.md（なぜこの形か・使ってはいけない形・落とし穴）
   製品側は写しを持つ。製品側で直したら、必ずこの正本へ戻す（写しと正本を同じ中身に保つ）。
   適用第1号＝お客さま窓口 support.cross-value.co.jp（cv-support/public/）

   ── 決めたこと（2026-10-05 浜田さん「最高です」） ──
   ・薄い色の角丸の四角に入れたアイコン、左に色の縦線を引いた囲みは使わない（AIっぽい定番の形）
   ・選ぶカードは、触れた点（カーソルが入った点／指が触れた点）から深い緑が円で広がり、
     文字は境目ちょうどで白に変わる。出るときは出た点へ縮む
   ・アイコンの代わりに番号（01・02）。弊社HPの「大きな文字が主役」に合わせる

   ── 作り ──
   同じ内容を白抜きでもう1枚重ね（.cv-ink-over）、clip-path の円の内側だけ見せる。
   円の中心と半径は cv-ink.js が CSSOM（style.setProperty）で --x --y --r に入れる。
   style 属性を書かないので、style-src に 'unsafe-inline' が無い CSP でも動く。

   ── マークアップ（2層は中身を必ず同じにする。違うと境目で文字がずれる） ──
   <div class="cv-stagger">
     <button type="button" class="cv-ink" data-kind="...">
       <span class="cv-ink-layer">
         <span class="cv-ink-num" aria-hidden="true">01</span>
         <span class="cv-ink-body"><span class="cv-ink-title">題名</span>
           <span class="cv-ink-desc"><span class="ph">句1・</span><span class="ph">句2</span></span></span>
         <span class="cv-ink-arrow" aria-hidden="true"><svg>→</svg></span>
       </span>
       <span class="cv-ink-layer cv-ink-over" aria-hidden="true"> …上と同じ中身… </span>
     </button>
     <div class="cv-aside">
       <p class="cv-aside-line"><span class="cv-aside-k">LINE</span><span>本文</span></p>
       <p class="cv-aside-fine">注記</p>
     </div>
   </div>
   ※ Noto Sans JP の細字（300）を読み込む（番号に使う）
   ============================================================================ */

:root {
  /* 弊社の6役割パレット（2026-09-05 決定）。製品側で上書きしてよい */
  --cvx-struct: #14513C;  /* 構造色：広がる面の起点 */
  --cvx-mid: #1B6B4F;     /* 中間：番号・広がる面の終点 */
  --cvx-decor: #9FD4BF;   /* 装飾：白抜きの層の番号だけ */
  --cvx-rule: #E4E2DF;    /* 罫線 */
  --cvx-rule-2: #DAD7D2;  /* お知らせ欄の上の罫線 */
  --cvx-muted: #5F625F;   /* 補足の字（白地で 6.2:1） */
}

/* ---------- 選ぶカード ---------- */
.cv-ink {
  position: relative; isolation: isolate; overflow: hidden; display: block; width: 100%; text-align: left;
  font: inherit; color: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent;
  background: #fff; border: 1px solid var(--cvx-rule); border-radius: 18px; margin: 0 0 14px; padding: 0;
}
.cv-ink:focus-visible { outline: 2px solid var(--cvx-struct); outline-offset: 3px; }
.cv-ink-layer { display: flex; align-items: center; gap: 18px; padding: 24px 20px; }
.cv-ink-over {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(135deg, var(--cvx-struct) 0%, var(--cvx-mid) 100%); color: #fff;
  clip-path: circle(0px at var(--x, 50%) var(--y, 50%));
  transition: clip-path .62s cubic-bezier(.22, .8, .24, 1);
}
.cv-ink.on .cv-ink-over { clip-path: circle(var(--r, 600px) at var(--x, 50%) var(--y, 50%)); }
.cv-ink-num { flex: none; width: 46px; font-size: 32px; font-weight: 300; line-height: 1; letter-spacing: .02em; color: var(--cvx-mid); font-variant-numeric: tabular-nums; }
.cv-ink-body { flex: 1; min-width: 0; }
.cv-ink-title { display: block; font-size: 18px; font-weight: 700; color: var(--cvx-struct); line-height: 1.4; letter-spacing: .02em; text-wrap: balance; }
.cv-ink-desc { display: block; font-size: 14px; color: var(--cvx-muted); margin-top: 5px; line-height: 1.6; text-wrap: balance; }
.cv-ink-desc .ph { display: inline-block; } /* 句の切れ目でだけ折り返す（「直したいこ／と」のような語の途中の折れを防ぐ。iPhone の Safari でも効く） */
.cv-ink-arrow { flex: none; display: grid; place-items: center; color: var(--cvx-mid); }
.cv-ink-over .cv-ink-num { color: var(--cvx-decor); } /* 構造色の上で 5.6:1・中間の上で 3.9:1（32px＝大きい文字の基準 3:1 を満たす）。白地の文字には使わない */
.cv-ink-over .cv-ink-title { color: #fff; }
.cv-ink-over .cv-ink-desc { color: rgba(255, 255, 255, .86); }
.cv-ink-over .cv-ink-arrow { color: #fff; transform: translateX(5px); }

/* ---------- お知らせ欄：囲みも縦線も使わず、罫線1本＋小さな札＋文字だけ ---------- */
.cv-aside { margin-top: 30px; padding-top: 18px; border-top: 1px solid var(--cvx-rule-2); }
.cv-aside-line { display: flex; gap: 12px; align-items: baseline; margin: 0; font-size: 14px; line-height: 1.7; }
.cv-aside-k { flex: none; font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--cvx-mid); padding: 4px 9px 3px; border: 1px solid rgba(27, 107, 79, .4); border-radius: 999px; line-height: 1; transform: translateY(-1px); }
.cv-aside-fine { margin: 12px 0 0; font-size: 12.5px; color: var(--cvx-muted); line-height: 1.75; }

/* ---------- 開いた瞬間に1つずつ下から並ぶ ----------
   位置だけ動かす。薄くする演出（opacity）は、動きが止まる環境で文字が薄いまま残るため使わない */
.cv-stagger > * { animation: cv-lift .7s cubic-bezier(.2, .7, .2, 1) both; animation-delay: var(--d, 0ms); }
@keyframes cv-lift { from { transform: translateY(16px); } to { transform: none; } }

/* 動きを減らす設定の端末では動かさない（色は一瞬で切り替わる） */
@media (prefers-reduced-motion: reduce) {
  .cv-ink-over { transition: none; }
  .cv-stagger > * { animation: none; }
}