/* site.css — ツリズカン 静的サイト(site-dist/)の唯一のスタイルシート
 *
 * 方針:
 *  - アプリ(www/css/theme.css)の Almanac トークン(生成りの紙 × 藍墨 × ウキの朱)を引き継ぐ。
 *    ただしサイトは「軽い静的CSS 1ファイル」に留め、アプリの app.css は持ち込まない。
 *  - JS をほぼ使わないので :hover / :focus-visible と CSS だけで成立させる。
 *  - 色の定義を @media の中だけに置かない(切替が片道になる)。
 *  - タブレット: 要素を足さず padding-inline で中身を中央へ寄せる(D:\monaca\CLAUDE.md 共通ルール)。
 *  - prefers-reduced-motion: reduce で無限ループは全停止・登場系は即時表示。
 */

:root {
  color-scheme: light dark;

  --c-bg:        #f2eee4;
  --c-surface:   #fbf8f1;
  --c-surface-2: #e7e1d2;
  --c-border:    #cec5ae;
  --c-rule:      #b8ac8f;

  --c-text:      #16242b;
  --c-text-dim:  #55666d;

  --c-accent:      #0e5b76;
  --c-accent-weak: #dcebf0;
  --c-accent-ink:  #fbf8f1;

  --c-season:      #b4501f;
  --c-season-bg:   #f7e3d5;
  --c-season-ink:  #fbf8f1;

  --c-danger:      #9e2b1a;
  --c-danger-bg:   #f7ddd7;
  --c-danger-ink:  #fbf8f1;

  --c-shade:       rgba(22, 36, 43, 0.10);

  --font-display: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP",
                  "Songti SC", serif;
  --font-body:    system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP",
                  "Yu Gothic UI", sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --text-xs:   0.75rem;
  --text-sm:   0.8125rem;
  --text-base: 0.9375rem;
  --text-md:   1.0625rem;
  --text-lg:   1.25rem;
  --text-xl:   1.5rem;
  --text-2xl:  1.875rem;
  --text-3xl:  2.375rem;

  --space-2xs: 0.125rem;
  --space-xs: 0.25rem;
  --space-sm: 0.5rem;
  --space-md: 1rem;
  --space-lg: 1.5rem;
  --space-xl: 2.5rem;
  --space-2xl: 3.5rem;

  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.875rem;
  --radius-pill: 999px;

  --measure: 42rem;   /* サイトは本文が長いのでアプリ(36rem)より少し広い */
  --wide: 64rem;      /* カード格子の上限 */
  --tap-min: 44px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c-bg:        #091318;
    --c-surface:   #102027;
    --c-surface-2: #182f38;
    --c-border:    #2b4650;
    --c-rule:      #3c5b66;

    --c-text:      #ece5d5;
    --c-text-dim:  #a0b2b9;

    --c-accent:      #5cb7d9;
    --c-accent-weak: #12303c;
    --c-accent-ink:  #05191f;

    --c-season:      #f0964f;
    --c-season-bg:   #3a2410;
    --c-season-ink:  #1a0d02;

    --c-danger:      #ff7a68;
    --c-danger-bg:   #3c1610;
    --c-danger-ink:  #200604;

    --c-shade:       rgba(0, 0, 0, 0.45);
  }
}

/* ---------- reset ---------- */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.85;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--c-accent); text-underline-offset: 0.2em; }
a:focus-visible, button:focus-visible {
  outline: 2px solid var(--c-season);
  outline-offset: 2px;
}
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; line-height: 1.35; }
h1 { font-size: var(--text-2xl); margin: 0 0 var(--space-sm); letter-spacing: 0.01em; }
h2 { font-size: var(--text-lg); margin: var(--space-xl) 0 var(--space-sm); }
h3 { font-size: var(--text-md); margin: var(--space-lg) 0 var(--space-xs); }
p  { margin: 0 0 var(--space-md); }
ul, ol { margin: 0 0 var(--space-md); padding-left: 1.35em; }
li { margin: 0 0 var(--space-xs); }
hr { border: 0; border-top: 1px solid var(--c-rule); margin: var(--space-xl) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-sm); }
th, td { text-align: left; padding: var(--space-xs) var(--space-sm); border-bottom: 1px solid var(--c-border); vertical-align: top; }
th { color: var(--c-text-dim); font-weight: 600; white-space: nowrap; }

/* ---------- 骨格 ---------- */

.wrap {
  width: 100%;
  padding-inline: max(var(--space-md), calc((100% - var(--wide)) / 2));
}
.prose { max-width: var(--measure); }

.skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--c-accent); color: var(--c-accent-ink);
  padding: var(--space-sm) var(--space-md); z-index: 20;
}
.skip:focus { left: 0; }

/* --- masthead --- */
.masthead {
  border-bottom: 2px solid var(--c-text);
  background: var(--c-surface);
}
.masthead__in {
  display: flex; align-items: center; gap: var(--space-md);
  flex-wrap: wrap;
  padding-block: var(--space-sm);
}
.brand {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--c-text);
  text-decoration: none;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.brand span { color: var(--c-season); }
.nav {
  display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-md);
  margin-left: auto; align-items: center;
}
.nav a {
  color: var(--c-text-dim);
  text-decoration: none;
  font-size: var(--text-sm);
  padding: var(--space-xs) 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--c-text); border-bottom-color: var(--c-season); }
.nav a[aria-current="page"] { color: var(--c-text); border-bottom-color: var(--c-season); }
.lang {
  font-size: var(--text-xs);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  padding: 2px var(--space-sm);
  text-decoration: none;
  color: var(--c-text-dim);
  white-space: nowrap;
}
.lang:hover { border-color: var(--c-accent); color: var(--c-accent); }

/* --- パンくず --- */
.crumbs {
  font-size: var(--text-xs);
  color: var(--c-text-dim);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--c-border);
}
.crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-xs); }
.crumbs li::after { content: "›"; margin-left: var(--space-xs); color: var(--c-rule); }
.crumbs li:last-child::after { content: ""; }
.crumbs a { color: var(--c-text-dim); }

main { padding-block: var(--space-lg) var(--space-2xl); display: block; }

/* --- 見出しブロック --- */
.kicker {
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-season);
  margin: 0 0 var(--space-2xs);
  font-weight: 700;
}
.lede { color: var(--c-text-dim); max-width: var(--measure); }

/* --- section --- */
.section { margin-block: var(--space-xl); }
.section > h2 {
  margin-top: 0;
  padding-bottom: var(--space-2xs);
  border-bottom: 1px solid var(--c-rule);
}

/* ---------- 部品 ---------- */

.tags { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-md); padding: 0; list-style: none; }
.tag {
  display: inline-block;
  font-size: var(--text-xs);
  line-height: 1.6;
  padding: 2px var(--space-sm);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-pill);
  color: var(--c-text-dim);
  background: var(--c-surface);
  text-decoration: none;
}
a.tag:hover { border-color: var(--c-accent); color: var(--c-accent); }
.tag--season { color: var(--c-season); border-color: var(--c-season); background: var(--c-season-bg); }
.tag--danger { color: var(--c-danger); border-color: var(--c-danger); background: var(--c-danger-bg); font-weight: 700; }

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  gap: var(--space-md);
  list-style: none; margin: 0; padding: 0;
}
.grid--wide { grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr)); }

