/* =========================================================
   知った気になれるコーヒーノート — 共通スタイル（モック / モバイル優先）
   和文: Zen Kaku Gothic New（角ゴシック・可読性重視） / 欧文・数字: Jost（幾何学サンセリフ）
   ========================================================= */
:root{
  --paper:#d9d4c8;        /* メイン背景：淡いクリーム */
  --paper-2:#efece4;      /* パネル・カード面（明るめ） */
  --paper-3:#cbc5b6;      /* バッジ・トラック等 */
  --ink:#383c3b;          /* 文字（濃いめ＝視認性重視） */
  --ink-soft:#50544e;     /* 補足文字（旧#6f726fは薄すぎた→濃くしてコントラスト確保） */
  --accent:#a6614d;       /* アクセント①テラコッタ */
  --accent-deep:#8a4f3e;
  --teal:#467a82;         /* アクセント②ティール */
  --line:rgba(71,75,75,.16);
  --acid:#c2703a;         /* 酸味 */
  --sweet:#c9a24b;        /* 甘味 */
  --bitter:#4a3b30;       /* 苦味 */
  --murk:#6e6258;         /* 雑味・渋み */
  --shadow:0 18px 44px -22px rgba(71,75,75,.5);
  --shadow-sm:0 10px 26px -18px rgba(71,75,75,.45);
  --radius:20px;
  --maxw:1080px;
  --ease:cubic-bezier(.22,.68,.32,1);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  margin:0;
  font-family:"Jost","Zen Kaku Gothic New", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
  font-weight:500;
  color:var(--ink);
  background:var(--paper);
  background-image:radial-gradient(130% 120% at 100% 0%, #e7e3d9 0%, var(--paper) 52%, #cfc9bc 100%);
  background-attachment:scroll;
  line-height:1.85;
  text-rendering:optimizeLegibility;
}
b, strong{ font-weight:700; }
.display{ font-weight:600; letter-spacing:.012em; }
.en{ font-family:"Jost",sans-serif; }

a{ color:inherit; text-decoration:none; }
img{ max-width:100%; }
.wrap{ width:min(100% - 2rem, var(--maxw)); margin-inline:auto; }

/* ---------- ヘッダー / ナビ ---------- */
.site-head{
  position:sticky; top:0; z-index:50;
  backdrop-filter:saturate(1.15) blur(10px);
  background:rgba(217,212,200,.84);
  border-bottom:1px solid var(--line);
}
.site-head .wrap{ display:flex; align-items:center; gap:.8rem; height:56px; }
.brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; }
.brand .mark{ font-size:1.2rem; }
.brand b{ font-weight:600; font-size:.98rem; letter-spacing:.01em; line-height:1.1; }
.brand small{ display:block; font-family:"Jost",sans-serif; font-weight:500; font-size:.56rem; letter-spacing:.26em; color:var(--accent); }
.nav{ margin-left:auto; display:flex; gap:.2rem; align-items:center; }
.nav a{
  font-size:.84rem; font-weight:500; color:var(--ink-soft);
  padding:.4rem .7rem; border-radius:999px; transition:.25s var(--ease);
}
.nav a:hover{ color:var(--ink); background:rgba(166,97,77,.12); }
.nav a.active{ color:#fff; background:var(--accent); }
.nav-toggle{ display:none; }

/* ---------- ヒーロー ---------- */
.hero{ padding:clamp(2.6rem,11vw,6rem) 0 clamp(2rem,6vw,3.4rem); }
.hero h1{
  font-size:clamp(2.1rem,9.5vw,4.4rem); line-height:1.28; margin:0 0 1.4rem; font-weight:600;
  letter-spacing:.01em;
}
.hero h1 .em{ color:var(--accent); }
.hero .cta{ display:flex; gap:.7rem; flex-wrap:wrap; }
.btn{
  display:inline-flex; align-items:center; gap:.5rem; font-weight:600; font-size:.94rem;
  padding:.85rem 1.4rem; border-radius:999px; transition:.25s var(--ease); cursor:pointer; border:0;
  line-height:1.2;
}
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:var(--accent-deep); transform:translateY(-2px); }
.btn-ghost{ background:transparent; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover{ box-shadow:inset 0 0 0 1.5px var(--accent); color:var(--accent); }

/* ---------- 章インデックス（ホーム） ---------- */
.section-title{ font-size:clamp(1.4rem,5vw,2rem); font-weight:600; margin:0 0 1.4rem; }
.chapters{
  display:grid; gap:.9rem;
  grid-template-columns:repeat(auto-fill, minmax(min(100%,240px),1fr));
  padding-bottom:3.4rem;
}
.ch-card{
  position:relative; display:flex; align-items:center; gap:1rem; background:var(--paper-2);
  border:1px solid var(--line); border-radius:var(--radius); padding:1.15rem 1.2rem;
  box-shadow:var(--shadow-sm); overflow:hidden; transition:.3s var(--ease); min-height:84px;
}
.ch-card::before{
  content:""; position:absolute; inset:0 auto 0 0; width:4px; background:var(--accent);
  transform:scaleY(0); transform-origin:bottom; transition:transform .35s var(--ease);
}
a.ch-card:active{ transform:scale(.99); }
a.ch-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent; }
a.ch-card:hover::before{ transform:scaleY(1); }
.ch-card .num{ font-family:"Jost",sans-serif; font-weight:500; font-size:2.1rem; line-height:1; color:var(--accent); opacity:.85; min-width:1.8em; }
.ch-card h3{ margin:0; font-size:1.12rem; font-weight:600; }
.ch-card .icon{ font-size:1.3rem; margin-left:auto; }
.ch-card .ch-ico{ width:30px; height:30px; margin-left:auto; flex:0 0 auto; color:var(--accent);
  fill:none; stroke:currentColor; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; opacity:.85; }
