/* ほどあい(程合い) — style.css (2026-08-03 新規ビルド)
   Signature: 「受信解像度メーター」(.reso-meter) — 親への踏み込みの深さを、モザイクの
   細かさそのものとして可視化する。A(カメラ)は64マスの細かい格子=高解像度、
   D(スマート電球/プラグ)は1マスの粗いブロック=最小解像度。hero(静的4段)・
   診断結果(動的ハイライト)・about/categories(静止再掲)の3箇所以上に展開する。
   躯体は「受信機の筐体」(.receiver-frame) — 四隅にビューファインダーの合焦ブラケット
   (カメラのAF枠のようなL字コーナー)を持つ。分電盤のボルト筐体(site48)とは異なる
   語彙(「受信」「合焦」)を採用する。
   サーフェス: body全面に微粒子ノイズ+段階目盛りの横罫(images/pattern-*.svg)を敷き、
   単色べた塗りセクションを作らない(design-originality.mdサーフェスルール)。 */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { color-scheme: light; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-ink);
  background-color: var(--color-base);
  background-image: url('/images/pattern-light.svg');
  background-repeat: repeat;
  background-size: 240px 160px;
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  transition: background-color var(--dur-slow) var(--ease-out), color var(--dur-slow) var(--ease-out);
  line-break: strict;
}
@media (max-width: 480px) {
  body { line-height: 1.68; }
  :root { --text-base: 0.95rem; --text-lg: 1rem; }
}
@media (prefers-color-scheme: dark) {
  body { background-image: url('/images/pattern-dark.svg'); }
}
/* セクションごとに柄の縮尺を変え、ページ全体が1枚の壁紙に見えないようにする。 */
section:has(#lanes-h), section:has(#anchor-h) {
  background-image: url('/images/pattern-light.svg');
  background-repeat: repeat;
  background-size: 320px 210px;
}
@media (prefers-color-scheme: dark) {
  section:has(#lanes-h), section:has(#anchor-h) {
    background-image: url('/images/pattern-dark.svg');
  }
}
img { max-width: 100%; display: block; }

/* -- 読み物の地(calm-ground scrim) --
   是正(司令官実機検分 2026-08-03): .heroにscrimをinset:0で敷くと、面積の広い
   hero全体が読み物スクリムに覆われ、差別化の核であるスレート地(--color-base)が
   縁取りにしか見えなくなる。heroは全面ではなく本文テキスト側の列(.hero__textcol)
   だけにscrimを confine し、画像側・余白側はスレート地+パターンをそのまま見せる。
   core-message/article-body/about-body/privacy-bodyは元々max-widthで narrow な
   読み物列に限定されているため、scrim自体もその列の範囲に収まっている(is-已confined)。 */
.core-message, .article-body, .about-body, .privacy-body { position: relative; z-index: 0; }
.core-message::before, .article-body::before, .about-body::before, .privacy-body::before {
  content: ''; position: absolute; inset: 0; z-index: -1;
  background: var(--color-scrim);
}
.hero__textcol { position: relative; z-index: 0; }
.hero__textcol::before {
  content: ''; position: absolute; inset: calc(var(--space-5) * -1) calc(var(--space-6) * -1); z-index: -1;
  background: var(--color-scrim); border-radius: var(--radius-md);
}
a { color: var(--color-dust-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.label { font-family: var(--font-label); text-transform: uppercase; letter-spacing: .08em; }
.nowrap-ja { white-space: nowrap; }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-5); }
.wrap-wide { max-width: 1280px; margin: 0 auto; padding: 0 var(--space-5); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--color-panel); color: var(--color-ink-text); padding: var(--space-2) var(--space-4); z-index: 200; }
.skip-link:focus { left: var(--space-3); top: var(--space-3); }

