/* /haiku/words/ 専用スタイル(haiku.css の上に重ねる) */

/* ---------- 一覧: ことばの濃淡 ---------- */
.words-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 10px 14px;
  margin-bottom: 48px;
}
.words-filter .chips { display: flex; gap: 6px; }
.words-filter button {
  appearance: none;
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  color: var(--moss-deep);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(126,148,131,0.4);
  border-radius: 999px;
  padding: 6px 14px;
  line-height: 1.7;
  cursor: pointer;
}
.words-filter button.on { background: var(--moss); border-color: var(--moss); color: var(--washi); }
.words-filter select {
  font: inherit;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--moss-deep);
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(126,148,131,0.4);
  border-radius: 999px;
  padding: 6px 12px;
}

/* ランキングの表 */
.words-table { width: 100%; border-collapse: collapse; }
.words-table th {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  color: var(--usuzumi);
  text-align: left;
  padding: 0 10px 10px;
  border-bottom: 1px solid rgba(107,112,120,0.3);
}
.words-table td {
  vertical-align: top;
  padding: 14px 10px;
  border-bottom: 1px solid rgba(107,112,120,0.14);
}
.words-table .rank {
  width: 2.4em;
  font-family: var(--font-mincho);
  font-size: 14px;
  color: var(--usuzumi);
  text-align: right;
  white-space: nowrap;
}
.words-table .word { white-space: nowrap; }
.words-table .word a { text-decoration: none; }
.words-table .word .w {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.1em;
  color: var(--sumi);
}
.words-table .word a .w { border-bottom: 1px solid rgba(126,148,131,0.5); padding-bottom: 2px; }
.words-table .word a:hover .w { color: var(--moss-deep); border-bottom-color: var(--moss-deep); }
.words-table .word .yomi {
  display: block;
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--usuzumi);
  margin-top: 4px;
}
.words-table .cnt {
  width: 7.5em;
  font-size: 12.5px;
  letter-spacing: 0.08em;
  color: var(--usuzumi);
  white-space: nowrap;
}
.words-table .note {
  font-size: 13px;
  line-height: 2;
  letter-spacing: 0.03em;
  color: rgba(42,45,51,0.82);
}
@media (max-width: 640px) {
  /* 狭い画面では 順位|語|回数 を1行に、解説をその下に回り込ませる */
  .words-table thead { display: none; }
  .words-table tr { display: grid; grid-template-columns: 2.2em 1fr auto; padding: 12px 0; border-bottom: 1px solid rgba(107,112,120,0.14); }
  .words-table td { display: block; border-bottom: none; padding: 2px 6px; }
  .words-table .note { grid-column: 1 / -1; padding-top: 6px; }
}
.words-note {
  margin-top: 56px;
  font-size: 12px;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--usuzumi);
  text-align: center;
}

/* ---------- ことばの旅路(夜のセクション) ---------- */
.words-road {
  padding: 40px 0 64px;
  text-align: center;
  color: var(--washi);
  /* 旅路だけ、夜のなかでわずかに青が深くなる(上下は夜に溶けて戻る) */
  background: linear-gradient(180deg,
    var(--night) 0%,
    #222B41 14%,
    #273350 50%,
    #222B41 86%,
    var(--night) 100%);
}
.words-road h2 {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: 0.34em;
  color: rgba(244,240,230,0.85);
}
.words-road .road-sub {
  margin: 14px 24px 4px;
  font-size: 12.5px;
  line-height: 2.2;
  letter-spacing: 0.1em;
  color: rgba(244,240,230,0.55);
}
.road-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.road-inner { position: relative; margin: 0 auto; }
#road { display: block; }
#road .way {
  stroke: rgba(244,240,230,0.3);
  stroke-width: 1.5;
  stroke-dasharray: 1 7;
  stroke-linecap: round;
}
#road text {
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  letter-spacing: 0.1em;
}
#road a { text-decoration: none; }
#road a:hover text { fill: var(--asahi); }
/* 歩く山頭火: 道のパスに沿って十五年ぶん歩きつづける。つまんで時代をたどれる */
.walker {
  position: absolute;
  left: 0;
  top: 0;
  display: none;
  offset-rotate: 0deg;
  animation: roadwalk 150s linear infinite;
  cursor: grab;
  touch-action: none;
  padding: 14px 12px;   /* つまみやすいように当たりを広く */
  margin: -14px -12px;
}
.walker:active { cursor: grabbing; }
@supports (offset-path: path("M0 0 L1 1")) { .walker { display: block; } }
.walker img { width: 36px; transform: translateY(-19px); display: block; }
@keyframes roadwalk { from { offset-distance: 0%; } to { offset-distance: 100%; } }
@media (prefers-reduced-motion: reduce) { .walker { animation: none; offset-distance: 6%; } }

