/* =============================================================================
   PAGES BLOCKS v2 — Figma Wip 4876:62184 (GEO) / 4906:52032 (SEO) の実測再現
   仕様の正 = specs/pages-geo-seo-figma-spec.md（全数値は Figma metadata 実測）

   DS の実バインド値との対応:
     Neutral/700 #3a3d3e → --neutral-700     Neutral/500 #737a7c → --neutral-500
     Neutral/400 #b3b5b5 → --neutral-400     Neutral/200 #eaebeb → --border
     Neutral/50  #fbfbfb → --surface-subtle  Success/700 #0a805b → --success-700
     Secondary/Indigo #95a4fc / Secondary/Green #a1e3cb → チャート専用
     Margin 4/6/8/12/16/20/24/40 → --space-2/3/4/5/6/7/8/11
     Radius 4/8/16 → --radius-2xs / --radius-sm / --radius-xl
   接頭辞は .pb2- で、旧 page-blocks.css と衝突させない。
   ============================================================================= */

/* ---- ブロックカード（幅912・padding20・ヘッダー28・本文まで16・節間24）------- */
.pb2-card        { max-width: 912px; padding: var(--space-7); border: 1px solid var(--border);
                   border-radius: var(--radius-xl); background: var(--surface); }
.pb2-head        { display: flex; align-items: center; min-height: 28px; }
.pb2-head__name  { font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-head__sp    { flex: 1 1 auto; }
.pb2-head__acts  { display: flex; align-items: center; gap: var(--space-4); flex: 0 0 auto; }
.pb2-body        { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-6); }

/* URL ピル（SEO ヘッダー / Figma 4906:52554 — 幅157 高さ28 / globe16 + C1）------- */
.pb2-url         { display: inline-flex; align-items: center; gap: var(--space-4); height: 28px;
                   padding: 0 var(--space-4); margin-left: var(--space-4);
                   border-radius: var(--radius-sm); background: var(--surface-subtle); }
.pb2-url .ph     { font-size: 16px; color: var(--text-muted); }
.pb2-url__t      { font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-secondary); }

/* ---- パターン1: タイトル行のクレジット + トグル ------------------------------- */
.pb2-meter       { display: inline-flex; align-items: center; gap: var(--space-3); margin-right: var(--space-6); }
.pb2-meter__v    { font: var(--type-c2-weight) var(--type-c2-size)/16px var(--font-sans); color: var(--text-secondary); }
.pb2-meter__u    { font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); }
.pb2-meter .ph   { font-size: 14px; color: var(--text-faint); }
.pb2-meter__off  { display: none; font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); }
/* off = 本体を減光し、ヘッダーの表示を Paused に差し替える */
.pb2-card:has(.pb2-head .toggle:not(.toggle--on)) .pb2-body { opacity: 0.4; pointer-events: none; }
.pb2-card:has(.pb2-head .toggle:not(.toggle--on)) .pb2-meter__v,
.pb2-card:has(.pb2-head .toggle:not(.toggle--on)) .pb2-meter__u,
.pb2-card:has(.pb2-head .toggle:not(.toggle--on)) .pb2-meter .ph { display: none; }
.pb2-card:has(.pb2-head .toggle:not(.toggle--on)) .pb2-meter__off { display: inline; }