/* -- 受信機の筐体(receiver-frame): 四隅に合焦ブラケット(カメラのAF枠)を持つ -- */
.receiver-frame {
  position: relative;
  background-image:
    linear-gradient(var(--color-dust-deep), var(--color-dust-deep)), linear-gradient(var(--color-dust-deep), var(--color-dust-deep)),
    linear-gradient(var(--color-dust-deep), var(--color-dust-deep)), linear-gradient(var(--color-dust-deep), var(--color-dust-deep)),
    linear-gradient(var(--color-dust-deep), var(--color-dust-deep)), linear-gradient(var(--color-dust-deep), var(--color-dust-deep)),
    linear-gradient(var(--color-dust-deep), var(--color-dust-deep)), linear-gradient(var(--color-dust-deep), var(--color-dust-deep));
  background-repeat: no-repeat;
  background-size: 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px, 14px 2px, 2px 14px;
  background-position:
    10px 10px, 10px 10px,
    calc(100% - 24px) 10px, calc(100% - 12px) 10px,
    10px calc(100% - 12px), 10px calc(100% - 24px),
    calc(100% - 24px) calc(100% - 12px), calc(100% - 12px) calc(100% - 24px);
}
.receiver-frame--dim {
  background-image:
    linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel)), linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel)),
    linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel)), linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel)),
    linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel)), linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel)),
    linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel)), linear-gradient(var(--color-label-on-panel), var(--color-label-on-panel));
}

/* -- PR strip / nav -- */
.pr-strip { background: var(--color-panel); color: var(--color-ink-text); font-size: 0.8rem; text-align: center; padding: var(--space-2) var(--space-4); }
.pr-strip a { color: var(--color-lantern-bright); }
.site-nav { position: sticky; top: 0; z-index: 100; background: var(--color-base); border-bottom: var(--rule-thick) solid var(--color-ink); }
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; padding-top: var(--space-3); padding-bottom: var(--space-3); gap: var(--space-4); }
.brand { text-decoration: none; }
.brand-mark { font-family: var(--font-display); font-weight: 700; font-size: 1.26rem; color: var(--color-ink); letter-spacing: .01em; }
.brand-mark small { display: block; font-family: var(--font-label); font-size: .68rem; letter-spacing: .13em; color: var(--color-dust-deep); font-weight: 700; margin-top: 2px; }
.nav-toggle { display: none; min-height: 44px; background: none; border: var(--rule-hair) solid var(--color-ink); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); cursor: pointer; align-items: center; gap: var(--space-2); }
.nav-toggle__bars span { display: block; width: 18px; height: 2px; background: var(--color-ink); margin: 3px 0; }
.nav-toggle__label { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .1em; }
.nav-links { list-style: none; display: flex; gap: var(--space-5); margin: 0; padding: 0; align-items: center; flex-wrap: wrap; }
.nav-links a { text-decoration: none; color: var(--color-ink-soft); font-size: var(--text-sm); font-weight: 500; }
.nav-links a:hover { color: var(--color-dust-deep); }
.nav-cta { background: var(--color-panel); color: var(--color-ink-text) !important; padding: var(--space-2) var(--space-4); border-radius: var(--radius-sm); font-family: var(--font-label); letter-spacing: .04em; }
.nav-cta:hover { background: var(--color-lantern-deep); }
@media (max-width: 780px) {
  :root { --header-offset: 64px; }
  .site-nav .wrap { padding-top: var(--space-2); padding-bottom: var(--space-2); }
  .brand-mark { font-size: 1.02rem; }
  .brand-mark small { font-size: .6rem; margin-top: 1px; }
  .nav-toggle { display: inline-flex; padding: var(--space-2) var(--space-3); }
  .nav-links { position: absolute; left: 0; right: 0; top: 100%; background: var(--color-base); border-bottom: var(--rule-thick) solid var(--color-ink); flex-direction: column; align-items: stretch; padding: var(--space-4) var(--space-5); gap: var(--space-3); display: none; }
  .nav-links[data-open="true"] { display: flex; }
  .nav-cta { text-align: center; }
}

