/* 採点攻略ページ用の追加スタイル。土台は area.css を読み込んだうえで重ねる。
   配色・字組みは既存ページと共通で、ここでは以下だけを足している。

   - 出典の確度ラベル（公式 / 通説）
   - 採点項目の解説リスト
   - 機種の比較表
   - 手順の番号付きリスト
   - 引用（採点開発者の発言など）

   意図的に避けているもの：紫〜青のグラデーション、影の強いカード、
   要素ごとの過剰な囲み。既存ページが紙面寄りの見た目なので、そこから
   浮かないように罫線と余白で構造を作る。
--------------------------------------------------------------------------*/

/* --------------------------------------------------------- 出典の確度 */

/* この記事はチェーン公式の記載と、解説サイトの通説が混ざる。どちらなのかを
   読み手が区別できないと「正確に調べた」ことにならないので、文ごとに印を出す。 */
.src {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: 0.04em;
  padding: 0 5px;
  margin-right: 5px;
  border-radius: 3px;
  vertical-align: 1.5px;
  white-space: nowrap;
}

.src-official {
  color: #1d4f2b;
  background: #e3efe4;
  border: 1px solid #b9d5bd;
}

.src-common {
  color: #7a5a12;
  background: #f6efdd;
  border: 1px solid #ddcda2;
}

.src-legend {
  font-size: 12px;
  color: var(--text-muted);
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.src-legend .src {
  margin-left: 2px;
}

/* ------------------------------------------------------------- 図版 */

/* 説明用の図は写真ではなく SVG。採点の話は「音程バーがどう光るか」
   「どこで揺らすか」のような形の話なので、雰囲気写真より図のほうが
   本文の代わりになる。外部リクエストも増えない。 */
.figure {
  margin: 18px 0 20px;
}

.figure img {
  display: block;
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 8px;
}

.figure figcaption {
  max-width: 520px;
  margin: 7px auto 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* 写真。図と違って全幅で使い、記事の区切りとして置く。
   CC BY のものは表示義務があるので、作者とライセンスを必ず添える。 */
.photo {
  margin: 18px 0 22px;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 8px;
  background: var(--panel);
}

.photo figcaption {
  margin: 7px 2px 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--text-muted);
}

.photo .credit {
  display: block;
  font-size: 10.5px;
  color: var(--text-faint);
  margin-top: 2px;
}

.photo .credit a {
  color: var(--text-faint);
}

/* --------------------------------------------------- 採点項目の解説 */

.criteria {
  margin: 0;
}

.criteria dt {
  font-weight: 700;
  font-size: 14.5px;
  margin: 18px 0 3px;
  padding-left: 11px;
  border-left: 3px solid var(--accent);
  line-height: 1.5;
}

.criteria dt .weight {
  font-weight: 500;
  font-size: 11.5px;
  color: var(--text-faint);
  margin-left: 6px;
}

.criteria dd {
  margin: 0 0 0 14px;
  font-size: 14px;
}

.criteria dd p {
  margin: 0 0 6px;
}

.criteria dd .quote {
  color: var(--text-muted);
  font-size: 13px;
}

/* ----------------------------------------------------------- 比較表 */

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}

.cmp th,
.cmp td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  text-align: left;
  vertical-align: top;
  line-height: 1.6;
}

.cmp thead th {
  background: #faf8f4;
  font-size: 11.5px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-strong);
  white-space: nowrap;
}

.cmp tbody th {
  font-weight: 600;
  width: 27%;
  white-space: nowrap;
}

.cmp tbody tr:last-child th,
.cmp tbody tr:last-child td {
  border-bottom: none;
}

/* ------------------------------------------------------------- 手順 */

.steps {
  list-style: none;
  counter-reset: step;
  margin: 0;
  padding: 0;
}

.steps li {
  counter-increment: step;
  position: relative;
  padding: 0 0 16px 38px;
  margin: 0;
}

.steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 1px;
  width: 25px;
  height: 25px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12.5px;
  font-weight: 700;
  color: #f4f1ea;
  background: var(--ink);
  border-radius: 50%;
}

.steps .step-title {
  display: block;
  font-weight: 700;
  font-size: 14.5px;
  margin-bottom: 2px;
}

/* --------------------------------------------------------- 引用など */

.quote-block {
  margin: 16px 0;
  padding: 2px 0 2px 16px;
  border-left: 3px solid var(--border-strong);
  font-size: 14px;
  color: var(--text);
}

.quote-block p {
  margin: 0 0 6px;
}

.quote-block cite {
  display: block;
  font-size: 11.5px;
  font-style: normal;
  color: var(--text-faint);
}

/* 節の中の小見出し。h2 ほど強くしたくないところで使う */
h3 {
  font-size: 14.5px;
  margin: 24px 0 6px;
}

/* 記事どうしの行き来 */
.more-links {
  list-style: none;
  margin: 0;
  padding: 0;
}

.more-links li {
  border-bottom: 1px solid var(--border);
}

.more-links a {
  display: block;
  padding: 11px 2px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.more-links a:hover {
  text-decoration: underline;
}

.more-links .desc {
  display: block;
  font-size: 12px;
  font-weight: 400;
  color: var(--text-muted);
  margin-top: 1px;
}

/* 出典一覧 */
.sources {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 12.5px;
  color: var(--text-muted);
}

.sources li {
  padding: 4px 0;
  line-height: 1.6;
}

.sources a {
  word-break: break-all;
}