a.ch-card:hover .ch-ico{ opacity:1; }
.ch-card.soon{ opacity:.62; }
.ch-card.soon .badge{
  margin-left:auto; font-family:"Jost",sans-serif; font-size:.6rem; font-weight:600; letter-spacing:.08em;
  color:var(--ink-soft); background:var(--paper-3); padding:.25rem .55rem; border-radius:999px; white-space:nowrap;
}

/* ---------- 章ページ：本文セクション ---------- */
.chapter-hero{ padding:clamp(2.4rem,9vw,4.6rem) 0 clamp(1.4rem,4vw,2.2rem); }
.chapter-hero .kicker{ font-family:"Jost",sans-serif; font-weight:600; letter-spacing:.24em; font-size:.72rem; color:var(--accent); text-transform:uppercase; }
.chapter-hero h1{ font-size:clamp(1.9rem,7.5vw,3.4rem); margin:.4rem 0 .7rem; font-weight:600; line-height:1.3; }
.chapter-hero .tagline{ font-size:clamp(.98rem,3.6vw,1.18rem); color:var(--ink-soft); max-width:72ch; }

.block{ padding:clamp(2rem,7vw,3.4rem) 0; border-top:1px solid var(--line); }
.block h2{ font-size:clamp(1.3rem,5vw,1.9rem); font-weight:600; margin:0 0 .3rem; line-height:1.35; }
.block h2 .idx{ font-family:"Jost",sans-serif; color:var(--accent); margin-right:.5rem; font-weight:500; }
.block .desc{ color:var(--ink-soft); max-width:78ch; margin:.2rem 0 1.5rem; }
.grid-2{ display:grid; gap:1.4rem; grid-template-columns:1.05fr .95fr; align-items:center; }
.grid-2.fig-lead{ grid-template-columns:.74fr 1.26fr; }  /* 図版を主役に大きく */
@media (max-width:760px){ .grid-2, .grid-2.fig-lead{ grid-template-columns:1fr; } }

/* 章をまたぐ相互参照チップ */
.related{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; margin-top:1.3rem; font-size:.85rem; color:var(--ink-soft); }
.related > span{ font-weight:600; }
.related .rel{ display:inline-flex; align-items:center; gap:.3rem; padding:.42rem .85rem; border-radius:999px;
  background:var(--paper-2); border:1px solid var(--line); color:var(--teal); font-weight:600; transition:.2s var(--ease); }
.related .rel:hover{ border-color:var(--teal); transform:translateY(-2px); }

/* 図版パネル */
.panel{
  background:var(--paper-2); border:1px solid var(--line); border-radius:var(--radius);
  padding:1.4rem; box-shadow:var(--shadow-sm);
}