/* -- breadcrumb -- */
.breadcrumb { padding-top: var(--space-3); font-size: 0.8rem; color: var(--color-ink-faint); }
.breadcrumb ol { list-style: none; display: flex; gap: var(--space-2); margin: 0; padding: 0; flex-wrap: wrap; }
.breadcrumb li + li::before { content: '/'; margin-right: var(--space-2); }
.breadcrumb a { color: var(--color-ink-faint); }

/* -- hero / headings -- */
.hero { position: relative; padding-top: var(--space-8); padding-bottom: var(--space-7); overflow: hidden; }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.9fr); gap: var(--space-7); align-items: center; }
@media (max-width: 880px) { .hero__grid { grid-template-columns: 1fr; } }
.kicker { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .14em; color: var(--color-ink-text); display: inline-block; margin-bottom: var(--space-4); background: var(--color-panel); padding: var(--space-1) var(--space-3); }
h1, h2, h3 { overflow-wrap: anywhere; text-wrap: balance; }
h1 { font-family: var(--font-display); font-weight: 700; font-size: var(--text-display); line-height: 1.34; margin: 0 0 var(--space-5); color: var(--color-ink); letter-spacing: .005em; }
h1 em { font-style: normal; color: var(--color-dust-deep); }
.lede { font-size: var(--text-lg); color: var(--color-ink-soft); max-width: 46ch; }
h2 { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); }
h3 { font-family: var(--font-display); font-weight: 700; color: var(--color-ink); margin-top: 0; }

/* -- 見出しの上に「受信レベル目盛り」帯を置く(site48の計器目盛見出しと同じ役割・
   別語彙: A/B/C/Dの4段表記) -- */
#core-h, #diag-h, #lanes-h, #articles-h, #anchor-h {
  position: relative; padding-top: 16px; margin-top: 0;
}
#core-h::before, #diag-h::before, #lanes-h::before, #articles-h::before, #anchor-h::before {
  content: 'A · B · C · D';
  position: absolute; top: 0; left: 0;
  font-family: var(--font-label); font-size: 10px; letter-spacing: .22em;
  color: var(--color-ink-faint); opacity: .65;
  border-top: 1px solid var(--color-ink-faint);
  padding-top: 6px; width: 100px;
}
#core-h::before { left: 50%; transform: translateX(-50%); text-align: center; }
#diag-h::before { color: var(--color-label-on-panel); border-top-color: var(--color-label-on-panel); }
@media (max-width: 780px) {
  #diag-h { padding-top: 30px; }
  #diag-h::before { top: -6px; }
}

.hero__photo { position: relative; border-radius: var(--radius-sm); overflow: hidden; box-shadow: 0 24px 48px -22px rgba(23,29,38,.4); border: 8px solid var(--color-base-2); }
.hero__photo img { width: 100%; height: auto; display: block; filter: saturate(.94) contrast(1.02); }
.hero__photo::after { content: ''; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(23,29,38,.2); pointer-events: none; }

/* ================================================================
   受信解像度メーター(reso-meter) — サイトの主役UI・診断エンジンの図解そのもの
   A(カメラ)=64マス細密格子 > B(センサー)=16マス > C(家電IoT)=4マス > D(電球/プラグ)=1マス。
   マスが粗くなるほど、受け取れる情報の解像度が下がることを直接図示する。
   hero(静的4段)・診断結果(動的ハイライト)・about/categories(静止再掲)の3箇所以上に展開。
   ================================================================ */
.reso-meter { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
@media (max-width: 620px) { .reso-meter { grid-template-columns: repeat(2, 1fr); } }
.reso-meter__level { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-3); border-radius: var(--radius-sm); transition: opacity var(--dur-base), filter var(--dur-base); }
.reso-meter__pixels { display: grid; gap: 2px; width: 100%; aspect-ratio: 1; }
.reso-meter__pixels[data-grid="8"] { grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.reso-meter__pixels[data-grid="4"] { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr); }
.reso-meter__pixels[data-grid="2"] { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(2, 1fr); }
.reso-meter__pixels[data-grid="1"] { grid-template-columns: 1fr; grid-template-rows: 1fr; }
/* 是正2: セルの地色は「埃紫(dust)」を主色として持たせる。段が深いほど濃い紫、
   浅いほど淡い紫(ほぼ消える)という塗り分けで、格子の粗さだけでなく色そのものにも
   「踏み込みの深さ」を語らせる。ランタン(オクル)は選択中ハイライト/CTA専任に絞る。 */