/* ---- パターン2: gear ポップオーバー ------------------------------------------- */
.pb2-pop         { width: 310px; padding: var(--space-5); }
.pb2-pop__h      { display: flex; align-items: center; gap: var(--space-4); padding-bottom: var(--space-5); }
.pb2-pop__t      { flex: 1 1 auto; font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-pop__row    { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) 0; }
.pb2-pop__row .pb2-pop__lbl { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-pop__k      { font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); }
.pb2-pop__v      { margin-top: var(--space-2); font: var(--type-s2-weight) var(--type-s2-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-pop__div    { height: 1px; background: var(--border); margin: var(--space-5) 0; }
.pb2-pop__link   { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4);
                   margin: 0 calc(var(--space-4) * -1) calc(var(--space-4) * -1);
                   border-radius: var(--radius-sm); cursor: pointer;
                   font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-pop__link:hover { background: var(--surface-hover); }
.pb2-pop__link .ph   { font-size: 16px; color: var(--text-muted); }
.pb2-pop__link .pb2-pop__arrow { margin-left: auto; color: var(--text-faint); }

/* ---- 節（見出し + カウント）--------------------------------------------------- */
.pb2-sec         { display: flex; flex-direction: column; gap: var(--space-4); }
.pb2-sec__h      { display: flex; align-items: center; gap: var(--space-4); }
.pb2-sec__t      { font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-sec__n      { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); }
.pb2-sec__sp     { flex: 1 1 auto; }
.pb2-sec__q      { font-size: 14px; color: var(--text-faint); }

/* ---- Neutral/50 の器（テーブル・チャート・リストの共通の受け皿）--------------- */
.pb2-panel       { background: var(--surface-subtle); border-radius: var(--radius-sm); }

/* ---- テーブル ---------------------------------------------------------------- */
.pb2-t           { width: 100%; border-collapse: collapse; }
.pb2-t th        { padding: var(--space-5) var(--space-5) var(--space-4);
                   font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans);
                   color: var(--text-muted); text-align: left; white-space: nowrap; }
.pb2-t td        { padding: var(--space-5); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans);
                   color: var(--text-primary); white-space: nowrap; }
.pb2-t td.pb2-t__brand { width: 100%; }
.pb2-t td.pb2-t__rank,
.pb2-t th.pb2-t__rank  { color: var(--text-muted); width: 32px; }

/* ---- チャート（Secondary/Indigo + Secondary/Green の2系列のみ）---------------- */
.pb2-chart       { padding: var(--space-5); }
.pb2-chart__plot { display: grid; grid-template-columns: 36px minmax(0, 1fr); margin-top: var(--space-5); }
.pb2-chart__y    { position: relative; }
.pb2-chart__yt   { position: absolute; left: 0; transform: translateY(-50%);
                   font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); }
.pb2-chart__svg  { width: 100%; height: auto; display: block; }
.pb2-chart__x    { display: grid; grid-template-columns: repeat(6, 1fr); margin: var(--space-4) 0 0 36px; }
.pb2-chart__x span { font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); text-align: center; }

/* ---- Top prompts ------------------------------------------------------------- */
.pb2-prompt      { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
                   font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-prompt .ph  { flex: 0 0 auto; font-size: 16px; color: var(--text-muted); }

/* ---- 2カラム（Raising / Falling・幅428 ギャップ16）---------------------------- */
.pb2-2col        { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }

/* ---- Prompts & Outputs ------------------------------------------------------- */
.pb2-grp         { padding: var(--space-5); }
.pb2-grp__h      { display: flex; align-items: center; gap: var(--space-4); }
.pb2-grp__t      { font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-grp__m      { flex: 1 1 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); }
.pb2-po          { margin-top: var(--space-5); padding: var(--space-5); background: var(--surface); border-radius: var(--radius-sm); }
.pb2-po__q       { display: flex; align-items: center; gap: var(--space-4);
                   font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-po__q .ph   { flex: 0 0 auto; font-size: 16px; color: var(--text-muted); }
.pb2-po__n       { margin-left: auto; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); }
.pb2-po__ans     { margin-top: var(--space-5); padding: var(--space-5); background: var(--surface-subtle); border-radius: var(--radius-sm); }
.pb2-po__meta    { display: flex; align-items: center; gap: var(--space-3);
                   font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-po__meta .ph{ font-size: 14px; color: var(--text-muted); }
.pb2-po__time    { color: var(--text-faint); }
.pb2-po__body    { margin: var(--space-5) 0 0; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-secondary); }
.pb2-po__lbl     { margin-top: var(--space-5); font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); }
.pb2-po__chips   { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-3); }
.pb2-chip        { display: inline-flex; align-items: center; gap: var(--space-3); height: 32px; padding: 0 var(--space-4);
                   border-radius: var(--radius-2xs); background: var(--surface);
                   font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-secondary); }
.pb2-chip .ph    { font-size: 14px; color: var(--text-faint); }

