/* Akadem Drive AD-1 の製品ページだけが読む層。
 *
 * 骨 (_base.css) と皮 (_skin.css) の**上**に載る3枚目。ここに書いてあるのは
 * 「文書」ではなく「計器」の見た目で、他のページには一切効かない。
 *
 * 【なぜ3枚目を足したか】
 *   骨は3サイト共有で、皮はホスト共有。製品ページのためだけの 700 行を
 *   そのどちらかに入れると、マニュアルもサポートもこの重さを引くことになる。
 *   ページ1枚のものはページの隣に置く。
 *
 * 【色の出どころ】
 *   面・木口・琥珀・メーターの紙は皮の変数 (`--panel-*` / `--amber*`)。
 *   ここで直に書いているのは **rgba の白と黒だけ** — ハイライトと影は
 *   「色」ではなく素材の陰影で、下地の色が変わっても同じように効く。
 *
 * 【JS が無いときに何が見えるか】
 *   `html.anim` は `_boot.js` が最初の描画より前に付ける。付いていなければ
 *   `.rise` は隠されず、`.anim-only` (計器) は出ず、`.fallback` (表) が出る。
 *   **JS を実行しなくても、この製品の説明が全部読める状態を保つこと。**
 *   Rosso で日本語版が検索から消えたのは、JS 前提のページを作ったからだった
 *   (site/README.md「ブラウザ言語で日本語ページを書き換えないこと」)。
 */

/* ============================================================ 出現 */
/* CSS トランジションで行う。**anime.js に依存させない** —
   裏タブで rAF が止まっていても、最終状態には必ず到達させる */
html.anim .rise {
  opacity: 0;
  transform: translateY(15px);
  transition: opacity .75s cubic-bezier(.22,.61,.36,1), transform .75s cubic-bezier(.22,.61,.36,1);
}
html.anim .rise.in { opacity: 1; transform: none; }

.anim-only { display: none; }
html.anim .anim-only { display: block; }
html.anim .fallback { display: none; }

/* 動きを控える設定なら、出現も計器の動きも全部止めて静止画にする */
@media (prefers-reduced-motion: reduce) {
  html.anim .rise { opacity: 1; transform: none; transition: none; }
  .sheen { display: none; }
}

/* ============================================================ 器 */
/* **body に overflow-x: hidden を置かないこと。** 置くと body が
   スクロールコンテナになり、`position: sticky` の台 (.sticky) が
   viewport ではなくそちらに貼り付いて、**スクロールしても何も出なくなる**。
   横に溢れるものは、溢れる要素の側で受ける (.stage の overflow-x)。 */

.band { padding: 76px 0; position: relative; }
.band.alt {
  background: var(--bg-sunk);
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
}
.band.close { padding-bottom: 40px; }
/* 骨の .wrap は下に 96px 空ける。帯の中では帯の padding が受け持つ */
.band .wrap { padding-bottom: 0; }
.wrap.wide { max-width: 1180px; }

.band h2 { margin-top: 0; }
.lede { font-size: 17px; color: var(--ink); }
.small { font-size: 13.5px; color: var(--ink-dim); }
.mono { font-family: var(--mono); }
/* 長いパスやファイル名を本文に入れているので、狭い画面では折らせる。
   **折らないと1語がページの幅を決めてしまい、右端が切れる** */
code { overflow-wrap: anywhere; }
.dim { color: var(--ink-dim); }
.figcap { font-size: 11.5px; letter-spacing: .1em; color: var(--ink-faint); margin: 14px 0 0; }
.figcap code { font-size: .95em; background: none; padding: 0; color: var(--ink-faint); }
/* 台の下の出どころ書き。計器の一部ではないので、字送りは詰めて小さく置く */
.rig-main .figcap { margin: 2px 0 0; letter-spacing: .04em; font-size: 11px; }

/* スクロール進捗。**位置を知らせるためだけ** の 2px */
.scrollbar {
  position: fixed; top: 0; left: 0; height: 2px; width: 0; z-index: 50;
  background: linear-gradient(90deg, var(--panel-wood), var(--amber));
  box-shadow: 0 0 10px var(--amber-glow);
}

/* ============================================================ 見出し */
header.masthead.hero {
  margin-bottom: 0;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(232, 151, 58, .10), transparent 62%),
    linear-gradient(180deg, var(--bg-raise), var(--bg));
  overflow: hidden;
}
header.masthead.hero .wrap { padding-top: 40px; padding-bottom: 26px; }
.hero h1 { font-size: clamp(30px, 5.2vw, 52px); letter-spacing: .015em; }
.hero .tagline { font-size: 16px; }

