/* 日本うまいもん番付 — デザインシステム
   ------------------------------------------------------------------
   狙い: 「木版で刷られた番付表」の質感。SaaSテンプレ的な
   角丸カード＋均一グリッド＋fade-up を避け、印刷物の作法に寄せる。

   具体的にやっていること:
     1. 紙の反転  — 墨地(dark)の中に生成り(paper)の面を挟む。
                    1枚のフラットなダークページに見せない。
     2. 紙目       — 全面に微細なノイズを重ねる。フラットさを消す。
     3. 縦組み     — 節の見出しを縦書きにする。横組みだけの画面と差がつく。
     4. 角丸を使わない — 罫は直角・ヘアライン。番付表は角丸ではない。
     5. 墨が滲む動き — fade+translate ではなく mask で「染み込ませる」。
                    サイト本体の「染みていく」演出と同じ言語で統一する。
   ------------------------------------------------------------------ */

:root{
  /* 地色は従来より一段深い墨に落とした。紙面を重ねたときの対比を作るため */
  --bg:#100C09;
  --surface:#1A1512;
  --surface2:#241D18;
  --fg:#F2EBE0;
  --muted:#9A8C7C;

  --paper:#EDE4D3;        /* 生成り — 反転セクションの地 */
  --paper2:#E3D8C2;
  --sumi:#171310;         /* 墨 — 紙面上の文字 */
  --sumi-muted:#6B5F52;

  --accent:#DC4A17;       /* 朱 — CTAと強調のみ。多用しない */
  --gold:#C89A43;         /* 金 — 番付の格付けのみ */
  --line:rgba(242,235,224,.14);
  --line-strong:rgba(242,235,224,.28);

  /* 醤油スケール — 米から漆まで。データ表現の連続配色 */
  --s0:#F7F3EA; --s1:#E8D9B5; --s2:#E0B15C; --s3:#C4703A; --s4:#8C3A2B; --s5:#5A1E18;

  --ease-ink:cubic-bezier(.22,.61,.36,1);
  --maxw:1120px;
}

/* 紙面に反転した領域。子孫のトークンごと入れ替えるので、
   中の罫や muted もいちいち上書きせずに正しい色になる */
.paper-sec{
  --bg:var(--paper); --surface:var(--paper2); --surface2:#D8CBB2;
  --fg:var(--sumi); --muted:var(--sumi-muted);
  --line:rgba(23,19,16,.16); --line-strong:rgba(23,19,16,.34);
  /* 金と朱は紙の上では沈む（実測 gold 2.04 / accent 3.30 でAA未満）。
     色相は保ったまま濃度を上げて 5.9 / 5.2 に乗せる */
  --gold:#7A4A10; --accent:#A33A12;
  background:var(--paper); color:var(--sumi);
}

/* ===== 紙目 =====
   feTurbulence を小さなタイルで作って繰り返す。全面で1枚生成すると重い。
   pointer-events:none で操作は素通しする */
