/* 写し・正本は 12_AIツールMVP/_design/（2026-10-25 に写した。ここでは直さず、直すときは正本を直して写し直す） */
/* ============================================================================
   cv-line.css  押せる文字「下線が左から伸びる」  v1（2026-10-25）

   正本＝~/Dropbox/Obsidian_Main/12_AIツールMVP/_design/cv-line.css
   基準＝memory/reference_web_ui_no_ai_look.md の 7（弊社HPの動き）・memory/reference_business_tool_design_patterns.md §A9
   製品側は写しを持つ。製品側で直したら、必ずこの正本へ戻す（写しと正本を同じ中身に保つ）。
   元の形＝ネクスト様の業務管理ツール（nextconsul-works/public/assets/nc-fx.css の .link）と
   弊社版の業務台帳（cv-hq/public/assets/app.css の .link）。2か所で別に書いていたものを1つにした

   ── 決めたこと（2026-10-25 浜田さん「カーソル合わせて下線が動くモーションはオシャレですごく気に入っています」） ──
   ・押せる文字（お客様の名前・件数・一覧の中のリンク）は、止まった状態で「周りと違う色＋淡い下線」で押せると分かる
   ・乗せると、濃い下線が左から右へ伸びる。離すと右から左へ戻る。押した瞬間（スマホのタップ）も伸びる
   ・表の行に乗せたときも、その行の押せる文字の下線を伸ばす（行のどこに乗せても押せる先が分かる）
   ・ボタン・見出し・選ぶカードには使わない（ボタンは cv-motion の cv-btn、選ぶカードは cv-ink の「色が満ちる」）
   ・カーソルの形を変える演出は入れない（スマホに無い）

   ── 使い方 ──
   <a class="cv-line" href="...">名前</a>
   <button type="button" class="cv-line">名前</button>
   <tr class="cv-line-row"> … <a class="cv-line">名前</a> … </tr>   行に乗せても伸ばすとき

   ── 色（変数で替える） ──
   既定は弊社の緑（文字 #1B6B4F＝白地で 6.4:1・伸びる線 #23855F＝4.6:1）。
   クライアント名義の画面では :root で先方の色に替える（例：ネクスト様＝文字 #1A6FC4・線 #2890E8）。
   伸びる線は白地で 3:1 以上の色にする（部品の基準）
   ============================================================================ */
:root {
  --cv-line-ink: #1B6B4F;
  --cv-line: #23855F;
  --cv-line-base: rgba(27, 107, 79, .22);
  --cv-line-ease: cubic-bezier(.2, .7, .2, 1);
  --cv-line-time: .32s;
}

.cv-line {
  color: var(--cv-line-ink); text-decoration: none; padding-bottom: 1px; cursor: pointer;
  background-image: linear-gradient(var(--cv-line), var(--cv-line)), linear-gradient(var(--cv-line-base), var(--cv-line-base));
  background-repeat: no-repeat; background-position: 0 100%, 0 100%; background-size: 0% 1.5px, 100% 1px;
  /* 2行に折れた名前でも、行ごとに下線を伸ばす */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  transition: background-size var(--cv-line-time) var(--cv-line-ease);
}
/* button に付けるとき：背景は background-color だけで消す（一括の background は下線の背景画像まで消す） */
button.cv-line { background-color: transparent; border: 0; padding: 0 0 1px; font: inherit; text-align: left; }
a.cv-line:visited { color: var(--cv-line-ink); }
.cv-line:hover { text-decoration: none; }

@media (hover: hover) {
  .cv-line:hover, .cv-line-row:hover .cv-line { background-size: 100% 1.5px, 100% 1px; }
}
.cv-line:active, .cv-line:focus-visible { background-size: 100% 1.5px, 100% 1px; }
.cv-line:focus-visible { outline: 2px solid var(--cv-line); outline-offset: 2px; border-radius: 2px; }

@media (prefers-reduced-motion: reduce) {
  .cv-line { transition: none; }
}