/* 抽出グラフ */
.curve-fig svg{ width:100%; height:auto; display:block; }
.curve path.curve{ fill:none; stroke-width:3.4; stroke-linecap:round;
  stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1.5s var(--ease); }
.curve .zone{ opacity:0; transition:opacity .8s ease .9s; }
.curve .lbl{ opacity:0; transition:opacity .5s ease 1.1s; }
.is-visible .curve path.curve{ stroke-dashoffset:0; }
.is-visible .curve .zone, .is-visible .curve .lbl{ opacity:1; }
.legend{ display:flex; flex-wrap:wrap; gap:.6rem 1.1rem; margin-top:1rem; }
.legend span{ display:inline-flex; align-items:center; gap:.4rem; font-weight:600; font-size:.9rem; }
.legend i{ width:.8rem; height:.8rem; border-radius:3px; display:inline-block; }

/* スペクトル */
.spectrum .track{
  height:16px; border-radius:999px;
  background:linear-gradient(90deg,var(--acid) 0%,var(--sweet) 42%,var(--bitter) 78%,var(--murk) 100%);
  transform:scaleX(0); transform-origin:left; transition:transform 1.1s var(--ease);
}
.is-visible .spectrum .track{ transform:scaleX(1); }
.spectrum .marks{ display:flex; justify-content:space-between; margin-top:.6rem; font-weight:600; font-size:.92rem; gap:.4rem; }
.spectrum .marks span small{ display:block; font-weight:400; color:var(--ink-soft); font-size:.74rem; }

/* 成分リスト（バー） */
.comp{ display:grid; gap:1.1rem; }
.comp .row .top{ display:grid; grid-template-columns:minmax(8em,15em) 1fr; gap:.15rem 1.4rem; align-items:baseline; }
.comp .row b{ font-size:1rem; }
.comp .row span{ color:var(--ink-soft); font-size:.86rem; }
@media (max-width:560px){ .comp .row .top{ grid-template-columns:1fr; } }
.comp .bar{ height:8px; border-radius:999px; background:var(--paper-3); margin-top:.4rem; overflow:hidden; }
.comp .bar i{ display:block; height:100%; width:0; border-radius:999px; transition:width 1.2s var(--ease); }
.is-visible .comp .bar i{ width:var(--w); }

/* 要素グリッド */
.factors{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr)); }
.factor{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:1rem 1.05rem; box-shadow:var(--shadow-sm); }
.factor .fname{ font-weight:600; font-size:1.02rem; }
.factor .ftxt{ color:var(--ink-soft); font-size:.85rem; margin-top:.3rem; line-height:1.7; }

