/**
 * site.css — variables.css で定義した CSS 変数のみを使う。
 * 画像・アイコンフォントなし。装飾は罫線・余白・タイポグラフィのみ。
 */

* {
  box-sizing: border-box;
}

html {
  background: var(--hn-color-bg);
}

body {
  margin: 0;
  background: var(--hn-color-bg);
  color: var(--hn-color-text);
  font-family: var(--hn-font-body);
  font-size: var(--hn-font-size-body);
  line-height: var(--hn-line-height-body);
  -webkit-text-size-adjust: 100%;
}

a {
  color: var(--hn-color-meta-link);
  text-decoration: underline;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--hn-color-meta-link);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--hn-font-heading);
  color: var(--hn-color-text);
  margin: 0 0 var(--hn-space-2);
}

.hn-container {
  max-width: var(--hn-max-width);
  margin: 0 auto;
  padding: 0 var(--hn-space-3);
}

/* --- ヘッダ --- */
.hn-header {
  border-bottom: var(--hn-border-width) solid var(--hn-color-border);
  padding: var(--hn-space-3) 0;
}

.hn-header .hn-container {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--hn-space-2);
}

.hn-logo {
  margin: 0;
  font-family: var(--hn-font-heading);
  font-size: 18px;
  font-weight: 700;
}

.hn-logo a {
  color: var(--hn-color-text);
  text-decoration: none;
}

/* サイト名下の一行説明 */
.hn-tagline {
  margin: var(--hn-space-1) 0 0;
  width: 100%;
  font-size: 12px;
  color: var(--hn-color-text-sub);
}

.hn-country-tabs ul {
  list-style: none;
  display: flex;
  gap: var(--hn-space-3);
  margin: 0;
  padding: 0;
}

.hn-tab {
  display: inline-block;
  padding-bottom: var(--hn-space-1);
  font-size: 14px;
  color: var(--hn-color-text-sub);
  text-decoration: none;
  border-bottom: 2px solid transparent;
}

.hn-tab--active {
  color: var(--hn-color-text);
  border-bottom-color: var(--hn-color-text);
  font-weight: 700;
}

.hn-tab--disabled {
  color: var(--hn-color-border-strong);
}

.hn-tab--disabled small {
  display: block;
  font-size: 10px;
}

/* --- main --- */
main.hn-container {
  padding-top: var(--hn-space-4);
  padding-bottom: var(--hn-space-5);
}

/* --- 日付行 --- */
.hn-day-header {
  margin-bottom: var(--hn-space-3);
}

.hn-date {
  margin: 0;
  font-family: var(--hn-font-heading);
  font-size: 22px;
  font-weight: 700;
}

.hn-source-counts {
  margin: var(--hn-space-1) 0 0;
  color: var(--hn-color-text-sub);
  font-size: var(--hn-font-size-body-sm);
}

/* --- 固定注意文言 --- */
.hn-disclaimer {
  background: var(--hn-color-surface-dim);
  border: var(--hn-border-width) solid var(--hn-color-border);
  border-radius: var(--hn-radius);
  padding: var(--hn-space-2) var(--hn-space-3);
  font-size: var(--hn-font-size-body-sm);
  color: var(--hn-color-text-sub);
  margin: 0 0 var(--hn-space-4);
}

.hn-disclaimer p {
  margin: 0;
}

.hn-disclaimer p + p {
  margin-top: var(--hn-space-1);
}

/* --- セクション --- */
.hn-section {
  margin-bottom: var(--hn-space-5);
}

.hn-section__note {
  margin: 0 0 var(--hn-space-3);
  font-size: 13px;
  color: var(--hn-color-text-sub);
}

.hn-section__title {
  font-size: 18px;
  border-bottom: var(--hn-border-width) solid var(--hn-color-border);
  padding-bottom: var(--hn-space-2);
  margin-bottom: var(--hn-space-3);
}

/* --- 記事カード --- */
.hn-card-list {
  display: flex;
  flex-direction: column;
  gap: var(--hn-space-3);
}

.hn-card {
  background: var(--hn-color-surface-dim);
  border: var(--hn-border-width) solid var(--hn-color-border);
  border-radius: var(--hn-radius);
  padding: var(--hn-space-3);
}

.hn-card:hover {
  background: var(--hn-color-surface-dim2);
}

.hn-card__tags {
  margin: 0 0 var(--hn-space-2);
  display: flex;
  gap: var(--hn-space-1);
  flex-wrap: wrap;
}

.hn-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px var(--hn-space-2);
  border-radius: var(--hn-radius);
  background: var(--hn-color-chip-bg);
  color: var(--hn-color-text);
}

.hn-tag--unreported {
  background: var(--hn-color-accent-bg);
  color: var(--hn-color-accent-text);
}

.hn-card__title {
  margin: 0 0 var(--hn-space-1);
  font-size: var(--hn-font-size-body);
  font-weight: 700;
  line-height: 1.6;
}

.hn-card__body {
  margin: 0 0 var(--hn-space-2);
  font-size: var(--hn-font-size-body-sm);
  /* 要約本文は最大 4 行まで（それ以上は原文リンクへ誘導） */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.hn-card__ainote {
  margin-left: auto;
  font-size: 11px;
  font-weight: 400;
  letter-spacing: 0.03em;
  color: var(--hn-color-text-sub);
  align-self: center;
}

.hn-card__meta {
  margin: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--hn-space-2);
  font-size: var(--hn-font-size-body-sm);
  color: var(--hn-color-text-sub);
}

