/* RK-G Media Works — site.css
   参照実装(docs/reference/hero-proto-v2.html, home-end-state.html)の <style> を移したもの。
   - Google Fonts は使わず /assets/fonts/ を自前ホスト(factory-ui/fonts.css と同じファイル)
   - DotGothic16 は使わず、画面内の文字は PixelMplus10
   - トークン名は factory-ui/tokens.css と同じ --f-*。factory-ui にある値はそのまま、サイト固有(紙・墨・液晶)は同じ流儀で足す
   - 終点の幾何は --lcd-w / --lcd-left から全部を導く(home-end-state.html の構造) */

/* ---------- fonts(自前ホスト) ---------- */
@font-face { font-family: 'Share Tech Mono'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/ShareTechMono-Regular.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 500; font-display: swap;
  src: url(/assets/fonts/BarlowSemiCondensed-500.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(/assets/fonts/BarlowSemiCondensed-600.woff2) format('woff2'); }
@font-face { font-family: 'Barlow Semi Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(/assets/fonts/BarlowSemiCondensed-700.woff2) format('woff2'); }
@font-face { font-family: 'PixelMplus10'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(/assets/fonts/PixelMplus10-Regular.ttf) format('truetype'); }
@font-face { font-family: 'Noto Sans JP'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url(/assets/fonts/NotoSansJP-VF.ttf) format('truetype'); }

/* ---------- tokens ---------- */
:root {
  /* factory-ui/tokens.css と同名・同値 */
  --f-font-ui: 'Barlow Semi Condensed', 'Hiragino Sans', 'Noto Sans JP', sans-serif;
  --f-font-mono: 'Share Tech Mono', monospace;
  --f-font-osd: 'PixelMplus10', monospace;
  --f-amber: #ffb04a;
  --f-amber-mid: #c98a3c;
  --f-amber-lo: #9a6a28;
  --f-amber-dk: #8a5f24;
  --f-text-hi: #f4f1ea;
  /* サイト固有(参照実装の値。紙色は指示書 §3.1 の poster / MP4 の合成色 #ECEBE8 に揃える) */
  --f-font-body: 'Noto Sans JP', 'Hiragino Sans', system-ui, sans-serif;
  --f-paper: #ECEBE8;
  --f-paper2: #E3E1DB;
  --f-ink: #191A1C;
  --f-ink2: #3C3D40;
  --f-muted: #6B6A66;
  --f-rule: #C6C4BD;
  --f-lcd: #0B0C0E;
  --f-lcd-text: #DCE3D2;
  --f-lcd-mid: #A9B2A7;
  --f-lcd-dim: #7E877D;
  --gutter: clamp(16px, 5vw, 64px);
  --nav: 56px;
  color-scheme: light;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--f-paper); color: var(--f-ink); font-family: var(--f-font-body); font-size: 15px; line-height: 1.85; -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--f-font-ui); font-weight: 600; line-height: 1.1; margin: 0; letter-spacing: .005em; }
a { color: inherit; }
.eyebrow { font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--f-muted); }

/* ---------- nav ---------- */
.nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; height: var(--nav); display: flex; align-items: center; justify-content: space-between;
  padding-inline: var(--gutter); background: color-mix(in srgb, var(--f-paper) 86%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--f-rule); }
.brand { display: flex; align-items: baseline; gap: 10px; text-decoration: none; color: inherit; }
.brand b { font-family: var(--f-font-ui); font-weight: 700; font-size: 20px; letter-spacing: .06em; }
.brand span { font-family: var(--f-font-mono); font-size: 10px; letter-spacing: .2em; color: var(--f-muted); }
.nav ul { display: flex; gap: 26px; list-style: none; margin: 0; padding: 0; }
.nav ul a { font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .16em; text-decoration: none; color: var(--f-ink2); }
.nav ul a[aria-current="page"] { color: var(--f-ink); border-bottom: 1px solid var(--f-ink); padding-bottom: 2px; }
.lang { font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .12em; color: var(--f-muted); }
.lang b { font-weight: 400; color: var(--f-ink); }
.lang a { color: var(--f-muted); text-decoration: none; }
.lang a:hover { color: var(--f-ink); }
@media (max-width: 760px) { .nav ul { display: none; } }