/* 通過中・選択中の章だけが浮かぶ(選択章はほんのり発光) */
#road .station { transition: opacity 0.5s ease, filter 0.5s ease; cursor: pointer; }
#road .station.dim { opacity: 0.34; }
#road .station.on { opacity: 1; filter: drop-shadow(0 0 9px rgba(233,223,200,0.55)); }
#road .station.on text.wd { fill: #F7F1E1; }
#road .station.on text.stname { fill: var(--asahi); }
#road .station.on rect { fill: var(--asahi); }
/* 英語版: 旅路の語の英訳グロス・簡素リストのグロス */
#road text .gl { font-size: 10px; letter-spacing: 0.04em; fill: rgba(244,240,230,0.55); }
.words-rest .gl { font-size: 10.5px; color: var(--usuzumi); letter-spacing: 0.04em; }

/* 文字は背景色の縁取りで守る(旅路の青に合わせる) */
#road text.wd, #road text.stname {
  paint-order: stroke;
  stroke: rgba(38,49,78,0.9);
  stroke-width: 3px;
  stroke-linejoin: round;
}
/* 走行キャプション: いまいる章の解説。章の真下に付いていく */
.cap-arrow {
  position: absolute;
  top: 552px;
  left: 0;
  width: 2px;
  height: 18px;
  background: rgba(233,223,200,0.5);
  transition: transform 0.55s cubic-bezier(0.25, 0.7, 0.3, 1);
}
/* 狭い画面では追従キャプションをやめ、デバイス幅に収まる固定ブロックで見せる */
.road-cap-m {
  display: none;
  margin: 14px auto 0;
  padding: 0 22px;
  max-width: 34em;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.95;
  letter-spacing: 0.06em;
  color: rgba(244,240,230,0.78);
}
.road-cap-m strong {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.16em;
  color: var(--asahi);
}
.road-cap-m .desc { color: rgba(244,240,230,0.55); font-size: 12px; }
@media (max-width: 860px) {
  .road-cap, .cap-arrow { display: none; }
  .road-cap-m { display: block; }
}
/* 狭い画面ではリード文・旅路説明の固定改行をやめて自然に折り返す */
@media (max-width: 640px) {
  .index-hero p br, .words-road .road-sub br { display: none; }
}
.road-cap {
  width: 430px;
  margin: 12px 0 0;
  text-align: left;
  font-size: 12.5px;
  line-height: 1.95;
  letter-spacing: 0.08em;
  color: rgba(244,240,230,0.78);
  transition: transform 0.55s cubic-bezier(0.25, 0.7, 0.3, 1);
  will-change: transform;
}
.road-cap strong {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.2em;
  color: var(--asahi);
}
.road-cap .desc { color: rgba(244,240,230,0.55); font-size: 12px; }