/* ---- delta（Success/700・上向き）-------------------------------------------- */
.pb2-delta       { display: inline-flex; align-items: center; gap: var(--space-2);
                   font: var(--type-c2-weight) var(--type-c2-size)/16px var(--font-sans); color: var(--success-700); }
.pb2-delta .ph   { font-size: 14px; }

/* ---- Keyword overview タイル（GEO: 3枚均等）--------------------------------- */
.pb2-tiles       { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); }
.pb2-tile        { padding: var(--space-5) var(--space-6); background: var(--surface-subtle); border-radius: var(--radius-sm); }
.pb2-tile__k     { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-muted); }
.pb2-tile__r     { display: flex; align-items: flex-end; gap: var(--space-4); margin-top: var(--space-5); }
.pb2-tile__v     { font: var(--type-s1-weight) var(--type-s1-size)/1.2 var(--font-sans); color: var(--text-primary); }
.pb2-tile__v small { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); }
.pb2-tile__sp    { flex: 1 1 auto; }

/* ---- SEO Keyword overview（3枚・幅が違う / 内部に区切り線）------------------- */
.pb2-kw          { display: grid; grid-template-columns: 320px minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-6); align-items: start; }
.pb2-kw__card    { padding: var(--space-5) var(--space-6); background: var(--surface-subtle); border-radius: var(--radius-sm); }
.pb2-kw__div     { height: 1px; background: var(--border); margin: var(--space-5) 0; }
.pb2-kw__k       { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-muted); }
.pb2-kw__vrow    { display: flex; align-items: center; gap: var(--space-3); margin-top: var(--space-4); }
.pb2-kw__v       { font: var(--type-s1-weight) var(--type-s1-size)/1.2 var(--font-sans); color: var(--text-primary); }
.pb2-kw__v small { font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); color: var(--text-muted); }
.pb2-kw__flag    { font-size: 14px; line-height: 1; }
.pb2-kw__hard    { margin-left: auto; font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-muted); }
.pb2-kw__bar     { height: 4px; border-radius: var(--radius-full); background: var(--neutral-200); overflow: hidden; margin-top: var(--space-4); }
.pb2-kw__bar span{ display: block; height: 100%; background: var(--danger-500); }
.pb2-kw__note    { margin: var(--space-4) 0 0; font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); }
/* 国別内訳 */
.pb2-geo         { margin-top: var(--space-5); }
.pb2-geo__row    { padding: var(--space-4) 0; }
.pb2-geo__top    { display: flex; align-items: center; gap: var(--space-3); }
.pb2-geo__c      { font: var(--type-c2-weight) var(--type-c2-size)/16px var(--font-sans); color: var(--text-primary); }
.pb2-geo__sp     { flex: 1 1 auto; }
.pb2-geo__n      { font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-primary); }
.pb2-geo__p      { width: 32px; text-align: right; font: var(--type-c1-weight) var(--type-c1-size)/16px var(--font-sans); color: var(--text-faint); }
.pb2-geo__bar    { height: 4px; border-radius: var(--radius-full); background: var(--neutral-200); overflow: hidden; margin-top: var(--space-3); }
.pb2-geo__bar span { display: block; height: 100%; background: var(--neutral-900); }

/* ---- SERP analytics ---------------------------------------------------------- */
.pb2-serp        { padding: var(--space-5); }
.pb2-serp__d     { display: flex; align-items: center; gap: var(--space-4);
                   font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-serp__d .ph { font-size: 16px; color: var(--text-muted); }
.pb2-serp__n     { color: var(--text-faint); }
.pb2-serp__grid  { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); margin-top: var(--space-5); }
.pb2-serp__grid + .pb2-serp__d { margin-top: var(--space-8); }
.pb2-res         { padding: var(--space-5); background: var(--surface); border-radius: var(--radius-sm); }
.pb2-res__h      { display: flex; align-items: flex-start; gap: var(--space-4); }
.pb2-res__ic     { width: 32px; height: 32px; flex: 0 0 32px; border-radius: var(--radius-full);
                   background: var(--surface-subtle); display: flex; align-items: center; justify-content: center; }