/* ---------- home: intro / stage(§3.2〜3.3)---------- */
.intro { height: 300vh; position: relative; }
.stage { position: sticky; top: var(--nav); height: calc(100vh - var(--nav)); overflow: hidden; max-width: 1600px; margin: 0 auto;
  container-type: inline-size;
  /* 終点の幾何。液晶(3:2)の幅と左辺だけ決めれば、蓋の右端も説明パネルも全部ここから出る(cqw = ステージ幅基準) */
  --lcd-w: 50cqw;
  --lcd-left: 4cqw;
  --lcd-h: calc(var(--lcd-w) * 2 / 3);
  --lid-right: calc(var(--lcd-left) + var(--lcd-w) * 1.168);
  --panel-left: calc(var(--lid-right) + clamp(28px, 4vw, 72px)); }
/* 連番は縦に収めず、横幅をステージ幅に合わせる(cover)。縦のはみ出しは .stage の overflow で切る */
.scene { position: absolute; left: 0; top: 50%; width: 100%; aspect-ratio: 16 / 10; transform: translateY(-50%); will-change: transform; }
.scene canvas, .scene img.poster, .scene video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.scene img.poster { object-fit: cover; transition: opacity .2s; }
.scene video { object-fit: cover; background: var(--f-paper); }
.scene video[hidden] { display: none; }

