/* ===========================================================
 * TalkNeT 固有スタイル (services/talknet.css)
 *
 * TalkNeT ページ本体は .c-post / .c-composer / .c-sidebar を使用。
 * ここでは TalkNeT 特有の細調整のみ残す。
 *
 * 注: TalkNeT 旧CSS (talknet/style.css) は完全廃止予定。
 *     過渡期、新コンポーネントと旧スタイルが競合する可能性あり。
 *     Phase 4 完了後 .talknet 配下の旧 style.css は削除する。
 *
 * 注: このファイルは talkit.css とは別途 <link> で読み込まれるため、
 *     cascade priority を整合させるため @layer services で包む。
 * =========================================================== */
@layer services {

/* ソート / フィルタ バー */
body[data-service="talknet"] .tn-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
  align-items: center;
  padding: var(--tk-space-2) var(--tk-space-3);
  background-color: var(--tk-color-surface);
  border: 1px solid var(--tk-color-border);
  border-radius: var(--tk-radius-md);
  margin-bottom: var(--tk-space-3);
  font-size: var(--tk-font-size-sm);
}
body[data-service="talknet"] .tn-filters select { width: auto; min-height: 32px; padding: 4px var(--tk-space-3); }
body[data-service="talknet"] .tn-filters label {
  display: inline-flex;
  align-items: center;
  gap: var(--tk-space-2);
  font-weight: 600;
  color: var(--tk-color-text);
}

/* admax スイッチ広告 (TalkNeT ページ下部) */
body[data-service="talknet"] .admax-switch {
  margin: var(--tk-space-4) 0;
  text-align: center;
  width: 100%;
  overflow: hidden;
}
body[data-service="talknet"] .admax-switch iframe { max-width: 100%; }

/* 投稿リスト全体 (.tn-feed は .service-view__main と併用)
 * 注意: flex/grid を立て方向に限定し、横並び崩れを防ぐ */
body[data-service="talknet"] .tn-feed {
  display: grid;
  gap: var(--tk-space-3);
  grid-template-columns: 1fr;
}

/* TalkNeT 固有の簡易 login-hint (未ログイン時) */
body[data-service="talknet"] .tn-login-hint {
  background-color: var(--tk-accent-weak, var(--tk-color-primary-weak));
  border-left: 4px solid var(--tk-accent, var(--tk-color-primary));
  border-radius: var(--tk-radius-md);
  padding: var(--tk-space-3) var(--tk-space-4);
  margin-bottom: var(--tk-space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tk-space-3);
  flex-wrap: wrap;
}
body[data-service="talknet"] .tn-login-hint p { margin: 0; }
body[data-service="talknet"] .tn-login-hint a { font-weight: 600; }

/* タブ(timeline / rank / search / notifications) */
body[data-service="talknet"] .tn-tabs {
  border-bottom: 1px solid var(--tk-color-border);
  margin-bottom: var(--tk-space-3);
}
body[data-service="talknet"] .tn-tabs ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
}
body[data-service="talknet"] .tn-tabs__item a {
  display: inline-block;
  padding: var(--tk-space-2) var(--tk-space-3);
  text-decoration: none;
  color: var(--tk-color-text);
  border-bottom: 3px solid transparent;
  white-space: nowrap;
}
body[data-service="talknet"] .tn-tabs__item.is-active a {
  color: var(--tk-color-primary, var(--tk-accent));
  border-bottom-color: currentColor;
  font-weight: 600;
}
body[data-service="talknet"] .tn-tab__badge {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 6px;
  border-radius: 999px;
  background-color: var(--tk-color-primary, var(--tk-accent));
  color: #fff;
  font-size: var(--tk-font-size-xs, 0.7rem);
  font-weight: 700;
}

/* プロフィールカード(user.php) */
body[data-service="talknet"] .tn-profile__header {
  display: flex;
  align-items: center;
  gap: var(--tk-space-3);
  flex-wrap: wrap;
}
body[data-service="talknet"] .tn-profile__name {
  font-size: var(--tk-font-size-lg, 1.1rem);
  font-weight: 700;
  margin: 0;
}
body[data-service="talknet"] .tn-profile__followers {
  color: var(--tk-color-text-muted, #777);
  font-size: var(--tk-font-size-sm, 0.85rem);
}

/* 通知タブ */
body[data-service="talknet"] .tn-notifications__list {
  list-style: none;
  padding: 0;
  margin: 0;
}
body[data-service="talknet"] .tn-notifications__item {
  display: flex;
  gap: var(--tk-space-3);
  padding: var(--tk-space-2) var(--tk-space-3);
  border-bottom: 1px solid var(--tk-color-border);
  align-items: baseline;
}
body[data-service="talknet"] .tn-notifications__item.is-unread {
  background-color: var(--tk-color-primary-weak, #fff7e6);
}
body[data-service="talknet"] .tn-notifications__time {
  font-size: var(--tk-font-size-xs, 0.7rem);
  color: var(--tk-color-text-muted, #888);
  flex: 0 0 130px;
}
body[data-service="talknet"] .tn-notifications__msg a { font-weight: 600; }

/* ハッシュタグ一覧(tags.php / tag.php) */
body[data-service="talknet"] .tn-tags-list,
body[data-service="talknet"] .tn-tags-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--tk-space-2);
}
body[data-service="talknet"] .tn-tags-list__tag {
  display: inline-flex;
  align-items: baseline;
  gap: var(--tk-space-2);
  padding: var(--tk-space-1) var(--tk-space-3);
  border-radius: 999px;
  background-color: var(--tk-color-surface, #f5f5f5);
  border: 1px solid var(--tk-color-border, #ddd);
  text-decoration: none;
  color: var(--tk-color-text);
}
body[data-service="talknet"] .tn-tags-list__tag:hover {
  border-color: var(--tk-color-primary, var(--tk-accent));
}

/* スレッド表示(details.php) */
body[data-service="talknet"] .tn-thread__op {
  border: 2px solid var(--tk-color-border);
  padding: var(--tk-space-3);
  border-radius: var(--tk-radius-md);
}
body[data-service="talknet"] .tn-thread__comments-title {
  margin-top: var(--tk-space-4);
  font-size: var(--tk-font-size-md, 1rem);
}
body[data-service="talknet"] .tn-thread__comments .tn-comments-list {
  list-style: none;
  padding: 0;
  margin: var(--tk-space-2) 0;
}
body[data-service="talknet"] .tn-comment-form textarea {
  width: 100%;
  display: block;
  margin-bottom: var(--tk-space-2);
}

} /* end @layer services */