.pb2-res__ic .ph { font-size: 16px; color: var(--text-muted); }
.pb2-res__b      { flex: 1 1 auto; min-width: 0; }
.pb2-res__n      { display: block; font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary);
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2-res__u      { display: block; margin-top: var(--space-2); font: var(--type-c1-weight) var(--type-c1-size)/18px var(--font-sans);
                   color: var(--text-muted); text-decoration: underline;
                   overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pb2-res__m      { display: block; margin-top: var(--space-5); font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans);
                   color: var(--text-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Keyword ideas ----------------------------------------------------------- */
.pb2-ideas       { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
.pb2-idea        { padding: var(--space-5); background: var(--surface-subtle); border-radius: var(--radius-sm); }
.pb2-idea__h     { display: flex; align-items: baseline; gap: var(--space-4); }
.pb2-idea__t     { font: var(--type-b4-weight) var(--type-b4-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-idea__c     { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }
.pb2-idea__v     { font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-faint); }
.pb2-idea .pb2-t td,
.pb2-idea .pb2-t th { padding-left: var(--space-4); padding-right: var(--space-4); }
.pb2-idea__sub   { display: block; margin-top: var(--space-2); font: var(--type-c1-weight) var(--type-c1-size)/18px var(--font-sans);
                   color: var(--text-muted); text-decoration: underline; }
.pb2-kd          { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; height: 18px;
                   padding: 0 var(--space-3); border-radius: var(--radius-2xs);
                   font: var(--type-c1-weight) var(--type-c1-size)/1 var(--font-sans); }
.pb2-kd--hi      { background: var(--danger-100); color: var(--danger-700); }
.pb2-kd--mid     { background: var(--warning-100); color: var(--warning-900); }
.pb2-kd--lo      { background: var(--success-100); color: var(--success-700); }
/* Broad match = globe + URL + 件数 の2カラム */
.pb2-urls        { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); margin-top: var(--space-5); }
.pb2-urlrow      { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5);
                   background: var(--surface); border-radius: var(--radius-2xs); }
.pb2-urlrow .ph  { flex: 0 0 auto; font-size: 16px; color: var(--text-faint); }
.pb2-urlrow__t   { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
                   font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-secondary); }
.pb2-urlrow__n   { flex: 0 0 auto; font: var(--type-b3-weight) var(--type-b3-size)/1.5 var(--font-sans); color: var(--text-primary); }

/* ---- ページ地は白（Figma 4876:62184 / 4906:52032）--------------------------
   旧 page-blocks.css が .page-wrap:has(.pblock) を Neutral/50 にしているので、
   v2 のカードを載せたページでは明示的に白へ戻す。 */
.page-wrap:has(.pb2-card) { background: var(--surface); }

/* ---- 折りたたみレール: Figma は 60px。56px だとナビアイコンの中心が
   ブランドマークより 2px 内側にずれる（実測）。60px + 左右 10px で中心を一致させる。 */
.app.rail-collapsed .rail { width: 60px; flex: 0 0 60px;
                            padding: var(--layout-rail-pad) calc((60px - 40px) / 2); }
/* nav の justify-content が効いていない（アイコンが左寄せ）ので、
   flex item の auto margin で確実に中央へ寄せる。ブランドマークと中心が一致する。 */
/* 折りたたみ時はラベル span を display:none にする。font-size:0 だけだと span が
   flex item として残り、アイコンが中央からずれる（これがアイコン左寄せの原因）。 */
.app.rail-collapsed .nav-item:not(.menu__item) .nav-item__t { display: none; }
.app.rail-collapsed .nav-item:not(.menu__item) .ph { margin-left: auto; margin-right: auto; }

/* ---- 折りたたみレールの地は白（Figma 4876:62184 / 4906:52032）--------------
   components.css の .rail は Neutral/50。Figma は白なので、v2 のページでだけ白へ。
   （.app 側にクラスが無いので :has() でこの4画面のカードが載っている時だけ効かせる） */
.app:has(.pb2-card).rail-collapsed .rail { background: var(--surface); }