.card {
  display: block;
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  text-decoration: none;
  color: inherit;
  height: 100%;
  transition: border-color var(--dur, 180ms) ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.card:hover { border-color: var(--c-accent); transform: translateY(-2px); }
.card__img { aspect-ratio: 4 / 3; object-fit: cover; width: 100%; background: var(--c-surface-2); }
.card__body { padding: var(--space-sm) var(--space-md) var(--space-md); }
.card__title { font-family: var(--font-display); font-size: var(--text-md); margin: 0 0 var(--space-2xs); }
.card__sub { font-size: var(--text-xs); color: var(--c-text-dim); margin: 0; line-height: 1.6; }
.card__note { font-size: var(--text-sm); color: var(--c-text-dim); margin: var(--space-xs) 0 0; }

/* --- hero --- */
.hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-items: center;
  margin-block: var(--space-lg) var(--space-xl);
}
@media (min-width: 48rem) {
  .hero { grid-template-columns: 1.1fr 1fr; }
}
.hero__img {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.hero h1 { font-size: var(--text-3xl); }
.hero__sub { color: var(--c-text-dim); font-size: var(--text-md); }
.hero__img--tall { max-width: 22rem; aspect-ratio: 9 / 16; }

/* 和名の隣に置く英名(逆も同じ) */
.alt-name {
  font-family: var(--font-body);
  font-size: var(--text-md);
  font-weight: 400;
  color: var(--c-text-dim);
}
h2 .alt-name { font-size: var(--text-sm); }
.thumb-sm {
  max-width: 16rem;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

/* --- 12ヶ月カレンダー --- */
.cal { display: flex; flex-wrap: wrap; gap: var(--space-2xs); margin: 0 0 var(--space-sm); padding: 0; list-style: none; }
.cal li {
  flex: 1 0 2.2rem;
  text-align: center;
  font-size: var(--text-xs);
  font-variant-numeric: tabular-nums;
  padding: var(--space-2xs) 0;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-text-dim);
  background: var(--c-surface);
  margin: 0;
}
.cal li a { color: inherit; text-decoration: none; display: block; }
.cal .is-catch { background: var(--c-accent-weak); color: var(--c-accent); border-color: var(--c-accent); }
.cal .is-best  { background: var(--c-season); color: var(--c-season-ink); border-color: var(--c-season); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: var(--space-md); font-size: var(--text-xs); color: var(--c-text-dim); list-style: none; padding: 0; margin: 0 0 var(--space-md); }
.legend i { display: inline-block; width: 0.8em; height: 0.8em; border-radius: 2px; margin-right: 0.35em; vertical-align: -1px; }
.legend .k-catch { background: var(--c-accent-weak); border: 1px solid var(--c-accent); }
.legend .k-best  { background: var(--c-season); }

/* --- 注意・危険 --- */
.callout {
  border-left: 3px solid var(--c-accent);
  background: var(--c-accent-weak);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin: 0 0 var(--space-md);
  font-size: var(--text-sm);
}
.callout p:last-child { margin-bottom: 0; }
.callout--danger { border-left-color: var(--c-danger); background: var(--c-danger-bg); }
.callout--danger strong { color: var(--c-danger); }

.hazard {
  border: 1px solid var(--c-danger);
  border-left-width: 4px;
  background: var(--c-danger-bg);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin: 0 0 var(--space-sm);
}
.hazard__head { display: flex; flex-wrap: wrap; gap: var(--space-xs); align-items: baseline; margin-bottom: var(--space-2xs); }
.hazard__type { font-weight: 700; color: var(--c-danger); font-family: var(--font-display); }
.hazard__meta { font-size: var(--text-xs); color: var(--c-text-dim); }
.hazard p { margin: 0; font-size: var(--text-sm); }

/* --- 定義リスト(基本情報) --- */
.kv { margin: 0 0 var(--space-md); }
.kv > div { display: grid; grid-template-columns: 7rem 1fr; gap: var(--space-sm); padding: var(--space-xs) 0; border-bottom: 1px dotted var(--c-border); }
.kv dt { color: var(--c-text-dim); font-size: var(--text-sm); margin: 0; }
.kv dd { margin: 0; font-size: var(--text-sm); }

/* --- 写真 --- */
figure { margin: 0 0 var(--space-md); }
.photo {
  width: 100%;
  border: 1px solid var(--c-border);
  border-radius: var(--radius-md);
  background: var(--c-surface-2);
}
figcaption { font-size: var(--text-xs); color: var(--c-text-dim); margin-top: var(--space-xs); line-height: 1.6; }

/* --- 装備セット --- */
.kit { list-style: none; margin: 0 0 var(--space-sm); padding: 0; }
.kit li {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px dotted var(--c-border);
  align-items: baseline;
}
.kit__name { font-size: var(--text-sm); }
.kit__role { display: block; color: var(--c-text-dim); font-size: var(--text-xs); line-height: 1.6; }
.kit__price { font-size: var(--text-xs); color: var(--c-text-dim); font-variant-numeric: tabular-nums; white-space: nowrap; }
.disclosure {
  font-size: var(--text-xs);
  color: var(--c-text-dim);
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-sm);
  padding: var(--space-xs) var(--space-sm);
  margin: 0 0 var(--space-md);
}

/* --- アプリDL導線 --- */
.appcta {
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  background: var(--c-surface);
  padding: var(--space-lg);
  margin-block: var(--space-xl);
  display: grid;
  gap: var(--space-md);
  align-items: center;
}
@media (min-width: 44rem) { .appcta { grid-template-columns: 1fr auto; } }
.appcta h2 { margin: 0 0 var(--space-2xs); border: 0; padding: 0; }
.appcta p { margin: 0; color: var(--c-text-dim); font-size: var(--text-sm); }
.badges { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin: 0; padding: 0; list-style: none; }
.badges--own { margin-top: var(--space-lg); }
.badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min); min-width: 10rem;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--c-accent); color: var(--c-accent-ink);
  text-decoration: none; font-size: var(--text-sm); font-weight: 600;
}
.badge:hover { filter: brightness(1.1); }
.badge--wait {
  background: transparent; color: var(--c-text-dim);
  border: 1px dashed var(--c-border); font-weight: 400;
}

