/* サイドバー共通スタイル */

.article-sidebar {}

.sidebar-section { margin-bottom: 32px; }

.sidebar-section-title {
  font-family: var(--serif);
  font-size: 13px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: 0.08em;
  margin-bottom: 12px;
  padding-left: 10px;
  border-left: 3px solid var(--ink);
}

.sidebar-newsletter {
  background: var(--ink);
  padding: 0 0 20px;
  margin-bottom: 32px;
  border: 1px solid var(--gold);
}

.sidebar-newsletter-label {
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold);
  padding: 8px 16px;
  border-bottom: 1px solid rgba(200,169,110,0.3);
  margin-bottom: 16px;
}

.sidebar-newsletter-body { padding: 0 16px; }

.sidebar-newsletter-title {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: 700;
  color: white;
  margin-bottom: 8px;
}

.sidebar-newsletter-desc { font-size: 11px; color: #999; line-height: 1.7; margin-bottom: 14px; }

.sidebar-newsletter input {
  width: 100%;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: white;
  font-family: var(--sans);
  font-size: 11px;
  padding: 9px 12px;
  margin-bottom: 8px;
  outline: none;
  box-sizing: border-box;
}

.sidebar-newsletter input::placeholder { color: #555; }

.sidebar-newsletter button {
  width: 100%;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.15em;
  padding: 10px;
  border: none;
  cursor: pointer;
}

/* カテゴリリスト */
.cat-list { display: flex; flex-direction: column; }

.cat-list-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  color: var(--ink2);
  text-decoration: none;
  transition: color 0.15s;
}

.cat-list-item:hover { color: var(--gold2); }

.cat-list-count { font-size: 10px; color: var(--gray); background: var(--paper); padding: 2px 8px; }

/* タグ */
.tag-pill {
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink2);
  border: 0.5px solid var(--border);
  padding: 4px 10px;
  cursor: pointer;
  transition: all 0.15s;
  text-decoration: none;
}

.tag-pill:hover { background: var(--ink); color: white; border-color: var(--ink); }

/* ランキング — rank-body はタイトル+タグの縦積みラッパー */
.rank-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}

/* ランキング番号の色 */
.rank-num.gold   { color: #c8a96e; }
.rank-num.silver { color: #999; }
.rank-num.bronze { color: #b07d51; }