.reso-meter__cell { border-radius: 1px; }
.reso-meter__pixels[data-grid="8"] .reso-meter__cell { background: var(--color-dust-deep); }
.reso-meter__pixels[data-grid="4"] .reso-meter__cell { background: var(--color-dust); opacity: .92; }
.reso-meter__pixels[data-grid="2"] .reso-meter__cell { background: var(--color-dust-bright); opacity: .82; }
.reso-meter__pixels[data-grid="1"] .reso-meter__cell { background: var(--color-dust-dim); opacity: .7; }
/* 濃色パネル上(hero)では暗い紫が沈んで見えなくなるため、色相を切り替えず
   dust-brightの不透明度だけを段階的に落として「信号が薄れていく」ことを表現する。 */
.reso-meter--on-panel .reso-meter__pixels[data-grid="8"] .reso-meter__cell { background: var(--color-dust-bright); opacity: 1; }
.reso-meter--on-panel .reso-meter__pixels[data-grid="4"] .reso-meter__cell { background: var(--color-dust-bright); opacity: .76; }
.reso-meter--on-panel .reso-meter__pixels[data-grid="2"] .reso-meter__cell { background: var(--color-dust-bright); opacity: .5; }
.reso-meter--on-panel .reso-meter__pixels[data-grid="1"] .reso-meter__cell { background: var(--color-dust-bright); opacity: .3; }
/* ダークモードでは.lane-mosaic/.scale-ladder__block(on-panel指定なし)の背景も
   base-2同様に暗くなり、明るいbg前提のdust-deep/dust-dimの塗り分けが逆転して
   見えてしまう(Aが沈み、Dが浮く)。on-panelと同じ「dust-brightの不透明度フェード」
   に切り替えて、常にAが最も濃く・Dが最も薄いという向きを保つ。 */
@media (prefers-color-scheme: dark) {
  .reso-meter__pixels[data-grid="8"] .reso-meter__cell { background: var(--color-dust-bright); opacity: 1; }
  .reso-meter__pixels[data-grid="4"] .reso-meter__cell { background: var(--color-dust-bright); opacity: .76; }
  .reso-meter__pixels[data-grid="2"] .reso-meter__cell { background: var(--color-dust-bright); opacity: .5; }
  .reso-meter__pixels[data-grid="1"] .reso-meter__cell { background: var(--color-dust-bright); opacity: .3; }
}
.reso-meter__level-label { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .1em; text-align: center; }
.reso-meter__level-name { font-weight: 700; font-size: var(--text-sm); text-align: center; }
.reso-meter__level-device { font-size: var(--text-xs); color: var(--color-ink-faint); text-align: center; }
.reso-meter--on-panel .reso-meter__level-device { color: rgba(238,241,244,.72); }
.reso-meter__level.is-dim { opacity: .32; filter: grayscale(.6); }
.reso-meter__level.is-active { opacity: 1; }
.reso-meter__level.is-active .reso-meter__cell { background: var(--color-lantern-bright); box-shadow: 0 0 6px rgba(227,172,108,.6); }
.reso-meter__level.is-active .reso-meter__level-name { color: var(--color-lantern-deep); }
.reso-meter--on-panel .reso-meter__level.is-active .reso-meter__level-name { color: var(--color-lantern-bright); }
.hero__meter { margin-top: var(--space-6); background: var(--color-panel); border-radius: var(--radius-sm); padding: var(--space-5); color: var(--color-ink-text); }
.reso-meter--on-panel .reso-meter__level-label { color: var(--color-label-on-panel); }
.reso-meter__caption { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .04em; color: rgba(238,241,244,.75); margin-top: var(--space-3); }

