/* ===================================================================
 * Professional Tech Lab Design System — Consumer / LP レイヤー
 * ToC（消費者向け）ランディング・キャンペーンページ用の拡張層。
 *
 * 位置づけ: components.css（社内ダッシュボード・管理画面の ds-* 部品）に対し、
 *   本書は「世に出す消費者LP」のための lp-* 部品とモーションを足す層。
 *   コア（墨黒 #28282d・Noto・枠線0思想・トークン）は tokens.css/base.css を共有し、
 *   消費者面に必要な「体温」= 表示書体(Outfit)・差し色(コーラル)・大きな級数・
 *   スクロールモーション・物語セクションだけを本書で追加する。
 *
 * 読み込み順（消費側 LP）:
 *   Google Fonts(Noto Sans JP / Outfit) → tokens.css → base.css → consumer.css
 *
 * 一次根拠（消費者LPトンマナの実体）: politician-checker「AIぶれチェッカー」LP
 *   （墨黒素地＋Outfit表示書体＋コーラル差し色＋fade-in＋物語構成）。
 * =================================================================== */

@layer theme {
  :root {
    /* 表示書体（大見出し・数字）。本文は base.css の Noto のまま */
    --font-display: 'Outfit', 'Noto Sans JP', NotoSansJP, sans-serif;

    /* 消費者LPの差し色（コーラル）。社内UIの --color-red/--color-cta とは用途分離。
     * 1画面の主役ワード下線・eyebrow・連番ラベルに少量だけ使う。 */
    --color-accent:      #e85a5a;
    --color-accent-wash: rgba(232, 90, 90, 0.18); /* 主役ワードのマーカー線 */

    /* 消費者LPの級数（投影・社内UIの --text-* とは別系の大きい振れ幅） */
    --lp-text-hero:  clamp(1.85rem, 6vw, 2.6rem);  /* ヒーローの問い */
    --lp-text-h2:    clamp(1.35rem, 3.6vw, 1.6rem);/* セクション見出し */
    --lp-text-stat:  clamp(2.6rem, 9vw, 3.6rem);   /* 主役の数字 */
    --lp-text-rankno:1.5rem;                        /* 順位番号 */
    --lp-maxw:       760px;                          /* 読み物幅（社内の1152pxより狭い） */
    --lp-section-pad:88px;

    /* モーション */
    --lp-reveal: opacity 0.8s ease, transform 0.8s ease;
  }
}