.hn-card__source {
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: var(--hn-space-2);
}

/* 媒体種別バッジ（国営系／独立系） */
.hn-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px var(--hn-space-2);
  border-radius: var(--hn-radius);
}

.hn-badge--state {
  background: var(--hn-color-badge-state-bg);
  color: var(--hn-color-badge-state-text);
}

.hn-badge--independent {
  background: var(--hn-color-badge-indep-bg);
  color: var(--hn-color-badge-indep-text);
}

/* 原文リンクはボタン風 */
.hn-card__link {
  white-space: nowrap;
  display: inline-block;
  padding: var(--hn-space-1) var(--hn-space-2);
  border: var(--hn-border-width) solid var(--hn-color-border-strong);
  border-radius: var(--hn-radius);
  text-decoration: none;
  color: var(--hn-color-meta-link);
  background: var(--hn-color-surface);
}

.hn-card__link:hover {
  background: var(--hn-color-surface-dim2);
}

/* --- 語彙横棒 --- */
.hn-wordbar-list {
  display: flex;
  flex-direction: column;
  gap: var(--hn-space-2);
}

.hn-wordbar {
  display: grid;
  grid-template-columns: 7em 1fr 3em;
  align-items: center;
  gap: var(--hn-space-2);
  font-size: var(--hn-font-size-body-sm);
}

.hn-wordbar__label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.hn-wordbar__track {
  display: block;
  height: 12px;
  background: var(--hn-color-bar-track);
  border-radius: 0;
}

.hn-wordbar__fill {
  display: block;
  height: 100%;
  background: var(--hn-color-bar-fill);
  border-radius: 0;
}

.hn-wordbar__count {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* 5%刻みの幅クラス（CSP style-src 'self' のためインライン style を使わない） */
.hn-w-0   { width: 0%; }
.hn-w-5   { width: 5%; }
.hn-w-10  { width: 10%; }
.hn-w-15  { width: 15%; }
.hn-w-20  { width: 20%; }
.hn-w-25  { width: 25%; }
.hn-w-30  { width: 30%; }
.hn-w-35  { width: 35%; }
.hn-w-40  { width: 40%; }
.hn-w-45  { width: 45%; }
.hn-w-50  { width: 50%; }
.hn-w-55  { width: 55%; }
.hn-w-60  { width: 60%; }
.hn-w-65  { width: 65%; }
.hn-w-70  { width: 70%; }
.hn-w-75  { width: 75%; }
.hn-w-80  { width: 80%; }
.hn-w-85  { width: 85%; }
.hn-w-90  { width: 90%; }
.hn-w-95  { width: 95%; }
.hn-w-100 { width: 100%; }

/* --- 前日・翌日ナビ --- */
.hn-day-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--hn-space-3);
  border-top: var(--hn-border-width) solid var(--hn-color-border);
  padding-top: var(--hn-space-3);
  margin-top: var(--hn-space-4);
  font-size: var(--hn-font-size-body-sm);
}

.hn-day-nav__next {
  margin-left: auto;
}

/* --- 空状態 --- */
.hn-empty-state {
  color: var(--hn-color-text-sub);
  padding: var(--hn-space-4) 0;
}

/* --- フッタ --- */
.hn-footer {
  border-top: var(--hn-border-width) solid var(--hn-color-border);
  padding: var(--hn-space-3) 0 var(--hn-space-4);
  font-size: var(--hn-font-size-body-sm);
  color: var(--hn-color-text-sub);
}

.hn-footer p {
  margin: 0 0 var(--hn-space-1);
}

.hn-copyright {
  color: var(--hn-color-border-strong);
}

/* --- stats ページ --- */
.hn-stats-note {
  color: var(--hn-color-text-sub);
  font-size: var(--hn-font-size-body-sm);
}

.hn-chart-wrap {
  background: var(--hn-color-surface);
  border: var(--hn-border-width) solid var(--hn-color-border);
  border-radius: var(--hn-radius);
  padding: var(--hn-space-3);
}

.hn-chart-wrap canvas {
  width: 100%;
  max-height: 420px;
}

.hn-stats-annotations {
  margin-top: var(--hn-space-4);
}

/* --- about ページ --- */
.hn-about section {
  margin-bottom: var(--hn-space-4);
}

.hn-table-wrap {
  overflow-x: auto;
}

.hn-table {
  border-collapse: collapse;
  width: 100%;
  font-size: var(--hn-font-size-body-sm);
}

.hn-table th,
.hn-table td {
  border: var(--hn-border-width) solid var(--hn-color-border);
  padding: var(--hn-space-2);
  text-align: left;
}

.hn-table th {
  background: var(--hn-color-surface-dim);
}

/* --- レスポンシブ --- */
@media (max-width: 420px) {
  .hn-wordbar {
    /* 「ウクライナ」など 5 文字ラベルが省略されない幅を確保する */
    grid-template-columns: 5.5em 1fr 2em;
    font-size: 13px;
  }
}