/* -- 目盛りの区切り線(scale-divider) — 是正3: ただの破線ではなく、A→Dで箱が
   小さくなっていく「解像度が下がっていく階段」そのものを区切りに置く。
   格子を消す・粗くすることそのものが「踏み込みが浅くなる」を語る、シグネチャの
   もう1つの実描画箇所。 -- */
.scale-divider { min-height: 40px; margin: var(--space-8) 0; position: relative; }
.scale-divider::after { content: ''; position: absolute; left: 0; right: 0; bottom: 2px; height: 1px; border-top: 1px dashed var(--color-dust-deep); opacity: .4; }
.scale-divider--tight { margin: var(--space-6) 0; min-height: 28px; }
.scale-ladder { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: var(--space-4); padding-bottom: 8px; }
.scale-ladder__block.reso-meter__pixels { aspect-ratio: auto; }
.scale-ladder__block[data-grid="8"] { width: 34px; height: 34px; }
.scale-ladder__block[data-grid="4"] { width: 26px; height: 26px; }
.scale-ladder__block[data-grid="2"] { width: 18px; height: 18px; }
.scale-ladder__block[data-grid="1"] { width: 12px; height: 12px; }
.scale-divider--tight .scale-ladder { padding-bottom: 4px; }
.scale-divider--tight .scale-ladder__block[data-grid="8"] { width: 24px; height: 24px; }
.scale-divider--tight .scale-ladder__block[data-grid="4"] { width: 19px; height: 19px; }
.scale-divider--tight .scale-ladder__block[data-grid="2"] { width: 13px; height: 13px; }
.scale-divider--tight .scale-ladder__block[data-grid="1"] { width: 9px; height: 9px; }
@media (max-width: 780px) {
  .hero { padding-top: var(--space-6); padding-bottom: var(--space-5); }
  .scale-divider { margin: var(--space-6) 0; }
}

/* -- core message: 「監視ではなく合意」の誠実フック --
   是正4: この節だけが単色べた塗りの広い空白になっていたため、::beforeのscrimに
   格子由来の目盛りクロスハッチ(dust極薄・56pxピッチ=モザイクの粗い段を思わせる
   間隔)を重ね、面としての質感を持たせる。透過度が低いため本文コントラストは
   ::beforeの下地色(--color-scrim)で確保したまま維持される。 */