/* 画面(240×160 の HTML。matrix3d で液晶に貼る。1 GBA px = 100cqw/240) */
.lcdq { position: absolute; left: 0; top: 0; width: 240px; height: 160px; opacity: 0; transform-origin: 0 0; overflow: hidden; background: var(--f-lcd); container-type: inline-size; }
.glass { position: absolute; left: 0; top: 0; opacity: 0; mix-blend-mode: screen; pointer-events: none; transform-origin: 0 0; }
.lcd { position: absolute; inset: 0; color: var(--f-lcd-text); font-family: var(--f-font-osd); font-size: calc(100cqw / 24); line-height: 1.3; opacity: 0; transition: opacity .25s; }
.lcd.on { opacity: 1; }
.lcd::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0,0,0,.12) 0 1px, transparent 1px 3px); }
.boot { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; opacity: 0; transition: opacity .2s; }
.boot.on { opacity: 1; }
.boot b { font-size: calc(100cqw / 9); letter-spacing: .08em; color: var(--f-amber); font-weight: 400; }
.boot small { display: block; font-size: calc(100cqw / 30); color: var(--f-lcd-dim); letter-spacing: .06em; }
.menu { position: absolute; inset: 0; padding: calc(100cqw / 240 * 14) calc(100cqw / 240 * 18); display: flex; flex-direction: column; gap: calc(100cqw / 240 * 7); opacity: 0; transition: opacity .35s; }
.menu.on { opacity: 1; }
.menu .t { font-size: calc(100cqw / 240 * 8); color: var(--f-lcd-dim); letter-spacing: .12em; margin-bottom: calc(100cqw / 240 * 5); }
.menu button { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: calc(100cqw / 40); font: inherit; font-size: calc(100cqw / 240 * 12); line-height: 1.2; color: var(--f-lcd-mid); }
.menu button::before { content: "▶"; opacity: 0; font-size: .8em; width: 1em; }
.menu button.cur { color: #fff; }
.menu button.cur::before { opacity: 1; color: var(--f-amber); }
.menu button i { font-style: normal; font-size: calc(100cqw / 240 * 7); color: var(--f-lcd-dim); letter-spacing: .1em; }
.menu button[data-soon] i { color: var(--f-amber-lo); }
.menu .hint { margin-top: auto; font-size: calc(100cqw / 240 * 7); letter-spacing: .06em; color: var(--f-lcd-dim); display: flex; gap: calc(100cqw / 240 * 12); }
@media (prefers-reduced-motion: no-preference) { .menu button.cur::before { animation: blink 1.1s steps(1) infinite; } }
@keyframes blink { 50% { opacity: .25; } }

/* ヒーローのコピー(右)。開いた瞬間の一行 .openline は同じ位置・同じ書体系 */
.copy { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min(52%, 640px); transition: opacity .25s; }
.copy h1 { font-size: clamp(24px, 3vw, 44px); }
.copy h1 span { display: block; } /* 行ごとに別ブロック。行の途中で折れるのは可、2 行が繋がるのは不可 */
.copy p { margin: 16px 0 0; color: var(--f-ink2); font-size: 14px; max-width: 36ch; line-height: 1.9; }
/* 幅は「いちばん長い行の幅」で右端(gutter)に寄せる。固定幅だと開いた蓋の右角と重なる(Step 5b)。
   max-content + max-width だと 2 行に折れたとき箱が max-width のまま残り、行の左端が動かない(1440×900 で蓋と 118px 重なった)。
   min-content = 折り返し不能な最長の単位 = いちばん長い <span>(nowrap)の幅、なので箱がその行にぴったり縮む */
.openline { position: absolute; right: var(--gutter); top: 50%; transform: translateY(-50%); width: min-content; max-width: 46%; opacity: 0;
  font-family: var(--f-font-ui); font-weight: 500; font-size: clamp(22px, 2.6vw, 38px); line-height: 1.3; color: var(--f-ink); }
.openline span { display: inline-block; white-space: nowrap; }

/* 右の説明パネル(終点)。頭を液晶の上辺、スペック行を下辺に揃える */
.desc { position: absolute; left: var(--panel-left); right: var(--gutter); top: calc(50% - var(--lcd-h) / 2); bottom: calc(50% - var(--lcd-h) / 2);
  display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity .3s; }
.desc.on { opacity: 1; pointer-events: auto; }
.desc-item { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.desc-item[hidden] { display: none; }
.desc .body { display: flex; flex-direction: column; gap: 14px; max-width: 34ch; }
.desc h2 { font-size: clamp(22px, 2.2vw, 32px); margin-top: 2px; line-height: 1.15; }
.desc h2 span { display: inline-block; white-space: nowrap; }
.desc p { margin: 0; color: var(--f-ink2); font-size: 14px; line-height: 1.95; }
.desc .links { margin-top: 18px; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.desc a { font-family: var(--f-font-mono); font-size: 12px; letter-spacing: .14em; text-decoration: none; color: var(--f-ink); padding-bottom: 3px; border-bottom: 1px solid var(--f-ink); }
.desc a.sub { font-size: 11px; color: var(--f-muted); border-color: var(--f-rule); }
.desc .spec { margin-top: auto; font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--f-muted); display: flex; flex-wrap: wrap; gap: 6px 18px; padding-top: 14px; border-top: 1px solid var(--f-rule); }

.scroll-hint { position: absolute; left: 50%; transform: translateX(-50%); bottom: clamp(16px, 4vh, 40px); font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .18em; color: var(--f-muted); transition: opacity .3s; }
.skip { position: absolute; top: 14px; right: var(--gutter); font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .16em; color: var(--f-muted); background: none; border: 1px solid var(--f-rule); border-radius: 999px; padding: 6px 12px; cursor: pointer; transition: opacity .3s; }
.blackout { position: fixed; inset: 0; background: #000; opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 30; }
.blackout.on { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .desc h2 { font-size: clamp(20px, 2.4vw, 28px); }
}
/* prefers-reduced-motion / --frames 未実行: 連番を読まず静止状態(演出の高さを持たない) */
.rkg-static .intro { height: auto; }
.rkg-static .stage { position: relative; top: 0; }
.rkg-static .scroll-hint, .rkg-static .skip { display: none; }

/* モバイル(幅 < 760): スクロール連動ではなく MP4 を 1 回だけ自動再生(§3.4)。再生後は液晶 80vw 中央 + メニュー、説明パネルは画面の下 */
@media (max-width: 759px) {
  .intro { height: auto; }
  .stage { position: relative; top: 0; height: auto; min-height: 0; overflow: hidden; padding-bottom: 8px;
    --lcd-w: 80vw; --lcd-left: 10vw; }
  .scene { position: relative; top: 0; transform: none; width: 100%; }
  .intro.done .scene { width: calc(var(--lcd-w) / 0.5); left: calc(var(--lcd-left) - var(--lcd-w) / 0.5 * 0.04); }
  .copy, .openline { position: static; transform: none; width: auto; padding: 20px var(--gutter) 0; opacity: 1; transition: none; }
  .openline { display: none; }
  .intro:not(.done) .openline { display: block; position: absolute; left: 0; right: 0; width: auto; top: auto; bottom: 0; padding: 20px var(--gutter); background: var(--f-paper); }
  .intro.done .copy { display: none; }
  .desc { position: static; transform: none; width: auto; padding: 8px var(--gutter) 24px; display: none; }
  .intro.done .desc { display: block; }
  .desc .spec { margin-top: 20px; }
  .scroll-hint, .skip { display: none; }
}
@media (prefers-reduced-motion: reduce) { .copy, .openline, .desc, .lcd, .menu, .boot { transition: none; } }

/* ---------- 製品ページ(Step 3、requirements §2.3 の順)---------- */
.prod { max-width: 1100px; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(48px, 10vh, 120px); }
.prod-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 42%); gap: clamp(24px, 5vw, 72px); align-items: center; padding-bottom: clamp(32px, 6vh, 64px); border-bottom: 1px solid var(--f-rule); }
.prod-hero h1 { font-size: clamp(32px, 4vw, 56px); margin: 8px 0 14px; letter-spacing: .02em; }
.prod-hero .tagline { font-family: var(--f-font-ui); font-weight: 500; font-size: clamp(20px, 2.2vw, 30px); line-height: 1.3; margin: 0 0 18px; }
.lead { font-size: 15px; color: var(--f-ink2); max-width: 40ch; margin: 0; }
/* ヒーロー画像: 開いた SP(assets/gba-sp/product_open_1440.webp、3:2。TAPE / VIDEO / RADIO 共通。装飾なので alt は空) */
.shot { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; max-width: 100%; border-radius: 4px; }
.prod-sec { padding: clamp(28px, 5vh, 48px) 0; border-bottom: 1px solid var(--f-rule); max-width: 72ch; }
.prod-sec h2, .doc-sec h2 { font-size: clamp(20px, 2vw, 26px); margin: 6px 0 12px; }
.prod-sec p, .doc-sec p { margin: 8px 0 0; color: var(--f-ink2); font-size: 14.5px; }
.prod-sec .eyebrow, .doc-sec .eyebrow { margin: 0 0 4px; }
.flow { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 0; align-items: center; font-family: var(--f-font-mono); font-size: 12px; letter-spacing: .12em; }
.flow li { border: 1px solid var(--f-ink2); padding: 10px 16px; border-radius: 2px; color: var(--f-ink); }
.flow li + li::before { content: "→"; display: inline-block; margin: 0 14px; color: var(--f-muted); }
.btns { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: center; margin-top: 14px; }
.btn { display: inline-block; font-family: var(--f-font-mono); font-size: 12px; letter-spacing: .12em; text-decoration: none; color: var(--f-paper); background: var(--f-ink); padding: 12px 20px; border-radius: 2px; }
.btn:hover { background: var(--f-ink2); }
.btn-note { font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .14em; color: var(--f-muted); }
.spec-list { list-style: none; margin: 10px 0 0; padding: 0; font-family: var(--f-font-mono); font-size: 12.5px; letter-spacing: .06em; }
.spec-list li { padding: 9px 0; border-top: 1px solid var(--f-rule); }
.spec-list li:first-child { border-top: 0; }
.kv { border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.kv th { font-family: var(--f-font-mono); font-weight: 400; font-size: 12px; letter-spacing: .12em; text-align: left; padding: 7px 24px 7px 0; color: var(--f-ink); white-space: nowrap; }
.kv td { padding: 7px 0; color: var(--f-ink2); }
.kv tr + tr th, .kv tr + tr td { border-top: 1px solid var(--f-rule); }
.textlink { font-family: var(--f-font-mono); font-size: 12px; letter-spacing: .14em; text-decoration: none; color: var(--f-ink); padding-bottom: 3px; border-bottom: 1px solid var(--f-ink); }
.notice p { font-size: 13px; color: var(--f-muted); }
@media (max-width: 760px) { .prod-hero { grid-template-columns: 1fr; } .prod-hero .shot { order: -1; } }

/* ---------- simple ページ(download / hardware / support / faq / legal)---------- */
.doc { max-width: 72ch; margin: 0 auto; padding: clamp(40px, 8vh, 96px) var(--gutter) clamp(48px, 10vh, 120px); }
.doc h1 { font-size: clamp(28px, 3.2vw, 44px); margin: 6px 0 16px; }
.doc .lead { font-size: 15px; color: var(--f-ink2); max-width: none; }
.doc-sec { padding: clamp(24px, 4vh, 40px) 0; border-bottom: 1px solid var(--f-rule); }
.plain { margin: 10px 0 0; padding-left: 1.2em; color: var(--f-ink2); font-size: 14.5px; }
.plain li { margin: 4px 0; }
.links { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.table-wrap { overflow-x: auto; margin-top: 12px; }
.grid { border-collapse: collapse; width: 100%; font-size: 13.5px; }
.grid th { font-family: var(--f-font-mono); font-weight: 400; font-size: 11px; letter-spacing: .14em; text-align: left; color: var(--f-muted); padding: 6px 14px 6px 0; border-bottom: 1px solid var(--f-ink2); white-space: nowrap; }
.grid td { padding: 8px 14px 8px 0; border-bottom: 1px solid var(--f-rule); color: var(--f-ink2); vertical-align: top; }

/* ---------- footer ---------- */
.foot { padding: 28px var(--gutter); border-top: 1px solid var(--f-rule); font-family: var(--f-font-mono); font-size: 11px; letter-spacing: .08em; color: var(--f-muted); line-height: 1.8; }
.foot p { margin: 0; }
.foot-links { display: flex; gap: 22px; margin-bottom: 10px; }
.foot-links a { text-decoration: none; color: var(--f-ink2); letter-spacing: .16em; }
.foot-copy { margin-top: 6px; }