@layer base {
  /* スクロールリベール（消費側で JS が is-visible を付与） */
  .fade-in { opacity: 0; transform: translateY(30px); transition: var(--lp-reveal); }
  .fade-in.is-visible { opacity: 1; transform: translateY(0); }
  .d1 { transition-delay: 0.12s; } .d2 { transition-delay: 0.24s; }
  .d3 { transition-delay: 0.36s; } .d4 { transition-delay: 0.48s; }
  @media (prefers-reduced-motion: reduce) {
    .fade-in { transition: none; opacity: 1; transform: none; }
  }
  /* 数字・連番は表示書体＋tabular */
  .lp-num { font-family: var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
  /* 主役ワードのマーカー線 */
  .lp-accent { position: relative; display: inline-block; }
  .lp-accent::after { content: ''; position: absolute; left: -2px; right: -2px; bottom: 4px; height: 10px; background: var(--color-accent-wash); z-index: -1; }
  html.lp-root { scroll-behavior: smooth; }
  body.lp-body { background: var(--color-white); line-height: 1.8; overflow-x: hidden; }
}

@layer components {
  /* ---- セクション枠 ---- */
  .lp-section { padding: var(--lp-section-pad) 24px; }
  .lp-inner { max-width: var(--lp-maxw); margin: 0 auto; }
  .lp-alt { background: var(--color-gray-050); }
  .lp-eyebrow { font-family: var(--font-display); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; color: var(--color-accent); text-transform: uppercase; margin-bottom: 18px; }
  .lp-h2 { font-size: var(--lp-text-h2); font-weight: 800; line-height: 1.5; letter-spacing: -0.01em; margin-bottom: 14px; }
  .lp-lead { font-size: 0.9rem; color: var(--color-subtle); line-height: 2; max-width: 480px; }

  /* ---- sticky header ---- */
  .lp-header { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); background: var(--color-black); transform: translateY(-100%); transition: transform 0.3s ease; padding: 13px 24px; display: flex; align-items: center; justify-content: space-between; }
  .lp-header.is-visible { transform: translateY(0); }
  .lp-header__logo { font-size: 0.82rem; font-weight: 700; color: var(--color-white); }
  .lp-header__badge { font-size: 0.6rem; color: var(--color-white); background: var(--color-accent); padding: 3px 8px; border-radius: var(--radius-soft); font-weight: 600; margin-left: 8px; }
  .lp-header__cta { font-size: 0.72rem; color: var(--color-white); border: 1px solid var(--color-gray-700); border-radius: 6px; padding: 7px 14px; text-decoration: none; }
  .lp-header__cta:hover { background: var(--color-gray-700); }

  /* ---- hero ---- */
  .lp-hero { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 24px; position: relative; }
  .lp-hero__eyebrow { font-family: var(--font-display); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; color: var(--color-gray-400); margin-bottom: 26px; }
  .lp-hero__eyebrow b { color: var(--color-black); font-weight: 700; }
  .lp-hero__q { font-size: var(--lp-text-hero); font-weight: 800; line-height: 1.55; letter-spacing: -0.02em; margin-bottom: 26px; }
  .lp-hero__sub { font-size: 0.95rem; color: var(--color-subtle-strong); line-height: 2; max-width: 400px; }
  .lp-hero__hint { position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 8px; color: var(--color-gray-400); font-size: 0.62rem; letter-spacing: 0.16em; font-family: var(--font-display); animation: lpBounce 2.5s ease-in-out infinite; }
  .lp-hero__hint span { display: block; width: 1px; height: 34px; background: linear-gradient(to bottom, var(--color-gray-300), transparent); }
  @keyframes lpBounce { 0%, 100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(7px); } }

  /* ---- big stats ---- */
  .lp-stats { display: flex; gap: 40px; flex-wrap: wrap; }
  .lp-stat__n { font-family: var(--font-display); font-size: var(--lp-text-stat); font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
  .lp-stat__n small { font-family: var(--font-noto); font-size: 1rem; font-weight: 700; margin-left: 6px; }
  .lp-stat__l { font-size: 0.8rem; color: var(--color-subtle); margin-top: 10px; }

  /* ---- distribution band ---- */
  .lp-band { padding: 13px 0; border-bottom: 1px solid var(--color-gray-200); }
  .lp-band__top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
  .lp-band__label { font-size: 0.86rem; font-weight: 600; }
  .lp-band__nums { font-size: 0.76rem; color: var(--color-subtle); }
  .lp-band__nums b { font-family: var(--font-display); color: var(--color-black); font-weight: 700; }
  .lp-band__track { height: 8px; background: var(--color-gray-100); border-radius: var(--radius-pill); overflow: hidden; }
  .lp-band__fill { height: 100%; background: var(--color-black); border-radius: var(--radius-pill); transform-origin: left; transform: scaleX(0); transition: transform 1.1s cubic-bezier(0.4,0,0.2,1); }
  .lp-band.is-visible .lp-band__fill { transform: scaleX(1); }

  /* ---- punch cards ---- */
  .lp-punch { display: flex; gap: 20px; flex-wrap: wrap; }
  .lp-punch__card { flex: 1 1 220px; background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 14px; padding: 26px; }
  .lp-punch__n { font-family: var(--font-display); font-size: 2.6rem; font-weight: 800; line-height: 1; color: var(--color-black); }
  .lp-punch__n .u { font-family: var(--font-noto); font-size: 0.95rem; font-weight: 700; margin-left: 5px; }
  .lp-punch__t { font-size: 0.86rem; color: var(--color-subtle-strong); line-height: 1.8; margin-top: 14px; }
  .lp-punch__t b { color: var(--color-accent); font-weight: 700; }

  /* ---- ranking list ---- */
  .lp-rank__row { display: flex; align-items: center; gap: 20px; padding: 16px 4px; border-bottom: 1px solid var(--color-gray-200); }
  .lp-rank__no { font-family: var(--font-display); font-size: var(--lp-text-rankno); font-weight: 700; color: var(--color-gray-300); width: 38px; flex-shrink: 0; text-align: center; }
  .lp-rank__row:nth-child(-n+3) .lp-rank__no { color: var(--color-accent); }
  .lp-rank__name { flex: 1; font-size: 0.92rem; font-weight: 600; line-height: 1.5; }
  .lp-rank__meta { font-size: 0.74rem; color: var(--color-gray-400); margin-top: 3px; font-weight: 400; }
  .lp-rank__count { font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; flex-shrink: 0; }
  .lp-rank__count small { font-family: var(--font-noto); font-size: 0.72rem; font-weight: 500; color: var(--color-gray-400); margin-left: 3px; }

  /* ---- card / funnel ---- */
  .lp-card { background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: 16px; padding: 30px; }
  .lp-card__role { font-family: var(--font-display); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--color-accent); font-weight: 600; text-transform: uppercase; }
  .lp-card__name { font-size: 1.3rem; font-weight: 800; margin-top: 8px; }
  .lp-card__meta { font-size: 0.8rem; color: var(--color-subtle); margin-top: 6px; }
  .lp-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 24px; }
  .lp-chip { font-size: 0.74rem; color: var(--color-subtle-strong); background: var(--color-gray-100); border-radius: var(--radius-pill); padding: 6px 14px; }

  /* ---- buttons ---- */
  .lp-btn { display: inline-flex; align-items: center; gap: 8px; background: var(--color-black); color: var(--color-white); text-decoration: none; font-size: 0.86rem; font-weight: 600; padding: 14px 26px; border-radius: 10px; transition: background 0.2s, transform 0.2s; }
  .lp-btn:hover { background: var(--color-gray-700); transform: translateY(-1px); }
  .lp-btn--ghost { background: var(--color-white); color: var(--color-black); border: 1px solid var(--color-gray-300); }
  .lp-btn--ghost:hover { background: var(--color-gray-050); }
  .lp-btn--light { background: var(--color-white); color: var(--color-black); }
  .lp-btn--light:hover { background: var(--color-gray-100); }

  /* ---- features ---- */
  .lp-feat { display: flex; gap: 22px; align-items: flex-start; padding: 26px 0; border-bottom: 1px solid var(--color-gray-200); }
  .lp-feat:last-child { border-bottom: none; }
  .lp-feat__no { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; color: var(--color-accent); flex-shrink: 0; padding-top: 2px; }
  .lp-feat__t { font-size: 1.02rem; font-weight: 700; margin-bottom: 7px; }
  .lp-feat__d { font-size: 0.86rem; color: var(--color-subtle-strong); line-height: 1.9; }

  /* ---- CTA band ---- */
  .lp-cta { background: var(--color-black); color: var(--color-white); text-align: center; padding: 92px 24px; }
  .lp-cta__h { font-size: clamp(1.4rem, 4vw, 1.7rem); font-weight: 800; line-height: 1.6; letter-spacing: -0.01em; margin-bottom: 28px; }
  .lp-cta__h .lp-accent::after { background: rgba(232, 90, 90, 0.35); }

  /* ---- footer ---- */
  .lp-foot { background: var(--color-black); color: var(--color-gray-400); font-size: 0.74rem; line-height: 1.9; padding: 48px 24px; }
  .lp-foot__inner { max-width: var(--lp-maxw); margin: 0 auto; }
  .lp-foot h4 { color: var(--color-gray-300); font-size: 0.78rem; font-weight: 700; margin-bottom: 6px; }
  .lp-foot p { margin-bottom: 18px; }
  .lp-foot a { color: var(--color-gray-300); }
}