.core-message { text-align: center; padding-top: var(--space-7); padding-bottom: var(--space-7); max-width: 62ch; margin: 0 auto; }
.core-message::before {
  background-color: var(--color-scrim);
  background-image:
    repeating-linear-gradient(90deg, rgba(48,40,62,.1) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(0deg, rgba(48,40,62,.1) 0 1px, transparent 1px 56px);
}
.core-message h2 { font-size: var(--text-display-s); line-height: 1.5; }
.core-message p { color: var(--color-ink-soft); font-size: var(--text-lg); }
.honesty-box { text-align: left; background-color: var(--color-base-2); border: 1px solid var(--color-dust-deep); border-radius: var(--radius-sm); padding: var(--space-5); margin: var(--space-5) auto 0; max-width: 56ch; }
.honesty-box p { margin: 0 0 var(--space-3); font-size: var(--text-base); }
.honesty-box p:last-child { margin-bottom: 0; }
.honesty-box__label { display: inline-block; font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .1em; color: var(--color-dust-deep); margin-bottom: var(--space-2); }

/* ================================================================
   受信解像度診断(diagnostic) — 今回はスコープ外。器のみ用意。
   ================================================================ */
.diagnostic { background-color: var(--color-panel); color: var(--color-ink-text); padding: var(--space-7) 0; margin: var(--space-7) 0; position: relative; }
.diagnostic__head { max-width: 60ch; margin: 0 auto var(--space-6); text-align: center; }
.diagnostic__head .kicker { background: var(--color-lantern); color: var(--color-panel-2); }
.diagnostic__head h2 { color: var(--color-ink-text); font-size: var(--text-display-s); margin-bottom: var(--space-3); }
.diagnostic__head p { color: rgba(238,241,244,.85); margin: 0; }
.diagnostic__placeholder { max-width: 640px; margin: 0 auto; text-align: center; border: 1px dashed rgba(238,241,244,.35); border-radius: var(--radius-sm); padding: var(--space-6); color: rgba(238,241,244,.85); font-size: var(--text-sm); }
#diagnostic { scroll-margin-top: var(--header-offset); }
.q-app { max-width: 640px; margin: 0 auto; }
.q-intro { text-align: center; }
.q-intro p { color: rgba(238,241,244,.9); margin: 0 0 var(--space-4); }
.q-start-btn, .q-nav__next { background: var(--color-lantern); color: var(--color-panel-2); border: none; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-6); font-family: var(--font-label); font-weight: 700; letter-spacing: .04em; cursor: pointer; min-height: 44px; }
.q-start-btn:hover, .q-nav__next:hover:not(:disabled) { background: var(--color-lantern-bright); }
.q-nav__next:disabled { opacity: .4; cursor: not-allowed; }
.q-progress { margin-bottom: var(--space-5); }
.q-progress__track { height: 4px; background: rgba(238,241,244,.2); border-radius: 2px; overflow: hidden; }
.q-progress__bar { height: 100%; width: 100%; background: var(--color-lantern); transform-origin: left; transform: scaleX(0); transition: transform var(--dur-base) var(--ease-out); }
.q-progress__text { display: block; margin-top: var(--space-2); font-family: var(--font-label); font-size: var(--text-xs); color: rgba(238,241,244,.75); }
.q-card { outline: none; }
.q-code { font-family: var(--font-label); font-size: var(--text-xs); letter-spacing: .1em; color: var(--color-lantern-bright); }
.q-title { color: var(--color-ink-text); font-size: var(--text-xl); margin: var(--space-2) 0 var(--space-3); }
.q-helper { font-size: var(--text-sm); color: rgba(238,241,244,.75); margin: 0 0 var(--space-4); }
.q-options { display: flex; flex-direction: column; gap: var(--space-3); }
.q-opt { display: flex; align-items: center; text-align: left; gap: var(--space-3); background: var(--color-panel-2); border: 1px solid rgba(238,241,244,.18); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); color: var(--color-ink-text); cursor: pointer; min-height: 44px; transition: border-color var(--dur-base), background var(--dur-base); }
.q-opt:hover { border-color: var(--color-lantern); }
.q-opt.is-selected { border-color: var(--color-lantern-bright); background: rgba(201,138,63,.16); }
.q-opt .opt-label { font-size: var(--text-base); line-height: 1.5; }
.q-nav { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-5); flex-wrap: wrap; }
.q-nav__back, .q-nav__skip { background: none; border: 1px solid rgba(238,241,244,.35); color: rgba(238,241,244,.85); border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-size: var(--text-sm); cursor: pointer; min-height: 44px; }
.q-nav__back:disabled { opacity: .35; cursor: not-allowed; }
.q-result { padding-top: var(--space-4); }
.q-result__meter { margin-bottom: var(--space-4); }
.q-result__title { color: var(--color-ink-text); font-size: var(--text-2xl); margin: var(--space-3) 0; }
.q-result__body { color: rgba(238,241,244,.9); font-size: var(--text-base); }
.q-result__switch { background: rgba(201,138,63,.16); border: 1px solid var(--color-lantern); border-radius: var(--radius-sm); padding: var(--space-3) var(--space-4); font-size: var(--text-sm); color: var(--color-lantern-dim); }
.q-result__note, .q-result__caveat { font-size: var(--text-sm); color: rgba(238,241,244,.8); }
.q-result__actions { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-top: var(--space-5); }
.cta { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); text-decoration: none; border-radius: var(--radius-sm); padding: var(--space-2) var(--space-4); font-family: var(--font-label); font-size: var(--text-sm); font-weight: 700; letter-spacing: .03em; min-height: 44px; }
.cta-amazon { background: var(--color-lantern); color: var(--color-panel-2); margin-top: var(--space-3); }
.cta-amazon:hover { background: var(--color-lantern-bright); }
.cta-secondary { background: none; border: 1px solid var(--color-dust-deep); color: var(--color-ink-soft); }
.diagnostic .cta-secondary, .q-result .cta-secondary { border-color: rgba(238,241,244,.5); color: var(--color-ink-text); }