/* 見出しの下の一行。**ここで «サンプル単位で解く» を普通の言葉に開く** —
   上の tagline は製品の署名として置いてあるが、初めて来た人はそれだけでは
   何をする道具なのか分からない */
.hero-lede {
  max-width: 44em; margin: 18px 0 0; font-size: 15.5px; line-height: 1.8;
  color: var(--ink);
}
.cta { margin: 26px 0 10px; display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-block; padding: 11px 22px; border-radius: 3px;
  border: 1px solid var(--rule); color: var(--ink);
  font-size: 14px; letter-spacing: .04em; text-decoration: none;
  transition: transform .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-1px); border-color: var(--accent-soft); color: var(--accent-hot); }
.btn.go {
  background: linear-gradient(180deg, var(--amber-hot), var(--amber));
  border-color: transparent; color: #241a0d; font-weight: 600;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06) inset;
}
.btn.go:hover { color: #241a0d; box-shadow: 0 8px 24px rgba(0, 0, 0, .5), 0 0 22px var(--amber-glow); }
.btn.big { padding: 14px 30px; font-size: 15px; }
.cta-note { font-size: 12.5px; color: var(--ink-dim); margin: 0; }
.stage-note { font-size: 12.5px; color: var(--ink-faint); padding-top: 14px; padding-bottom: 0; }

/* ============================================================ パネル */
/* SVG なので拡大縮小は viewBox に任せる (JS も transform も要らない)。
   **狭い画面では縮めずに横へ流す** — 375px 幅に 1748px を収めると
   刻印が 2px になって、何が描いてあるか分からない絵になる */
.stage {
  max-width: 1300px; margin: 22px auto 0; padding: 0 24px 26px;
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.panel {
  display: block; width: 100%; min-width: 760px; height: auto;
  border-radius: 3px;
  filter: drop-shadow(0 24px 44px rgba(0, 0, 0, .55));
}
.panel text { font-family: var(--cond); }
.panel .p-cap {
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  fill: #b7a68b; text-anchor: middle; text-transform: uppercase;
}
.panel .p-read, .panel .p-serial, .panel .p-legend {
  font-family: var(--mono); font-size: 10px; fill: #8a7a63; text-anchor: middle;
}
.panel .p-legend { font-size: 10.5px; }
.panel .p-serial { text-anchor: start; }
.panel #right .p-serial { text-anchor: middle; }
/* BYPASS つまみの右に並べる行。中央揃えのままだと つまみに重なる。
   **#right の指定より詳しく書くこと** — id を含む上の行に負ける */
.panel #right .p-serial.l { text-anchor: start; }
.panel .p-ear { font-size: 9px; fill: var(--ink-faint); text-anchor: middle; letter-spacing: 0; }
.panel .p-word { font-family: var(--didone); font-size: 32px; fill: #e6dcc9; }
.panel .p-word-sub { font-size: 11px; letter-spacing: .9em; fill: #9a8a72; }
.panel .p-model { font-size: 20px; font-weight: 700; letter-spacing: .09em; fill: #d8cdb8; }
.panel .p-model-sub { font-size: 11px; letter-spacing: .18em; fill: var(--ink-dim); }
.panel .p-lamp { font-size: 12px; letter-spacing: .1em; fill: #7b6d5a; }
.panel .lamp.on .p-lamp { fill: #ecdcbe; font-weight: 600; }
.panel .divider rect { fill: #000; opacity: .55; }
.panel .ticks line { stroke: rgba(226, 206, 178, .5); stroke-width: 1.6; }
.panel .pointer { fill: url(#g-point); }
.panel .chicken { fill: #e6d5b4; }
.panel .lamp .bulb { fill: #3a2f24; }
.panel .lamp .halo { fill: transparent; }
.panel .lamp.on .bulb { fill: url(#g-lamp); }
.panel .lamp.on .halo { fill: var(--amber); opacity: .5; filter: url(#f-glow-s); }
.panel .p-win { fill: #0d0a08; stroke: rgba(255, 255, 255, .07); }
.panel .p-btn { fill: #201a15; stroke: rgba(255, 255, 255, .06); }
.panel .p-btn-t { font-size: 17px; fill: #8a7a63; text-anchor: middle; }
.panel .p-win-t { font-size: 15px; letter-spacing: .22em; fill: var(--amber-hot); text-anchor: middle; }
.panel .p-win-n { font-family: var(--mono); font-size: 12px; fill: var(--ink-faint); }
.panel .chip { fill: #1c1713; stroke: rgba(255, 255, 255, .06); }
.panel .chip.on { fill: var(--panel-wood); stroke: var(--amber); }
.panel .p-chip { font-size: 12px; fill: #b7a68b; text-anchor: middle; }
.panel .led { fill: #2a231c; }
.panel .led.lit.lock { fill: var(--led-green); }
.panel .led.lit.over { fill: var(--led-red); }
.panel .bypass { fill: #1a1512; stroke: rgba(255, 255, 255, .08); }
.panel .bypass-in { fill: #2f2721; }
.panel .bypass-in.on { fill: var(--amber); }
.panel .vu-n { font-size: 10px; font-weight: 600; fill: #33260f; text-anchor: middle; }
.panel .vu-n.vu-r { fill: #992019; }
.panel .vu-vu { font-size: 15px; font-weight: 700; letter-spacing: 3px; fill: #3a2b18; text-anchor: middle; opacity: .62; }
.panel .vu-sub { font-family: var(--mono); font-size: 6.5px; letter-spacing: 1px; fill: #5c4726; text-anchor: middle; opacity: .7; }
.panel .p-win-r { font-size: 9px; letter-spacing: .16em; fill: var(--ink-faint); text-anchor: end; }
.panel .pilot-halo { opacity: .55; }

/* 回るもの (つまみの指針・セレクタ・メーターの針) の角度は、
 * **CSS ではなく SVG の `transform` 属性**に書いてある (index.html)。
 *
 * 【ここで CSS transform を使わない理由】
 *   SVG に CSS の transform を掛けると、回転の中心が `transform-box` /
 *   `transform-origin` の解釈に左右される。属性の `rotate()` は
 *   「その要素の原点まわり」と決まっていて、エンジンによる違いが無い。
 *   親の <g> が translate を持ち、回すのはその子なので、原点＝つまみの中心。
 *
 *   JS 側も同じ理由で `getComputedStyle().transform` を読まない
 *   (Safari は SVG の計算値を行列で返さないことがあり、角度が 0 に化ける)。
 *   `_ad1.js` は属性の文字列をそのまま読み、アニメも属性へ書き戻す。
 *
 * 角度は工場出荷プリセット 01 CONSOLE WARM の位置。つまみ位置 t に対して
 * t×300−150 [deg]。刻んである読み値は `--example panel_values` と同じ計算。 */

/* ============================================================ 台 (スクロールで DRIVE) */
.scrub { height: 320vh; }
.sticky {
  position: sticky; top: 0; height: 100vh; min-height: 560px;
  display: flex; align-items: center;
}
.rig {
  width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px;
  display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 26px; align-items: center;
}
.picker { list-style: none; margin: 0; padding: 0; }
.picker li { margin: 0 0 6px; }
.picker button {
  display: block; width: 100%; text-align: left; cursor: pointer;
  background: none; border: 1px solid transparent; border-left: 2px solid var(--rule);
  padding: 8px 12px; color: var(--ink-dim); font: inherit; font-size: 13px;
  transition: border-color .2s, background .2s, color .2s;
}
.picker button b {
  display: block; font-size: 13px; letter-spacing: .12em; color: var(--ink-dim);
  font-weight: 600; transition: color .2s;
}
.picker button span { display: none; font-size: 12px; line-height: 1.55; }
.picker button .dot {
  position: absolute; margin-left: -20px; margin-top: 5px;
  width: 6px; height: 6px; border-radius: 50%; background: #3a2f24;
  transition: background .25s, box-shadow .25s;
}
.picker button:hover { color: var(--ink); background: rgba(255, 255, 255, .022); }
.picker button.on {
  border-left-color: var(--amber); background: rgba(232, 151, 58, .07);
}
.picker button.on b { color: var(--amber-hot); }
.picker button.on span { display: block; color: var(--ink-dim); }
.picker button.on .dot { background: var(--amber); box-shadow: 0 0 9px var(--amber-glow); }
.rig-side .legend {
  margin: 14px 0 0 14px; font-size: 11.5px; color: var(--ink-faint); letter-spacing: .04em;
}

.rig-main { display: grid; gap: 12px; }
.rack {
  background: var(--bg-glass); border: 1px solid var(--rule); border-radius: 5px;
  padding: 10px 12px 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .05), 0 10px 26px rgba(0, 0, 0, .35);
}
.rack-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 8px; font-size: 10.5px;
}
.rack-head .tag { letter-spacing: .22em; color: var(--ink-faint); }
.rack-head .mono { font-size: 10.5px; color: var(--ink-faint); }
.scope { display: block; width: 100%; height: clamp(150px, 26vh, 232px); }
.scope .grid line { stroke: rgba(255, 255, 255, .10); stroke-width: 1; }
.scope .grid line.faint { stroke: rgba(255, 255, 255, .05); }
.scope .w-in { fill: none; stroke: rgba(217, 207, 192, .3); stroke-width: 1.2; }
.scope .w-out {
  fill: none; stroke: var(--amber); stroke-width: 2.2;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 6px var(--amber-glow));
  vector-effect: non-scaling-stroke;
}
/* DRIVE の量。スクロール位置そのものなので、目盛りではなく帯で出す */
.drivebar { height: 3px; margin-top: 8px; background: rgba(255, 255, 255, .06); border-radius: 2px; }
.drivebar i {
  display: block; height: 100%; width: 0; border-radius: 2px;
  background: linear-gradient(90deg, var(--panel-wood), var(--amber));
}

.rig-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr) 170px; gap: 12px; }
.rack.tall { display: flex; flex-direction: column; }
.spec { flex: 1 1 auto; display: flex; align-items: flex-end; gap: 3px; min-height: 96px; }
.spec i {
  flex: 1 1 0; display: block; height: 2%; border-radius: 1px 1px 0 0;
  background: linear-gradient(180deg, var(--amber-hot), var(--panel-wood));
}
.spec i:first-child { background: linear-gradient(180deg, #dccdb4, #6b5b47); }
.spec-ax { display: flex; gap: 3px; margin-top: 5px; }
.spec-ax span {
  flex: 1 1 0; text-align: center; font-family: var(--mono);
  font-size: 8.5px; color: var(--ink-faint);
}
.xy { display: block; width: 100%; height: 100%; min-height: 96px; }
.xy .grid line, .loop .grid line { stroke: rgba(255, 255, 255, .10); stroke-width: .012; }
.xy .grid line.diag, .loop .grid line.diag {
  stroke: rgba(217, 207, 192, .22); stroke-width: .01; stroke-dasharray: .05 .05;
}
.xy .xy-c { fill: none; stroke: var(--amber); stroke-width: .028; stroke-linejoin: round; }

.readouts { display: flex; flex-direction: column; gap: 6px; }
.ro {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  border-bottom: 1px solid var(--rule); padding-bottom: 5px;
}
.ro span { font-size: 10px; letter-spacing: .14em; color: var(--ink-faint); }
.ro b { font-size: 13px; font-weight: 500; color: var(--ink); }
.ro b.hot { color: var(--amber-hot); }

/* ============================================================ BIAS の効き */
.biaschart { margin: 26px 0 22px; }
.bc-head {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 12px;
  font-size: 10px; letter-spacing: .12em; padding-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.bc-head span:nth-child(2) { text-align: center; }
.bc-head span:last-child { text-align: right; }
.bc-row {
  display: grid; grid-template-columns: 110px minmax(0, 1fr) 110px; gap: 12px;
  align-items: center; padding: 9px 0; border-bottom: 1px solid var(--rule);
}
.bc-row .bc-name { font-size: 12px; letter-spacing: .1em; color: var(--ink); }
.bc-row .bc-v { font-family: var(--mono); font-size: 12px; color: var(--ink-dim); }
.bc-row .bc-v.hi { color: var(--amber-hot); }
.bc-row .bc-v.r { text-align: right; }
.bc-track { position: relative; height: 26px; }
.bc-track svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bc-track .bc-line {
  fill: none; stroke: var(--amber); stroke-width: 2;
  filter: drop-shadow(0 0 5px var(--amber-glow));
}
.bc-track .bc-base { stroke: rgba(255, 255, 255, .07); stroke-width: 1; }
.bc-track .bc-pt { fill: var(--amber-hot); }

/* ============================================================ IRON */
.ironstage {
  max-width: 560px; margin: 26px auto 30px; padding: 0 24px;
}
.loop { display: block; width: 100%; height: auto; }
.loop .loop-c {
  fill: none; stroke: var(--amber); stroke-width: .03;
  stroke-linejoin: round; stroke-linecap: round;
  filter: drop-shadow(0 0 8px var(--amber-glow));
}
.loop .loop-dot { fill: var(--amber-hot); }

/* ============================================================ プリセット */
.pgrid {
  list-style: none; margin: 26px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); gap: 10px;
}
.pcard {
  position: relative; padding: 12px 14px 14px;
  background: var(--bg-glass); border: 1px solid var(--rule); border-radius: 4px;
  display: grid; grid-template-columns: 30px minmax(0, 1fr); grid-template-rows: auto auto auto;
  column-gap: 10px; row-gap: 3px;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
.pcard:hover {
  transform: translateY(-2px); border-color: var(--accent-soft);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .4);
}
.pc-no { grid-row: 1 / 3; font-size: 15px; color: var(--ink-faint); padding-top: 1px; }
.pc-name { font-size: 13.5px; letter-spacing: .09em; color: var(--ink-strong); font-weight: 600; }
.pc-c {
  grid-column: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .1em;
  color: var(--amber);
}
.pc-note { grid-column: 2; font-size: 12px; line-height: 1.6; color: var(--ink-dim); margin-top: 4px; }
.pc-bars { grid-column: 2; display: flex; flex-direction: column; gap: 3px; margin-top: 9px; }
.pc-bars i { display: block; height: 2px; width: 0; border-radius: 1px; background: var(--amber); }
.pc-bars i.b-h2 { background: var(--panel-wood); }

/* ============================================================ 細部 */
.cards {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px;
  margin-top: 26px;
}
.card {
  padding: 18px 20px 20px; border: 1px solid var(--rule); border-radius: 4px;
  background: rgba(255, 255, 255, .015);
}
.card h3 { margin-top: 0; letter-spacing: .12em; font-size: 13px; text-transform: uppercase; }
.card p:last-child { margin-bottom: 0; }

.solver { margin: 14px 0 16px; }
.sv-row {
  display: grid; grid-template-columns: 46px minmax(0, 1fr) 74px; gap: 10px;
  align-items: center; padding: 5px 0;
}
.sv-row .sv-l { font-size: 12px; letter-spacing: .1em; color: var(--ink); }
.sv-row .sv-v { font-family: var(--mono); font-size: 11.5px; color: var(--ink-dim); text-align: right; }
.sv-track { height: 4px; background: rgba(255, 255, 255, .06); border-radius: 2px; }
.sv-track i { display: block; height: 100%; width: 0; border-radius: 2px; background: var(--amber); }
.sv-row.on .sv-l { color: var(--amber-hot); }

.lat { margin: 14px 0 4px; position: relative; }
.lat-row { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 8px; align-items: center; margin-bottom: 5px; }
.lat-row span { font-size: 9.5px; letter-spacing: .1em; color: var(--ink-faint); }
.lat-bar { display: block; height: 8px; border-radius: 2px; background: rgba(255, 255, 255, .08); }
.lat-bar.in { background: rgba(217, 207, 192, .28); }
.lat-bar.dry, .lat-bar.wet { background: var(--panel-wood); }
.lat-bar.wet { background: var(--amber); }
.lat-mark { display: flex; align-items: center; gap: 6px; margin-top: 6px; margin-left: 46px; }
.lat-mark i { display: block; width: 0; height: 1px; background: var(--accent-soft); }
.lat-mark span { font-size: 9.5px; color: var(--ink-faint); }

/* ============================================================ 狭い画面 */
@media (max-width: 1000px) {
  .rig { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .rig-side { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 4px; }
  .rig-side .legend { grid-column: 1 / -1; margin: 4px 0 0; }
  .picker { display: contents; }
  .picker li { margin: 0; }
  .picker button { padding: 6px 8px; }
  .picker button span { display: none !important; }
  .picker button .dot { display: none; }
  .rig-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .readouts { grid-column: 1 / -1; flex-direction: row; flex-wrap: wrap; }
  .readouts .ro { flex: 1 1 110px; }
  .sticky { height: auto; min-height: 0; padding: 40px 0; position: static; }
  .scrub { height: auto; }
  .drivebar { display: none; }
}
@media (max-width: 620px) {
  .band { padding: 54px 0; }
  .bc-head, .bc-row { grid-template-columns: 84px minmax(0, 1fr) 84px; gap: 8px; }
  .bc-row .bc-v, .bc-head span { font-size: 10.5px; }
  .rig-grid { grid-template-columns: minmax(0, 1fr); }
  .cta .btn { flex: 1 1 100%; text-align: center; }
}