/* ============================================================
   ENJiN!! デザイントークン — 全ての色・サイズ値の唯一の出典
   実装指示書 §3 / 値は design/MEASURED.json（参照画像実測）に基づく
   ============================================================ */
:root {
  /* ---- BASE PALETTE（ブランドブック P.17）---- */
  --enjin-black:      #000000;
  --enjin-paper:      #FFFFFF;
  --enjin-gray-a:     #888888;
  --enjin-gray-b:     #C8C8C8;

  /* ---- SURFACE（PCモック実測）---- */
  --enjin-surface:    #F2F2F2;

  /* ---- EXTENDED PALETTE / 3ファミリー（P.17）---- */
  --enjin-pink-light: #F04E97;
  --enjin-pink-core:  #E5297E;
  --enjin-pink-deep:  #C81665;
  --enjin-pink-wine:  #8E0E48;

  --enjin-cyan-mist:  #7FDCE0;
  --enjin-cyan-core:  #1DBFC5; /* ブランド規定値（UIとは区別 → OPEN_QUESTIONS Q-001） */
  --enjin-cyan-deep:  #0B8B95;
  --enjin-cyan-navy:  #0A5560;

  --enjin-yel-pastel: #F8EE8F; /* レモン系パステル（番組ロゴセクション地色） */
  --enjin-yel-lemon:  #FFEB66;
  --enjin-yel-core:   #FFDD00;
  --enjin-yel-amber:  #F5A400;
  --enjin-yel-ember:  #D96B00;

  /* ---- UI ACCENT（モック実測値）---- */
  --enjin-cyan-ui:    #20AEB4; /* PC FV 実測（ユーティリティバー / FV CTA） */
  --enjin-cyan-ui-sp: #04A2AE; /* SP PLAN E 実測（バー / CTA / タグライン2行目） */

  /* ---- SECTION ACCENT（TOP「番組ロゴ」セクション）---- */
  --ej-color-accent-yellow: var(--enjin-yel-pastel);
  --ej-programs-tile-w: 200px; /* ロゴタイル幅（aspect-ratio 16/9 で高さは従属） */
  --ej-programs-gap:    24px;
  /* 流れる速さ。ロゴ点数が増えてもトラック幅から JS が duration を算出して
     この速度を保つ（enjin.js）。dur は JS が動かない場合のフォールバック */
  --ej-programs-speed:  50;    /* px/秒 */
  --ej-programs-dur:    230s;  /* 1周。速いとロゴが読めない */

  /* ---- かんたんキャリア相談（入口の設問・アンケート）---- */
  --ej-q-accent:      var(--enjin-cyan-ui-sp); /* 白い太字を載せるボタン面（18px以上の太字で 3:1 以上） */
  --ej-q-accent-deep: var(--enjin-cyan-deep);  /* ボタンの押し込み影 */
  --ej-q-ink:         var(--enjin-cyan-navy);  /* 白地に載せる小さいシアン文字（4.5:1 以上） */
  --ej-q-tint:        #E6F7F8;                 /* 選択中の面・淡いシアン */
  --ej-q-line:        rgba(0, 0, 0, 0.14);
  --ej-q-sub:         #5F676B;                 /* 補足文字（白地で 4.5:1 以上） */
  --ej-q-radius:      14px;
  --ej-q-shadow:      0 28px 60px -36px rgba(0, 40, 46, 0.45);
  /* 斜めストライプ（SP FV と同じ 148deg・同じ3色） */
  --ej-stripe-strong: #21bac2;
  --ej-stripe-soft:   #bdeff0;
  --ej-stripe-mist:   #e6f8fa;

  /* ---- SEMANTIC ---- */
  --ej-color-surface: var(--enjin-surface); /* セクション背景の別名（LP セクション用） */
  --c-text:        var(--enjin-black);
  --c-text-sub:    var(--enjin-gray-a);
  --c-bg:          var(--enjin-paper);
  --c-bg-fv:       var(--enjin-surface);
  --c-accent:      var(--enjin-cyan-ui);
  --c-cta-bg:      var(--enjin-cyan-ui);
  --c-cta-text:    var(--enjin-paper);
  --c-border:      var(--enjin-gray-b);
  --c-badge-border:#9E9E9E; /* FVバッジ枠 実測（アンチエイリアス平均） */

  /* ---- TYPOGRAPHY ---- */
  --f-jp:     "Noto Sans JP", system-ui, sans-serif;
  --f-en:     "Inter", system-ui, sans-serif;
  --f-mincho: "Shippori Mincho B1", "Noto Serif JP", serif; /* タグライン専用（§4 確定手順で検証） */

  --fs-h1:   128px;  --lh-h1:   1.15;  --fw-h1:   700;
  /* h2 は流体指定（.ej-h2）に統一したため px トークンは持たない */
  --lh-h3:   1.3;   --fw-h3:   500;
  --fs-body:   18px; --lh-body: 1.75;  --fw-body: 400;
  --fs-cap:    12px; --lh-cap:  1.6;
  --fs-label:  11px; --ls-label: 0.4em; --fw-label: 500;

  --ls-jp:        0.06em;
  --ls-en-body:   0.02em;
  --ls-en-caps:   0.4em;

  /* ---- SPACING（8pxベース）---- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 16px; --sp-4: 24px;
  --sp-5: 32px; --sp-6: 48px; --sp-7: 64px; --sp-8: 96px; --sp-9: 128px;

  /* ---- LAYOUT ---- */
  --ej-section-py: clamp(72px, 8vw, 140px); /* LP セクション上下パディングの共通値 */
  --container-max: 1440px;
  --gutter-pc:     40px;
  --gutter-sp:     20px;
  --radius-pill:   999px;
  --bw:            1px;

  /* ---- MOTION ---- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur:  0.4s;
  --dur-reveal: 0.85s; /* f-its 系の滑らかな立ち上がりに合わせて長め */

  /* ============================================================
     流体スケール単位
     PC: 参照スクショの CSS 幅 1416px を基準に 1920px まで線形拡大
     SP: 375px 基準
     ============================================================ */
  --ej-u:  calc(min(100vw, 1920px) / 1416);
  --ej-us: calc(100vw / 375);
  /* PC カンプ（デザイン幅 1440）の 1px。ヘッダーの --ej-u とほぼ同じ倍率で伸びる */
  --ej-k:  calc(min(100vw, 1920px) / 1440);

  /* ---- PC ヘッダー実測値（単位: 1416基準CSSpx）---- */
  --ejn-util-h:      25;    /* ユーティリティバー高 */
  --ejn-util-fs:     11.5;  /* バー文字（1920換算15.6px ≥14 → OPEN_QUESTIONS 参照） */
  --ejn-util-pad-l:  19;
  --ejn-util-pad-r:  25;
  --ejn-util-gap:    28;
  --ejn-header-h:    92.5;
  --ejn-header-pad-l:61;
  --ejn-header-pad-r:39;
  /* ロゴSVGは viewBox に 3% の余白を持つ（tools/logo-pad.mjs）。
     アートワークの実寸は指定値 ÷ 1.06 になる */
  --ejn-logo-h:      62;    /* = アートワーク高 58.5px @1440。ヘッダー高 94px に収める */
  --ejn-desc-fs:     11.5;
  --ejn-desc-lh:     1.35;
  --ejn-desc-gap:    38;
  --ejn-nav-fs:      13.5;
  --ejn-nav-gap:     40;
  --ejn-nav-icon:    15;
  --ejn-hcta-h:      41.5;
  --ejn-hcta-fs:     14;
  --ejn-hcta-pad-x:  27;
  --ejn-hcta-gap:    10;

  --ejn-cta-icon:      19;    /* CTA ボタン内アイコン */

  /* ---- PC トップ（デザインカンプ ENJIN_PC_01_KV・1440×961 の実測値）----
     単位は「カンプの 1px」。enjin.css の --ej-k を掛けて使う */
  --ejk-total:       961;   /* ヘッダー96＋下線1＋KV760＋特徴3点104 */
  --ejk-header-h:    96;
  --ejk-kv-h:        760;
  --ejk-feat-h:      104;
  --ejk-feat-w:      1200;
  --ejk-photo-left:  630;   /* 人物の枠の左端（ここから画面右端まで）。赤いコートの左を切る */
  --ejk-people-left: 548;   /* 人物画像（pc-people 等倍 1024×872）の左上。KV 上端基準 */
  --ejk-people-top:  -10;
  --ejk-copy-left:   108;   /* 帯・説明・設問カードの列（帯の左右端） */
  --ejk-copy-w:      532;
  --ejk-copy-top:    124;   /* ロゴの上端。設問カードを入れるぶんカンプより 40 上げる */
  --ejk-logo-left:   57;    /* ロゴ＋下線のかたまり（下線の左端〜ロゴの右端） */
  --ejk-logo-w:      612.6;
  --ejk-logo-h:      228;
  --ejk-ribbon-gap:  27;
  --ejk-ribbon-h:    68;
  --ejk-ribbon-fs:   44;
  --ejk-desc-gap:    36;
  --ejk-desc-fs:     28;
  --ejk-entry-gap:   22;
  --ejk-entry-w:     520;
  /* ストライプ（右上から 130.5deg。幅 650 の箱の左上からの距離） */
  --ejk-stripe-w:    650;
  --ejk-stripe-1:    494;   /* 白 → 淡いシアン */
  --ejk-stripe-2:    648;   /* 淡いシアン → シアン */
  --ejk-stripe-3:    778;   /* シアン → 白の切れ目 */
  --ejk-stripe-4:    794;   /* 白の切れ目 → シアン */
  --ejk-tint:        #DAF6F8; /* 左上の淡い三角 */
  --ejk-stripe-soft: #BDEBF0;
  --ejk-stripe-deep: #11AFB9;
  --ejk-ribbon:      #0BABB5;
  --ejk-swoosh:      #31C1C8;
  --ejk-line:        #E8EEEE; /* ヘッダー下線 */

  /* ---- PC「誰もが知る、あの番組と」（デザインカンプ ENJIN_PC_02_section・1440 基準）----
     単位は「カンプの 1px」。enjin.css の --ej-p を掛けて使う */
  --ejp-pad-top:     92;
  --ejp-pad-bottom:  112;
  --ejp-pad-left:    97;
  --ejp-pad-right:   82;
  --ejp-title-fs:    68;
  --ejp-label-fs:    18;
  --ejp-num-fs:      86;
  --ejp-unit-fs:     27;
  --ejp-lead-fs:     28;
  --ejp-lead-gap:    60;
  --ejp-rows-w:      1118;  /* ロゴの3列ぶん。マーキーをこの幅に収める */
  --ejp-rows-gap:    38;
  --ejp-tile-w:      357;
  --ejp-tile-h:      175;
  --ejp-tile-gap:    23;
  --ejp-accent:      #05A6B2; /* 「あの番組」と数字 */
  --ejp-rule:        #BCE5E7; /* 実績の区切り線 */
  --ejp-swoosh:      #25BFCF;

  /* ---- SP（PLAN E）実測値（単位: 375基準designpx）----
     FV 内は絶対配置。top はユーティリティバー底（page 57px）基準 */
  --ejs-util-h:      57;
  --ejs-util-fs:     10;
  --ejs-util-pad:    16;
  --ejs-logo-top:    76.83; /* 実測 78.9 − viewBox 上余白 3%×scaleY 分 2.07 */
  --ejs-logo-w:      206.17; /* 実測幅 194.5 × 1.06（viewBox 余白の打ち消し） */
  --ejs-logo-sy:     0.573; /* SP モックのみ平体（実測 aspect 3.0）→ Q-004 */
  --ejs-logo-shift:  -8.5;  /* ロゴ光学中心の左寄り実測分 */
  --ejs-desc-top:    172.7;
  --ejs-desc-fs:     15;
  --ejs-desc-lh:     1.62;
  --ejs-logoswoosh-top:  139;  /* ロゴ下の細スウッシュ */
  --ejs-logoswoosh-left: 60;
  --ejs-logoswoosh-w:    245;
  --ejs-logoswoosh-h:    8;
  --ejs-kv-top:      236.75;
  --ejs-badge-top:   664;
  --ejs-badge-h:     29;
  --ejs-badge-fs:    10.5;
  --ejs-badge-gap:   7;
  --ejs-badge-pad-x: 11;
  --ejs-badge-icon:  13;
  --ejs-tagline-top: 716.5;
  --ejs-tagline-fs:  58.5;
  --ejs-tagline-ls:  0.01em;
  --ejs-tag2-sx:     1.13;  /* 2行目はグリフ幅広（実測: 平体） */
  --ej-tagline-skew: -8deg;  /* SP タグライン斜体（実測） */
  --ejs-tagline-lh:  1.282;
  --ejs-tag1-left:   24.5;  /* 「現場に、」左オフセット */
  --ejs-tag2-left:   25;    /* 「エンジンを。」左オフセット */
  --ejs-swoosh-top:  866.4;
  --ejs-swoosh-left: 54;
  --ejs-swoosh-w:    273;
  --ejs-swoosh-h:    12;
  --ejs-cta-top:     928;
  --ejs-cta-h:       60;
  --ejs-cta-fs:      20;
  --ejs-cta-left:    30.5;  /* 実測: 左右非対称 */
  --ejs-cta-w:       304.7;
  --ejs-login-top:   1012;
  --ejs-login-fs:    13;
  --ejs-fv-min-h:    1029;  /* 1086 - バー57 */
}

@media (max-width: 599.98px) {
  :root {
    --ej-programs-tile-w: 132px;
    --ej-programs-gap:    14px;
  }
}