@charset "utf-8";

/* トップページと職務経歴書で共有する部品。
   style.css の後に読み込む。style.css は変更しない。
   1. 技術ロゴ  2. 学習リスト  3. 出典表示 */

/* --- 1. 技術ロゴ -------------------------------------------
   ロゴのSVGはHTMLに直接書き込んである（外部CDNは使わない）。
   出典: Simple Icons / Material Design Icons (Apache-2.0) / Arcticons (CC BY-SA 4.0) */
.tech-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
}

.tech-logo {
  display: block;
  flex: none;
  width: 18px;
  height: 18px;
  margin-top: .18em;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.tech-logo svg {
  display: block;
  width: 18px;
  height: 18px;
  fill: currentColor;
}

/* ロゴが用意できない行。技術名の左端を他の行と揃えるための余白 */
.tech-logo-blank {
  background: none;
}

/* --- 2. 学習（書影の棚） ------------------------------------
   中身は assets/js/learning.js から描画する。本の追加はそのファイルだけ。
   書影を並べる一般的な本棚の型（ブクログ・読書メーター等と同じ見せ方） */
.cov {
  display: block;
  width: 92px;
  height: 132px;
  border-radius: 3px;
  overflow: visible; /* ゲージが本の上にはみ出せるように */
  background: var(--bg-soft);
  border: 1px solid var(--line-soft);
  box-shadow: 0 1px 4px rgba(22, 25, 27, .14);
}



  border-radius: 3px;
}

a.cov {
  transition: transform .15s ease, box-shadow .15s ease;
}

a.cov:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(22, 25, 27, .2);
}

/* 画像のない教材（Web教材など）は題名入りの無地カバー */


  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 8px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.5;
  text-align: center;
}

/* 職務経歴書: 折り返しグリッド */
.shelf {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 14px;
  margin-top: 14px;
  padding: 0;
  list-style: none;
}

.shelf > li {
  width: 92px;
}

.shelf-cap {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 6px;
  font-size: .68rem;
  line-height: 1.45;
  color: var(--ink-2);
}

.shelf-meta {
  display: block;
  margin-top: 2px;
  font-size: .65rem;
  color: var(--ink-3);
}

.shelf-done {
  margin-left: 5px;
  font-weight: 600;
  color: var(--accent-deep);
}

/* トップ: 書影の横一列（style.css の .learn-strip の横スクロールを流用しつつ
   カードの器を消して書影だけにする） */
.shelf-band > li {
  width: auto;
  flex: none;
  background: none;
  border: none;
  padding: 0;
}

.shelf-band .cov {
  width: 76px;
  height: 109px;
}

.shelf-band .cov-txt {
  font-size: .62rem;
}

/* 帯の上下余白を詰める */
.learn-band {
  padding: 10px 0 12px;
}

.learn-band-head {
  margin-bottom: 8px;
}

.learn-band-more {
  margin-left: auto;
  font-size: .78rem;
}

/* --- 3. 出典表示 -------------------------------------------- */
.attrib {
  margin-top: 6px;
  color: var(--ink-3);
  font-size: .72rem;
  line-height: 1.7;
}

/* 棚の下の注記（ジャンルのコメント） */
.shelf-note {
  margin-top: 10px;
  font-size: .78rem;
  color: var(--ink-3);
  line-height: 1.7;
}

/* --- 2c. 1冊=1行のリスト（職務経歴書用） --------------------
   行頭にジャンルタグ。ジャンルでの区分けはしない */
.booklist {
  margin-top: 12px;
  padding: 0;
  list-style: none;
}

.booklist > li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line-soft);
}

.book-tag {
  flex: none;
  padding: 0 9px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent-tint);
  font-size: .7rem;
  color: var(--accent-deep);
  white-space: nowrap;
}

.book-title {
  font-size: .9rem;
  color: var(--ink-2);
  min-width: 0;
}

a.book-title {
  text-decoration: none;
  border-bottom: 1px solid rgba(123, 133, 138, .45);
}

a.book-title:hover {
  color: var(--accent-deep);
  border-bottom-color: var(--accent);
}

.book-state {
  margin-left: auto;
  font-size: .72rem;
  color: var(--ink-3);
  white-space: nowrap;
}

.book-state.done {
  color: var(--accent-deep);
  font-weight: 600;
}

/* --- 2d. 書影の進行度と吹き出し ----------------------------- */
.cov {
  position: relative;
}

/* 読了の緑バッジ（書影の右上） */
.cov-badge {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 7px;
  border-radius: 3px;
  background: #1a7f37;
  color: #fff;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .04em;
}

/* 読書中の進行ゲージ（書影の上端・幅いっぱい） */
.cov-gauge {
  position: absolute;
  top: -5px;
  left: 0;
  right: 0;
  height: 10px;
  border-radius: 2px;
  overflow: hidden;
  background: rgba(22, 25, 27, .35);
}

.cov-gauge-fill {
  display: block;
  height: 100%;
  background: #1a7f37;
}

/* マウスを乗せたときの吹き出し（帯の横スクロールで切れないようbody直下に固定表示） */
.cov-tip {
  position: fixed;
  z-index: 60;
  max-width: 260px;
  padding: 9px 12px;
  border-radius: 6px;
  background: rgba(22, 25, 27, .94);
  color: #fff;
  font-size: .76rem;
  line-height: 1.65;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .25);
  pointer-events: none;
}

.cov-tip b {
  display: block;
  font-size: .78rem;
}

.cov-tip-state {
  display: block;
  color: #9fd8a9;
  font-size: .7rem;
}

.cov-tip-comment {
  display: block;
  margin-top: 3px;
  color: #d9dee1;
  white-space: pre-line; /* コメント内の改行を活かす */
}

/* 辞書・索引の青緑バッジ */
.cov-badge-ref {
  background: var(--accent-deep);
}

/* --- 2e. 帯のジャンルグループ（タグ＋書影の束） ------------- */
.shelf-band {
  padding-top: 10px; /* はみ出したゲージが切れないための余白 */
}

.shelf-band > li.band-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 11px 11px;
  border: 1px dotted rgba(123, 133, 138, .55); /* 薄い点線の囲み */
  border-radius: 8px;
}

.band-covers {
  display: flex;
  gap: 10px;
}

/* --- 4. 作品タイトル横のリポジトリリンク（作品詳細ページ） -----------
   GitHubのマークだけを置き、クリックでリポジトリへ飛ぶ。
   文字は出さず、リンク名は aria-label で読み上げる。 */
.title-repo {
  display: inline-block;
  vertical-align: -.06em;
  margin-left: .4em;
  line-height: 0;
}
.title-repo:hover { opacity: .65; }
.title-repo .tech-logo { width: .82em; height: .82em; margin-top: 0; }
.title-repo .tech-logo svg { width: 100%; height: 100%; }