.hero-gradient {
  background:
    radial-gradient(circle at 10% 20%, rgba(72,95,199,0.18), transparent 40%),
    radial-gradient(circle at 90% 80%, rgba(0,209,178,0.14), transparent 45%);
}

.letter-wide { letter-spacing: 0.18em; }

.soft-card {
  border-radius: 14px;
  box-shadow: 0 8px 22px rgba(10,10,10,0.06);
}

.border-left-soft {
  border-left: 2px solid rgba(10,10,10,0.08);
}

.skill-row.is-hidden { display: none; }

/* =========================
   Mobile-only tuning
   (No tablet-specific rules)
   ========================= */
@media screen and (max-width: 768px) {

  /* 全体の余白を少し詰める */
  .section {
    padding: 1.25rem 0.9rem;
  }

  /* navbar の左右余白を減らす */
  .navbar.is-spaced {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
  }

  .navbar-item {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* Heroの見出しが大きすぎるのを抑える */
  .hero .title.is-2 {
    font-size: 1.8rem;
    line-height: 1.2;
  }
  .hero .subtitle.is-5 {
    font-size: 1rem;
  }

  /* level はスマホだと横並びが詰まりやすいので縦方向に */
  .level {
    display: block;
  }
  .level-left,
  .level-right {
    display: block;
  }
  .level-right {
    margin-top: 0.75rem;
  }

  /* tags が多いときの見た目を安定 */
  .tags {
    gap: 0.35rem;
  }

  /* card/box の余白を微調整 */
  .card-content {
    padding: 1rem;
  }
  .box {
    padding: 1rem;
  }

  /* Skillsの入れ子が深くても横にはみ出さないように */
  .border-left-soft {
    padding-left: 0.75rem;
    margin-left: 0.5rem;
  }

  /* details の中身が長いときの折り返し */
  pre {
    white-space: pre-wrap;
    word-break: break-word;
  }
}

/* =========================
   Skill tags readability fix
   (PUBLIC Skills section only)
   -------------------------
   前の版で .tag 全体に近い形で上書きしていたため
   管理画面のタグ/通知まで見づらくなる副作用が発生。
   ここでは公開ページの #skills 内に限定する。
   ========================= */

/* 1) フィルタボタン：未選択状態でも見やすく */
body.public #skills .tag.skill-filter-tag {
  border: 1px solid rgba(255,255,255,0.22) !important;
  background: rgba(255,255,255,0.10) !important;
  color: rgba(255,255,255,0.92) !important;
  font-weight: 600;
}

/* hoverでも少し視認性UP */
body.public #skills .tag.skill-filter-tag:hover {
  background: rgba(255,255,255,0.16) !important;
}

/* 2) フィルタが有効化された状態（JSで is-link を付けている前提） */
body.public #skills .tag.skill-filter-tag.is-link {
  background: #3b82f6 !important;
  border-color: transparent !important;
  color: #ffffff !important;
}

/* 3) 各スキル行内のタグも見やすく（フィルタボタンとは別扱い） */
body.public #skills .skill-row .tag {
  border: 1px solid rgba(255,255,255,0.18) !important;
  background: rgba(255,255,255,0.08) !important;
  color: rgba(255,255,255,0.9) !important;
}

/* スキルタグが密集しても読みやすく */
body.public #skills .skill-row .tags .tag {
  margin-bottom: 0.15rem;
}

/* =========================
   Admin safety (optional)
   -------------------------
   万一どこかに広すぎるタグ上書きが残っていても
   管理画面が崩れにくいように保険をかける。
   ========================= */
body.admin .tag {
  color: #363636 !important;
  background-color: #f5f5f5 !important;
  border-color: rgba(0,0,0,0.08) !important;
}

body.admin .notification.is-light {
  color: #363636 !important;
}