/* --- ボタン風リンク --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--tap-min);
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-pill);
  border: 1px solid var(--c-accent);
  color: var(--c-accent);
  background: transparent;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: 600;
}
.btn:hover { background: var(--c-accent-weak); }
.btn--solid { background: var(--c-accent); color: var(--c-accent-ink); }
.btn--solid:hover { background: var(--c-accent); filter: brightness(1.1); }

/* --- 五十音索引 --- */
.jumps { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin: 0 0 var(--space-lg); padding: 0; list-style: none; }
.jumps a {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.4rem; min-height: 2.2rem;
  border: 1px solid var(--c-border); border-radius: var(--radius-sm);
  background: var(--c-surface); text-decoration: none; color: var(--c-text);
  font-size: var(--text-sm);
}
.jumps a:hover { border-color: var(--c-accent); color: var(--c-accent); }
.namelist { columns: 14rem auto; column-gap: var(--space-lg); list-style: none; margin: 0 0 var(--space-lg); padding: 0; }
.namelist li { break-inside: avoid; font-size: var(--text-sm); padding: 2px 0; border-bottom: 1px dotted var(--c-border); }
.namelist .en { color: var(--c-text-dim); font-size: var(--text-xs); }
.namelist .plain { color: var(--c-text-dim); }

/* --- コラム本文 --- */
.body { max-width: var(--measure); font-size: var(--text-md); }
.body h2 { font-size: var(--text-lg); border-bottom: 1px solid var(--c-rule); padding-bottom: var(--space-2xs); }
.body .note {
  border-left: 3px solid var(--c-season);
  background: var(--c-season-bg);
  padding: var(--space-sm) var(--space-md);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: var(--text-sm);
  margin: 0 0 var(--space-md);
}
.body .note p { margin: 0; }
.sources { font-size: var(--text-sm); color: var(--c-text-dim); }

/* --- 関連リンク --- */
.related { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.related a { font-size: var(--text-sm); }

/* --- footer --- */
.colophon {
  border-top: 2px solid var(--c-text);
  background: var(--c-surface);
  padding-block: var(--space-lg) var(--space-xl);
  font-size: var(--text-sm);
  color: var(--c-text-dim);
  margin-top: var(--space-2xl);
}
.colophon__grid { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); }
.colophon h2 { font-size: var(--text-sm); margin: 0 0 var(--space-xs); color: var(--c-text); border: 0; padding: 0; }
.colophon ul { list-style: none; margin: 0; padding: 0; }
.colophon li { margin-bottom: var(--space-2xs); }
.colophon a { color: var(--c-text-dim); }
.colophon a:hover { color: var(--c-accent); }
.colophon__legal {
  margin-top: var(--space-lg); padding-top: var(--space-md);
  border-top: 1px solid var(--c-border);
  font-size: var(--text-xs); line-height: 1.8;
}

/* --- 広告枠(AdSense はアカウント審査後にコードを入れる) --- */
.adslot {
  min-height: 90px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--c-border);
  border-radius: var(--radius-sm);
  color: var(--c-rule);
  font-size: var(--text-xs);
  margin-block: var(--space-lg);
}

/* --- 表の横スクロール(本文は絶対に横スクロールさせない) --- */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: var(--space-md); }

/* ---------- 登場ステージング(CSSのみ) ---------- */
@media (prefers-reduced-motion: no-preference) {
  :where(main) > :where(*) {
    animation: rise 460ms cubic-bezier(0.16, 1, 0.3, 1) backwards;
  }
  :where(main) > :where(*:nth-child(1)) { animation-delay: 20ms; }
  :where(main) > :where(*:nth-child(2)) { animation-delay: 70ms; }
  :where(main) > :where(*:nth-child(3)) { animation-delay: 120ms; }
  :where(main) > :where(*:nth-child(4)) { animation-delay: 170ms; }
  :where(main) > :where(*:nth-child(n+5)) { animation-delay: 210ms; }

  /* Hero だけは常時わずかに動かす(主役)。脇役は動かさない。 */
  .hero__img { animation: rise 460ms cubic-bezier(0.16, 1, 0.3, 1) backwards, float 9s ease-in-out 1s infinite; }
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ---------- 印刷 ---------- */
@media print {
  .masthead, .colophon, .appcta, .adslot, .crumbs { display: none; }
  body { background: #fff; color: #000; }
}