/* -- 商品カード追加要素(capabilities/flags/price) -- */
.tag__caps { font-family: var(--font-label); font-size: var(--text-xs); color: var(--color-label-on-panel); margin: 0 0 var(--space-2); }
.tag__flags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: var(--space-2); }
.tag__flag { font-size: var(--text-xs); font-family: var(--font-label); padding: 2px 6px; border-radius: 2px; background: rgba(238,241,244,.14); color: rgba(238,241,244,.9); }
.tag__flag--warn { background: rgba(201,138,63,.24); color: var(--color-lantern-dim); }
.tag__price { font-family: var(--font-label); font-size: var(--text-sm); color: var(--color-lantern-bright); margin: var(--space-2) 0 0; }
.tag__price-note { display: block; font-family: var(--font-body); font-size: var(--text-xs); color: rgba(238,241,244,.6); font-weight: 400; margin-top: 2px; }

/* -- lane rail(hub navigation) -- */
.lane-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-5); margin-top: var(--space-5); }
.lane-card { display: block; text-decoration: none; color: inherit; background-color: var(--color-base-2); border: 1px solid var(--color-base-deepest); border-radius: var(--radius-md); padding: var(--space-5); position: relative; transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base), box-shadow var(--dur-base); }
.lane-card:hover { transform: translateY(-4px); border-color: var(--color-lantern); box-shadow: 0 18px 30px -20px rgba(23,29,38,.3); }
/* 是正3: 各カードにそのレベルの受信解像度モザイクを実描画する(文字ラベルLV.Aだけに
   留めない)。.lane-mosaicは.reso-meter__pixelsを流用し、grid値に応じた既存の
   セル色分けルールをそのまま受け継ぐ。 */
.lane-mosaic-badge { position: absolute; top: var(--space-4); right: var(--space-5); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.lane-mosaic.reso-meter__pixels { width: 34px; height: 34px; aspect-ratio: auto; }
.lane-no { position: static; font-family: var(--font-label); color: var(--color-dust-deep); font-size: var(--text-xs); letter-spacing: .06em; }
.lane-card h3 { font-size: var(--text-lg); margin: var(--space-3) 0 var(--space-2); padding-right: var(--space-7); }
.lane-card p { font-size: var(--text-sm); color: var(--color-ink-soft); margin: 0; }
.lane-card__meter { margin-top: var(--space-3); }

/* -- 商品カード(placeholder container. データはスコープ外) -- */
.product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(272px, 1fr)); align-items: stretch; gap: var(--space-5); margin: var(--space-5) 0; scroll-margin-top: var(--header-offset); }
.product-grid--empty { display: block; border: 1px dashed var(--color-base-deepest); border-radius: var(--radius-sm); padding: var(--space-6); text-align: center; color: var(--color-ink-faint); font-size: var(--text-sm); }
.tag { display: flex; flex-direction: column; height: 100%; background-color: var(--color-panel); border: 1px solid var(--color-base-deepest); border-radius: var(--radius-sm); padding: var(--space-5) var(--space-4); color: var(--color-ink-text); position: relative; }
/* 商品写真プレート: .tagは常設ダークパネル(--color-panel、ライト/ダーク共通で反転しない)
   固定のため、Amazon商品写真(常に白背景JPEG)を素で置くと浮いてギラつく。中間トーンの
   マット地+内側リング+paddingで「標本を額装した」見え方に寄せる
   (agent-lessons-frontend-qa: 白背景JPEGの意匠的手当て必須)。
   2026-08-03是正1: 初回値--color-dust-dim(#e4dfeb, L91%)は白に近すぎ、白背景/白筐体の
   商品(パナソニック開閉センサー・SwitchBot人感センサーPro・TP-Link Tapo T100等)が
   マット地に溶けてカードが空白に見える実機不具合があった。マット地を--color-dust
   (#7d6a95, L46%)へ一段落としたが、これは「紫の箱に白い矩形の切り抜きを貼った」
   ハードエッジが目立つ額装として粗い状態だった。
   2026-08-03是正2: マット地を--color-dust-bright(#a996bd, L66%)へ上げつつ、img側に
   mix-blend-mode:multiplyを適用。乗算合成により写真の白背景(RGB≈255)はマット地の色を
   素通しして継ぎ目を消し、商品の陰影(グレー/黒領域)だけがマット地の上に定着して見える。
   白商品はスタジオ白背景そのものの矩形が消えつつ、商品自体の陰影線(境界の淡いグレー)が
   輪郭として残るため空白化しない。黒商品はmultiplyでも黒はそのまま黒(乗算の性質上、
   暗い色は暗いまま)なので潰れて見えない。product.imageが無い場合はJSでこの要素自体を
   生成しないため、空箱は出ない。 */
