/* 記憶フック一覧（com_q_hook_list.php）専用。設計: docs/memory-hook-list-design.md
   CSS を変えたら com_q_hook_list.php の ?VAR= を上げる */

.hook-intro {
  margin: 12px 10px 8px;
  font-size: .9em;
  line-height: 1.7;
  color: #555;
}

/* ---- 絞り込み ---- */
.hook-filter {
  margin: 8px 10px 4px;
}
.hook-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hook-tab {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid #c9bfa3;
  border-radius: 16px;
  background: #fff;
  color: #333;
  font-size: .85em;
  text-decoration: none;
  line-height: 1.4;
}
.hook-tab.active {
  background: #232f3e;
  border-color: #232f3e;
  color: #fff;
  font-weight: bold;
}
.hook-tab-note {
  margin-left: 4px;
  font-size: .8em;
  color: #999;
}

.hook-count {
  margin: 10px 10px 6px;
  font-size: .9em;
}
.hook-empty {
  margin: 10px;
  padding: 14px;
  background: #fff;
  border: 1px dashed #c9bfa3;
  border-radius: 4px;
  font-size: .9em;
  line-height: 1.7;
}

/* ---- 一覧（ヘッダー付き 2 列: 左=問題／右=記憶フック） ----
   th に資格別 CSS の全体指定（font-weight: normal !important 等）が掛かるため table は使わない */
/* 表は左右いっぱい（外周の左右罫線・角丸なし）。罫線は行の区切り（問題一覧の .menu>li と同じ色）と
   「問題」「記憶フック」の間の縦線だけ */
.hook-grid {
  margin: 0;
  background: #fff;
}
.hook-row {
  display: grid;
  grid-template-columns: 32% minmax(0, 1fr);
  border-bottom: 1px solid rgba(0, 0, 0, .15);
}
.hook-row > div {
  padding: 10px 8px;
  min-width: 0;
}
.hook-c-hook {
  line-height: 1.75;
}
.hook-c-hook strong {
  border: none !important;
}
/* 問題タイトルは問題一覧（com_q_list.php の .menu>li>a）と同じ標準の文字サイズ・色・行間 */
.hook-c-q {
  border-right: 1px solid rgba(0, 0, 0, .15);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.hook-c-q a {
  color: inherit;
  text-decoration: none;
}
/* 見出しはタスク別一覧（com_q_task.php）の分野見出し（main.css の section h3 ＋ 灰色の背景）と同じ高さ・色 */
.hook-row-head {
  background: rgba(128, 128, 128, .8);
  color: #ddd;
  font-size: 15px;
  font-weight: bold;
  line-height: 24px;
  border-bottom: 1px solid rgba(0, 0, 0, .1);
}
.hook-row-head > div {
  padding: 3px 8px;
  line-height: 24px;   /* 本文セルの行間（記憶フック列 1.75）を見出しに持ち込まない */
}
.hook-row-head .hook-c-q {
  border-right-color: rgba(255, 255, 255, .3);
}
@media (max-width: 600px) {
  .hook-row { grid-template-columns: 38% minmax(0, 1fr); }
}

/* ---- 施錠 ---- */
.hook-blur {
  filter: blur(4px);
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
/* 施錠時の案内は com.css の .premium-guest-cta（プレミアム案内ページと同じ部品）を使う。ここでは置き場所の余白だけ */
.hook-cta {
  padding: 4px 0 0;
}

/* ---- 印刷: 本文を出さない（設計 §4。持ち出し対策） ---- */
@media print {
  .hook-c-hook { visibility: hidden; }
}

/* ---- ナイトモード ---- */
body.night .hook-intro { color: #bbb; }
body.night .hook-tab { background: transparent; color: #ddd; border-color: #666; }
body.night .hook-tab.active { background: #FF9900; border-color: #FF9900; color: #111; }
body.night .hook-grid,
body.night .hook-empty { background: transparent; }
body.night .hook-row,
body.night .hook-c-q { border-color: #444; }