/* 直し方 2カラム */
.fix{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (max-width:560px){ .fix{ grid-template-columns:1fr; } }
.fix .card{ border-radius:18px; padding:1.2rem; color:#fff; box-shadow:var(--shadow-sm); }
.fix .card.sour{ background:linear-gradient(135deg,var(--acid),#a85a2b); }
.fix .card.bitter{ background:linear-gradient(135deg,#5b4a3c,var(--bitter)); }
.fix .card h4{ margin:0 0 .3rem; font-size:1.12rem; font-weight:600; }
.fix .card p{ margin:0; opacity:.94; font-size:.92rem; }
.callout{ margin-top:1.1rem; background:var(--paper-2); border:1px solid var(--line); border-radius:14px; padding:.85rem 1rem; font-weight:600; color:var(--accent-deep); font-size:.92rem; }

/* ---------- 図解（figure） ---------- */
.fig-head{ display:flex; align-items:flex-start; gap:.6rem; }
.fig-head h2{ margin:0; }
.fig-tag{ flex:0 0 auto; margin-top:.35rem; font-family:"Jost",sans-serif; font-size:.7rem; font-weight:600; letter-spacing:.08em;
  color:#fff; background:var(--teal); padding:.2rem .6rem; border-radius:999px; }
.fig-panel{ padding:1.1rem .9rem; margin-top:1rem; max-width:600px; }
.fig-panel svg{ width:100%; height:auto; display:block; }
.fig-legend{ display:flex; flex-wrap:wrap; gap:.45rem 1.1rem; margin-top:.8rem; }
.fig-legend span{ display:inline-flex; align-items:center; gap:.42rem; font-size:.83rem; font-weight:600; color:var(--ink-soft); }
.fig-legend i{ width:.85rem; height:.85rem; border-radius:4px; flex:0 0 auto; box-shadow:inset 0 0 0 1px rgba(71,75,75,.12); }

/* factor 名の末尾（…）をチップ表示 */
.factor .fname .ftag{ display:inline-block; margin-left:.45rem; font-family:"Jost","Zen Kaku Gothic New",sans-serif; font-size:.72rem; font-weight:600;
  color:var(--teal); background:var(--paper-3); padding:.1rem .55rem; border-radius:999px; vertical-align:middle; white-space:nowrap; }

/* 工程フロー（flow ブロック） */
/* 工程フロー（工程を列で揃える。飛ばす工程＝空セル） */
.flow-grid-wrap{ margin-top:1rem; overflow-x:auto; -webkit-overflow-scrolling:touch; padding-bottom:.35rem; }
.flow-grid{ display:flex; flex-direction:column; gap:.5rem; min-width:560px; }
.fg-row{ display:grid; grid-template-columns:7em repeat(var(--cols,6), minmax(0,1fr)); gap:.4rem; align-items:stretch; border-left:4px solid transparent; padding:.5rem; }
.fg-head{ padding-top:0; padding-bottom:.1rem; }
.fg-head .fg-ph{ font-size:.74rem; font-weight:700; color:var(--ink-soft); text-align:center; }
.fg-row:not(.fg-head){ background:var(--paper-2); border:1px solid var(--line); border-left:4px solid var(--c,var(--accent)); border-radius:12px; box-shadow:var(--shadow-sm); }
.fg-mlabel{ font-weight:700; font-size:.82rem; align-self:center; }
.fg-cell{ font-size:.78rem; line-height:1.35; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:8px; padding:.3rem .25rem; text-align:center; display:flex; align-items:center; justify-content:center; }
.fg-cell.fg-skip{ background:transparent; border:1px dashed var(--line); }

/* components の軸ラベル（バーの意味づけ） */
.comp-axis{ display:flex; justify-content:space-between; font-size:.74rem; font-weight:700; color:var(--ink-soft); margin-bottom:.3rem; }


/* prev/next */
.pager{ display:flex; justify-content:space-between; gap:1rem; padding:2.4rem 0 3.4rem; flex-wrap:wrap; }
.pager a{ font-weight:600; color:var(--ink-soft); transition:.2s var(--ease); font-size:.92rem; }
.pager a:hover{ color:var(--accent); }
.pager .next{ margin-left:auto; text-align:right; }

/* ---------- スクロール出現 ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-visible{ opacity:1; transform:none; }
.reveal[data-delay="1"]{ transition-delay:.07s; }
.reveal[data-delay="2"]{ transition-delay:.14s; }
.reveal[data-delay="3"]{ transition-delay:.21s; }
@media (prefers-reduced-motion:reduce){
  .reveal,.curve path.curve,.spectrum .track,.comp .bar i,.curve .zone,.curve .lbl{ transition:none; opacity:1; transform:none; stroke-dashoffset:0; width:var(--w); }
}

/* ---------- ダウンロードページ ---------- */
.dl-actions{ display:flex; gap:.7rem; flex-wrap:wrap; margin:1.4rem 0 .4rem; }
.dl-group{ padding:1.8rem 0 .4rem; }
.dl-group h2{ font-size:clamp(1.15rem,4.4vw,1.5rem); font-weight:600; margin:0 0 1rem; }
.dl-group h2 .en{ color:var(--accent); margin-right:.5rem; }
.dl-grid{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,150px),1fr)); }
.dl-item{
  display:block; background:var(--paper-2); border:1px solid var(--line); border-radius:14px;
  padding:.55rem; box-shadow:var(--shadow-sm); transition:.25s var(--ease); position:relative;
}
.dl-item:hover{ transform:translateY(-3px); box-shadow:var(--shadow); }
.dl-item img{ width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:8px; display:block; background:var(--paper-3); }
.dl-item .cap{ display:flex; justify-content:space-between; align-items:center; gap:.4rem; margin-top:.5rem; }
.dl-item .cid{ font-family:"Jost",sans-serif; font-weight:600; font-size:.72rem; color:var(--accent); }
.dl-item .cdl{ font-size:.7rem; color:var(--ink-soft); }
.dl-item .ctitle{ font-size:.78rem; color:var(--ink); line-height:1.45; margin-top:.15rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.dl-note{ color:var(--ink-soft); font-size:.84rem; margin:.2rem 0 0; }

/* ---------- 追加ブロック：compare / table / metrics / steps ---------- */
.cmp{ display:grid; gap:1rem; grid-template-columns:1fr 1fr; }
@media (max-width:620px){ .cmp{ grid-template-columns:1fr; } }
.cmp .col{ background:var(--paper-2); border:1px solid var(--line); border-radius:18px; padding:1.2rem; box-shadow:var(--shadow-sm); }
.cmp .col .ch{ display:inline-block; font-weight:600; font-size:.9rem; padding:.3rem .8rem; border-radius:999px; background:var(--ink); color:var(--paper); margin-bottom:.6rem; }
.cmp .col .ch.teal{ background:var(--teal); }
.cmp .col p{ margin:.35rem 0; color:var(--ink-soft); font-size:.92rem; line-height:1.7; }

.tbl{ display:grid; gap:.5rem; }
.tbl .tr{ display:grid; grid-template-columns:8.5em 1fr; gap:.9rem; align-items:baseline;
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px; padding:.7rem 1rem; box-shadow:var(--shadow-sm); }
.tbl .tk{ font-weight:600; }
.tbl .tv{ color:var(--ink-soft); font-size:.92rem; line-height:1.7; }
@media (max-width:480px){ .tbl .tr{ grid-template-columns:1fr; gap:.15rem; } }

.mtr{ display:grid; gap:.8rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,140px),1fr)); }
.mtr .m{ background:var(--paper-2); border:1px solid var(--line); border-radius:16px; padding:1.1rem; text-align:center; box-shadow:var(--shadow-sm); }
.mtr .mv{ font-family:"Jost",sans-serif; font-weight:600; font-size:1.7rem; color:var(--accent); line-height:1.1; }
.mtr .mv small{ font-size:.9rem; margin-left:.1em; }
.mtr .ml{ color:var(--ink-soft); font-size:.82rem; margin-top:.35rem; }

.stp{ display:grid; gap:.85rem; }
.stp .st{ display:flex; gap:.9rem; align-items:flex-start; }
.stp .sn{ flex:0 0 auto; width:1.9rem; height:1.9rem; border-radius:999px; background:var(--accent); color:#fff;
  font-family:"Jost",sans-serif; font-weight:600; display:grid; place-items:center; }
.stp .snote{ color:var(--ink-soft); font-size:.9rem; margin-top:.15rem; line-height:1.7; }

/* ---------- ページ遷移：横スライド（対応ブラウザのみ / View Transitions API）---------- */
@view-transition { navigation: auto; }
@keyframes vt-out { to { opacity:0; transform:translateX(-26px); } }
@keyframes vt-in  { from { opacity:0; transform:translateX(40px); } }
::view-transition-old(root){ animation:.26s var(--ease) both vt-out; }
::view-transition-new(root){ animation:.34s var(--ease) both vt-in; }
@media (prefers-reduced-motion:reduce){
  ::view-transition-old(root), ::view-transition-new(root){ animation:none; }
}

/* ---------- フッター ---------- */
.site-foot{ border-top:1px solid var(--line); padding:1.8rem 0 2.6rem; color:var(--ink-soft); font-size:.82rem; }
.site-foot .wrap{ display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; }

/* ---------- レスポンシブ ナビ（モバイル） ---------- */
@media (max-width:680px){
  .nav{ position:fixed; inset:56px 0 auto 0; flex-direction:column; background:var(--paper-2);
    border-bottom:1px solid var(--line); padding:.5rem 1rem .9rem; gap:.1rem;
    transform:translateY(-130%); transition:transform .3s var(--ease); box-shadow:var(--shadow); }
  .nav.open{ transform:none; }
  .nav a{ width:100%; padding:.8rem .5rem; font-size:.96rem; }
  .nav-toggle{ display:inline-flex; margin-left:auto; background:none; border:0; font-size:1.5rem; cursor:pointer; color:var(--ink); line-height:1; padding:.2rem .3rem; }
}