/* ---------- 上位三語: ことばのおぼえがきカード ---------- */
.top3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 40px 0 44px;
}
.top3 article {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 8px 26px;
  align-items: start;
  background: #FBF9F2;
  border: 1px solid rgba(107,112,120,0.16);
  border-left: 3px solid var(--moss);
  border-radius: 4px;
  padding: 24px 26px 22px;
  box-shadow: 0 1px 2px rgba(42,45,51,0.05), 0 12px 28px -18px rgba(42,45,51,0.25);
  text-align: left;
}
.top3 .t3-head { grid-column: 1; }
.top3 .t3-note { grid-column: 2; grid-row: 1; }
@media (max-width: 640px) {
  .top3 article { grid-template-columns: 1fr; }
  .top3 .t3-note { grid-column: 1; grid-row: auto; }
}
.top3 .t3-rank {
  display: inline-block;
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 11.5px;
  letter-spacing: 0.26em;
  color: var(--washi);
  background: var(--shu);
  border-radius: 3px;
  padding: 2px 7px 2px 10px;
  margin-bottom: 10px;
}
.top3 h3 { margin: 0 0 2px; line-height: 1.3; }
.top3 h3 a {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: 34px;
  letter-spacing: 0.14em;
  color: var(--sumi);
  text-decoration: none;
  border-bottom: 1px solid rgba(126,148,131,0.5);
  padding-bottom: 2px;
}
.top3 h3 a:hover { color: var(--moss-deep); }
.top3 .t3-meta {
  font-size: 11.5px;
  letter-spacing: 0.12em;
  color: var(--usuzumi);
  margin: 8px 0 12px;
}
.top3 .t3-note {
  font-size: 13px;
  line-height: 2.05;
  letter-spacing: 0.02em;
  color: rgba(42,45,51,0.84);
}

/* ---------- 21位から: 簡素な3カラム ---------- */
.words-rest {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0 28px;
}
@media (max-width: 640px) { .words-rest { grid-template-columns: repeat(2, 1fr); } }
.words-rest a, .words-rest span.item {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 8px 2px;
  border-bottom: 1px solid rgba(107,112,120,0.12);
  text-decoration: none;
  color: var(--sumi);
}
.words-rest .r {
  font-family: var(--font-mincho);
  font-size: 11px;
  color: var(--usuzumi);
  min-width: 1.8em;
  text-align: right;
}
.words-rest .w {
  font-family: var(--font-mincho);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.08em;
}
.words-rest a:hover .w { color: var(--moss-deep); }
.words-rest .c {
  margin-left: auto;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--usuzumi);
  white-space: nowrap;
}

/* ---------- 語ページ ---------- */
/* ファーストビューで解説まで見せたいのでヒーローは低く、夜→和紙の帯も短く */
.word-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px 40px;
  text-align: center;
  color: var(--washi);
}
.dawn-band.slim { height: 140px; }
.word-hero h1 {
  font-family: var(--font-mincho);
  font-weight: 600;
  font-size: clamp(30px, 7vw, 50px);
  letter-spacing: 0.18em;
  line-height: 1.8;
}
.word-hero .reading {
  margin-top: 18px;
  font-size: 13px;
  letter-spacing: 0.3em;
  color: rgba(244,240,230,0.6);
}
.word-hero .from {
  margin-top: 10px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: rgba(244,240,230,0.5);
}
.word-poems { list-style: none; margin-top: 48px; }
.word-poems li { break-inside: avoid; }
.word-poems a {
  display: block;
  font-family: var(--font-mincho);
  font-size: 16px;
  letter-spacing: 0.06em;
  line-height: 2;
  color: var(--sumi);
  text-decoration: none;
  padding: 10px 2px;
  border-bottom: 1px solid rgba(107,112,120,0.14);
}
.word-poems a:hover { color: var(--moss-deep); }
.word-poems .sec {
  font-family: var(--font-ui);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--usuzumi);
  margin-left: 10px;
  white-space: nowrap;
}
.word-poems em.wd {
  font-style: normal;
  color: var(--moss-deep);
  border-bottom: 2px solid rgba(126,148,131,0.5);
}
.word-back { text-align: center; margin-top: 48px; }
.word-back a {
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--moss-deep);
  text-decoration: none;
  border-bottom: 1px solid rgba(91,113,96,0.35);
}