/* link-style.css */
.cool-link {
color: #1e90ff;
text-decoration: none;
transition: color 0.3s ease, border-bottom 0.3s ease;
border-bottom: 2px solid transparent;
}

.cool-link:hover {
color: #0d6efd;
border-bottom: 2px solid #0d6efd;
}

/* 行内で並べやすい行コンテナ（任意） */
.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* ベースの丸い小型リンク */
.chip-link {
  --fg: #0f172a;       /* 文字色（ライト） */
  --bg: #f1f5f9;       /* 背景色（ライト） */
  --bd: #e2e8f0;       /* ボーダー色（ライト） */

  display: inline-flex;
  align-items: center;
  gap: .35em;
  font-size: .78rem;      /* 小さめ文字 */
  line-height: 1;
  font-weight: 600;
  padding: .4em .7em;
  border: 1px solid var(--bd);
  background: var(--bg);
  color: var(--fg);
  border-radius: 999px;   /* 端まる */
  text-decoration: none;
  box-shadow: 0 1px 0 rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.35);
  transition: transform .12s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.chip-link:hover {
  transform: translateY(-1px);
  background: #e2e8f0;
  border-color: #cbd5e1;
  text-decoration: none;
}

.chip-link:active {
  transform: translateY(0);
  box-shadow: inset 0 1px 2px rgba(0,0,0,.12);
}

.chip-link:focus-visible {
  outline: 2px solid transparent;
  box-shadow: 0 0 0 3px rgba(59,130,246,.45); /* アクセシブルなフォーカス */
}

/* さらに小さくしたいとき */
.chip-link--xs {
  font-size: .7rem;
  padding: .32em .6em;
}

/* ChatGPT風：緑～青系グラデ＋白文字 */
.chip-link--brand {
  --fg: #ffffff;
  --bg: linear-gradient(90deg, #10b981 0%, #06b6d4 100%);
  --bd: rgba(255,255,255,.28);
  color: var(--fg);
  border-color: var(--bd);
  background: var(--bg);
  box-shadow: 0 4px 14px rgba(16,185,129,.22);
}

.chip-link--brand:hover {
  filter: brightness(1.05);
}

/* 外部リンクの矢印（target=_blankのとき自動で付与） */
.chip-link[target="_blank"]::after {
  content: "↗";
  font-size: .9em;
  margin-left: .25em;
  line-height: 1;
}

/* ダークモード最適化 */
@media (prefers-color-scheme: dark) {
  .chip-link {
    --fg: #e5e7eb;
    --bg: #0b1220;
    --bd: #1f2937;
    box-shadow: none;
  }
  .chip-link:hover {
    background: #111827;
    border-color: #374151;
  }
  .chip-link--brand {
    box-shadow: 0 6px 18px rgba(16,185,129,.28);
  }
}

/* 高コントラストユーザー向け */
@media (prefers-contrast: more) {
  .chip-link { border-width: 2px; }
}