.grain{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  opacity:.045; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ===== 文字 ===== */
.mincho{font-family:"Zen Old Mincho",serif}

/* 縦組みの節見出し。横組みの画面に一本だけ縦の軸が入ると印刷物の顔になる */
.tate{
  writing-mode:vertical-rl; text-orientation:upright;
  font-family:"Zen Old Mincho",serif; font-weight:600;
  letter-spacing:.30em; font-size:.78rem; color:var(--accent);
  line-height:1; white-space:nowrap; user-select:none;
}

/* 大きな数字は等幅ではなく明朝で置く。
   等幅フォントは「開発ツール」の顔になるので、見出し級の数値には使わない */
.figure{
  font-family:"Zen Old Mincho",serif; font-weight:900;
  font-feature-settings:"palt" 0; letter-spacing:-.01em;
  font-variant-numeric:tabular-nums; line-height:1;
}

/* ===== 罫 =====
   番付表の太細二重罫。border 一本より圧倒的に「刷り物」に見える */
.rule2{border-top:2px solid var(--fg); border-bottom:1px solid var(--fg);
  height:4px; opacity:.85}
.rule-soy{height:3px;
  background:linear-gradient(90deg,var(--s0),var(--s1),var(--s2),var(--s3),var(--s4),var(--s5))}

/* ===== 墨が滲む出現 =====
   fade+translate をやめ、mask を横に流して「染み込む」ようにする。
   ぼかした境界を持つマスクを 300% 幅で動かすので、端が硬く出ない。

   .js 配下に限定しているのは、JSが動かない環境で本文が消えないため。
   このサイトのSEOは静的な本文が命なので、隠す責任はJSが取る */
.js .ink{
  -webkit-mask-image:linear-gradient(90deg,#000 0 30%,rgba(0,0,0,.4) 52%,transparent 70%);
          mask-image:linear-gradient(90deg,#000 0 30%,rgba(0,0,0,.4) 52%,transparent 70%);
  -webkit-mask-size:320% 100%; mask-size:320% 100%;
  -webkit-mask-position:100% 0; mask-position:100% 0;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  opacity:.001;
  /* 初期表示で本文が空白に見える時間を短くしたいので尺は詰めめ。
     1.15s だと折り返し上部のKPIや見出しが読めるまで体感で待たされた */
  transition:-webkit-mask-position .85s var(--ease-ink) var(--d,0ms),
             mask-position .85s var(--ease-ink) var(--d,0ms),
             opacity .38s linear var(--d,0ms);
}
.js .ink.in{-webkit-mask-position:0 0; mask-position:0 0; opacity:1}

/* 下から立ち上がる版。見出しの行送りに使う（行ごとに --d をずらす） */
.rise{overflow:hidden; display:block}
.js .rise > *{display:block; transform:translateY(105%);
  transition:transform .82s var(--ease-ink) var(--d,0ms)}
.js .rise.in > *{transform:none}

/* ===== ボタン =====
   角丸なし。枠は1px。ホバーで朱が下から満ちる（塗りが上がる感じ） */
.btn{
  position:relative; display:inline-block; overflow:hidden;
  padding:.85rem 1.7rem; border:1px solid var(--line-strong);
  font-size:.9rem; font-weight:700; letter-spacing:.06em;
  color:var(--fg); background:transparent; cursor:pointer;
  transition:color .34s var(--ease-ink), border-color .34s var(--ease-ink);
}
.btn::before{
  content:""; position:absolute; inset:0; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; z-index:-1;
  transition:transform .38s var(--ease-ink);
}
.btn:hover{color:#100C09; border-color:var(--accent)}
.btn:hover::before{transform:scaleY(1)}
.btn.solid{background:var(--accent); color:#100C09; border-color:var(--accent)}
.btn.solid:hover{filter:brightness(1.1)}

/* ===== 共有バー =====
   自分の地元の結果を貼るだけで自慢になる、という導線の本体。
   X/LINEはURLだけで完結するリンクなのでJS無しでも機能する。
   ネイティブ共有とコピーはJSがないと動作しないボタンなので .js-only で隠しておき、
   motion.js が「動く環境である」と確認できてから hidden を外す */
.share{margin-top:clamp(1.4rem,3vh,2rem)}
.share-label{font-size:.76rem;color:var(--muted);letter-spacing:.06em;margin-bottom:.6rem}
.share-row{display:flex;flex-wrap:wrap;gap:.55rem}
.share-btn{display:inline-flex;align-items:center;gap:.45rem;
  padding:.6rem 1.05rem;border:1px solid var(--line-strong);
  font-size:.82rem;font-weight:700;letter-spacing:.03em;
  color:var(--fg);background:transparent;cursor:pointer;
  transition:border-color .22s var(--ease-ink),background .22s var(--ease-ink)}
.share-btn:hover{border-color:var(--gold);background:var(--surface)}
.share-btn svg{flex:none}
/* [hidden] は本来UAスタイルのdisplay:noneで隠れるが、.share-btnのdisplay:inline-flexが
   author > UA の優先順位で勝ってしまい、JS未実行時にも「共有」「コピー」ボタンが
   押しても反応しない状態で見えてしまっていた。明示的に上書きして隠す */
.share-btn[hidden]{display:none}
.share-x svg{color:var(--fg)}
.share-line svg{color:#06C755}

@media(prefers-reduced-motion:reduce){
  .js .ink{-webkit-mask-image:none; mask-image:none; opacity:1; transition:none}
  .js .rise > *{transform:none; transition:none}
  .btn,.btn::before{transition:none}
  .grain{display:none}
}


/* ===== フッターの回遊ナビ =====
   本文を読み終えた人の行き先が、これまでフッターに1つも無かった。
   全106ページに同じものを置き、どのページからも全47県・主要品目・季節へ
   1クリックで届くようにする。品目ページ50本はここに出すまで
   サイト内のどこからもリンクされていなかった。
   角丸は使わない（番付表の作法）。罫はヘアラインで区切る。 */
.fnav{max-width:var(--maxw);margin:0 auto 1.8rem;padding-bottom:1.6rem;
  border-bottom:1px solid var(--line)}
.fnav-in{display:grid;grid-template-columns:2.3fr 1fr 1fr;
  gap:1.8rem clamp(1.2rem,3vw,2.4rem)}
.fnav h2{font-family:"Zen Old Mincho",serif;font-size:.84rem;font-weight:600;
  letter-spacing:.08em;color:var(--fg);margin:0 0 .75rem;
  padding-bottom:.42rem;border-bottom:1px solid var(--line)}
.fnav .flist + h2{margin-top:1.5rem}
.fregions{display:grid;grid-template-columns:repeat(auto-fill,minmax(138px,1fr));
  gap:1rem 1.1rem}
.freg > b{display:block;font-size:.7rem;font-weight:400;letter-spacing:.06em;
  color:var(--gold);margin-bottom:.42rem}
.fnav ul{list-style:none;margin:0;padding:0}
.fnav li{margin:0 0 .34rem;line-height:1.4}
.fnav a{font-size:.76rem;color:var(--muted);transition:color .15s}
.fnav a:hover{color:var(--fg);text-decoration:underline;text-underline-offset:3px}
.freg a{font-size:.74rem}
.fmore{margin:.75rem 0 0}
.fmore a{font-size:.74rem;color:var(--gold)}
@media(max-width:860px){
  .fnav-in{grid-template-columns:1fr 1fr}
  .fcol-pref{grid-column:1/-1}
}
/* 1列に落とすとスマホでフッターだけで1550pxになり、下端がひたすら長くなる。
   2列を保ったまま詰める（品目名は最長「かつお節・削り節」で約100px、十分収まる） */
@media(max-width:520px){
  .fnav-in{gap:1.3rem .9rem}
  .fregions{grid-template-columns:1fr 1fr;gap:.85rem}
  .fnav li{margin-bottom:.28rem}
}

/* scroll-behavior:smooth はJSが読み込み完了を確認してから付与する（pref.css参照）。
   ここは付与された後の対象を指定するだけ */
html.smooth{scroll-behavior:smooth}