.tag__photo {
  margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-3) calc(var(--space-4) * -1);
  aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--color-base-deepest);
  background: var(--color-dust-bright); display: flex; align-items: center; justify-content: center;
  box-shadow: inset 0 0 0 1px rgba(27,36,48,.18);
}
.tag__photo a { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; }
.tag__photo img { width: 100%; height: 100%; object-fit: contain; display: block; padding: var(--space-3); box-sizing: border-box; mix-blend-mode: multiply; }
.tag__title { font-size: var(--text-base); font-weight: 700; margin: 0 0 var(--space-2); }
.tag__note { font-size: var(--text-sm); color: rgba(238,241,244,.85); margin: 0; }

/* -- about/privacy/article body -- */
.about-body, .article-body, .privacy-body { max-width: 68ch; margin: 0 auto; padding: var(--space-7) 0; }
.about-body h2, .article-body h2 { font-size: var(--text-2xl); margin-top: var(--space-7); }
.about-body p, .article-body p, .privacy-body p, .about-body li, .privacy-body li { color: var(--color-ink-soft); }

/* -- contact form -- */
.contact-form { display: flex; flex-direction: column; gap: var(--space-4); max-width: 560px; margin-top: var(--space-5); }
.contact-form label { font-weight: 500; font-size: var(--text-sm); display: flex; flex-direction: column; gap: var(--space-2); }
.contact-form input, .contact-form textarea, .contact-form select { font: inherit; padding: var(--space-3); border: 1px solid var(--color-base-deepest); border-radius: var(--radius-sm); background: var(--color-base-2); color: var(--color-ink); }
.contact-form button { align-self: flex-start; background: var(--color-panel); color: var(--color-ink-text); border: none; border-radius: var(--radius-sm); padding: var(--space-3) var(--space-6); font-family: var(--font-label); letter-spacing: .04em; cursor: pointer; }
.contact-form button:hover { background: var(--color-lantern-deep); }
.contact-status { font-size: var(--text-sm); }
.contact-status.is-error { color: var(--color-lantern-deep); }
.contact-status.is-ok { color: var(--color-dust-deep); }

/* -- footer -- */
.site-footer { background: var(--color-panel); color: var(--color-ink-text); padding: var(--space-7) 0 var(--space-6); margin-top: var(--space-8); }
.footer-statement { font-family: var(--font-display); font-weight: 700; font-size: var(--text-xl); margin: 0 0 var(--space-4); }
.footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: var(--space-4); padding: 0; margin: 0 0 var(--space-5); }
.footer-links a { color: rgba(238,241,244,.85); text-decoration: none; font-size: var(--text-sm); }
.footer-links a:hover { color: var(--color-lantern-bright); }
.footer-meta { font-size: var(--text-xs); color: rgba(238,241,244,.65); margin: 0; }

.trademark-note, .cite-note { font-size: var(--text-xs); color: var(--color-ink-faint); max-width: 68ch; }
.article-photo { margin: var(--space-5) 0; border-radius: var(--radius-sm); overflow: hidden; }