/**
 * market-extras.css — レイアウト調整 + スクロール性能の追加レイヤー。
 *
 * 配色・枠線・角丸・カードの質感は styles.css の定義をそのまま継承し、
 * ここでは「列数」「余白・文字サイズの圧縮」「ティッカー速度」
 * 「合成レイヤーの分離」だけを担当する。
 *
 * 重複整理メモ:
 *   スクロール負荷の原因だった mix-blend-mode / backdrop-filter / filter:blur は、
 *   以前このファイルで none 指定して打ち消していたが、
 *   styles.css・live-feed.css の元の宣言自体を最終値へ書き換えて一本化した。
 *   そのため打ち消し専用の宣言はここには残していない。
 */

/* =========================================================================
   1. スクロール性能の改善（合成レイヤーの分離と再描画範囲の封じ込め）
   ========================================================================= */

/* 全画面の粒子レイヤーを独立した合成レイヤーへ固定し、スクロール中に再描画させない */
.noise{
  transform:translateZ(0);
  backface-visibility:hidden;
  contain:strict;
}

/* sticky ヘッダーも独立レイヤーに載せ、追従時の再描画を避ける */
.site-header{transform:translateZ(0)}

/* 大きな装飾グラデーションを持つブロックは描画範囲を閉じ込め、
   スクロール時に画面外の領域まで再描画されるのを防ぐ */
.hero,.hero-visual,.final-card{contain:paint}

/* 無限アニメーションを持つ要素は独立レイヤーに載せ、
   周囲のコンテンツを巻き込んで再描画しないようにする */
.ticker-wrap{contain:paint}
.ticker-track{transform:translateZ(0)}
.floating-cta{will-change:transform;transform:translateZ(0)}
.live-feed{will-change:transform,opacity}

/* カード自体の描画も内部に閉じ込め、1枚のホバーが全体の再計算を招かないようにする */
.stock-card{contain:layout paint style}

/* 端末が「動きを減らす」設定のときは、装飾アニメーションを止めて更に軽くする */
@media (prefers-reduced-motion:reduce){
  .ticker-track{animation:none}
  .floating-cta:before{animation:none}
}

/* =========================================================================
   2. Market board : 15 枚を「スクロールなし」で一度に見せる
   -------------------------------------------------------------------------
   15 = 3×5 / 5×3 で割り切れるため、どのブレークポイントでも端数が出ない。
   高さ制限と overflow は使わず、中身の高さで自然に伸ばす（内部スクロールバーなし）。
   ========================================================================= */

/* 広いデスクトップは 5 列 × 3 行 */
@media (min-width:1080px){
  .market-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
}

/* タブレット以下は 3 列 × 5 行 */
@media (max-width:980px){
  .market-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* ===== モバイル : 横3列 × 縦5行を全件表示（スクロールなし） =====
   styles.css の ≤680px は1列指定なので、ここで3列へ上書きする。 */
@media (max-width:680px){
  .market-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
    grid-auto-rows:94px;
    gap:7px;
  }

  /* 3列で1枚が細くなるため、内側の余白・文字サイズ・行間をまとめて圧縮する */
  .stock-card{
    width:100%;
    height:100%;
    padding:9px 5px;
    border-radius:12px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    min-width:0;
  }
  .stock-head,.stock-body{width:100%;min-width:0}
  .stock-head{gap:2px}
  /* 銘柄名は省略記号で切らず、最大2行まで折り返して全文を見せる。
     行高 94px は「2行の銘柄名 + コード + 株価 + 騰落率」に十分な余裕がある。 */
  .stock-head b{
    font-size:10.5px;
    line-height:1.22;
    max-width:100%;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
    overflow-wrap:anywhere;
    word-break:break-word;
    white-space:normal;
  }
  .stock-head span{font-size:8.5px;line-height:1.2;letter-spacing:0}
  .stock-body{margin-top:7px;gap:4px}
  .stock-price{font-size:13px;line-height:1.2;letter-spacing:-.02em;white-space:nowrap}
  .stock-change{font-size:9px;padding:2px 6px;line-height:1.3;white-space:nowrap}
  /* 3列では取得時刻／データ元まで入れると窮屈になるため、カード内では非表示にする
     （同じ情報は選択後の SNAPSHOT 側で確認できる）。 */
  .stock-meta{display:none}
}

/* 320〜380px の最小幅でも溢れないよう、もう一段だけ圧縮する */
@media (max-width:380px){
  .market-grid{grid-auto-rows:88px;gap:6px}
  .stock-card{padding:8px 4px}
  .stock-head b{font-size:9.5px;line-height:1.2}
  .stock-head span{font-size:8px}
  .stock-body{margin-top:6px;gap:3px}
  .stock-price{font-size:11.5px}
  .stock-change{font-size:8.5px;padding:2px 5px}
}

/* ===== Ticker : 表示件数 15 件ぶんで体感スクロール速度を元と揃える ===== */
.ticker-track{animation-duration:68s}
@media (max-width:680px){
  .ticker-track{animation-duration:58s}
}

/* ===== Snapshot chart : 騰落連動スパークラインの視認性を少し上げる =====
   色は .chart-card の up / down / neutral（currentColor）に委ねたまま、
   線の繋ぎ目だけ丸めてギザつきを抑える。 */
.chart-card .line{stroke-linejoin:round;stroke-linecap:round}

/* =========================================================================
   3. SNAPSHOT ヘッダー右上：JST 時計 → 静的テキスト「完全無料」
   -------------------------------------------------------------------------
   以前は等幅数字で時刻を表示していた枠。文字組みが変わったため、
   数値表示向けの字送りをやめて「無料」を訴求するピル型バッジにする。
   ========================================================================= */
.free-badge{
  display:inline-flex;
  align-items:center;
  padding:2px 9px;
  border-radius:999px;
  border:1px solid var(--down-line,rgba(46,224,138,.34));
  background:rgba(46,224,138,.1);
  color:var(--down,#2ee08a);
  font-size:10px;
  font-weight:800;
  letter-spacing:.06em;
  line-height:1.5;
  white-space:nowrap;
  font-variant-numeric:normal;
}

/* =========================================================================
   4. フローティング CTA：長文コピーの折り返し対応
   -------------------------------------------------------------------------
   「LINE友だち追加で、今日のAI推奨3銘柄を無料公開！」は従来コピーの約3倍の長さ。
   styles.css は 1 行前提（white-space:nowrap）なので、ここで複数行を許可し、
   デスクトップは幅上限つきカード型、モバイルは貼り付きバーの高さを見直す。
   クリック時の遷移・計測は .js-external-cta 側に一本化されているため触らない。
   ========================================================================= */
.floating-cta{
  white-space:normal;
  text-align:left;
  align-items:center;
  max-width:min(320px,calc(100vw - 48px));
  padding:13px 18px;
  font-size:13px;
  line-height:1.42;
  border-radius:16px;
  /* アイコンは折り返しても縮まず、常に文頭の高さに揃える */
  gap:10px;
}
.floating-cta .ico{flex:0 0 auto}
.floating-cta>span{min-width:0;overflow-wrap:anywhere}

/* 狭いデスクトップ〜タブレットでは本文カラムを圧迫しないよう一段小さくする */
@media (max-width:980px){
  .floating-cta{max-width:min(290px,calc(100vw - 40px));font-size:12.5px;padding:12px 16px}
}

/* ===== モバイル：貼り付きバーは中央寄せの 2 行組み ===== */
@media (max-width:680px){
  .floating-cta{
    max-width:calc(100% - 24px);
    text-align:center;
    justify-content:center;
    padding:11px 14px;
    font-size:12.5px;
    line-height:1.38;
    border-radius:14px;
  }
  /* 2 行になった分だけ、上に載る要素（トースト）を押し上げる。
     .live-feed の避難位置は後読みの live-feed.css 側で直接更新している。 */
  .toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 78px)}
  /* 最終 CTA とフッター文言がバーに隠れないよう余白も追従させる */
  footer{padding-bottom:104px}
}

/* 320〜380px：3 行になっても溢れないところまで詰める */
@media (max-width:380px){
  .floating-cta{
    max-width:calc(100% - 20px);
    left:10px;
    right:10px;
    padding:10px 12px;
    font-size:11.5px;
    line-height:1.36;
    gap:8px;
  }
  .floating-cta .ico{width:17px;height:17px}
  .toast{bottom:calc(max(12px,env(safe-area-inset-bottom)) + 76px)}
  footer{padding-bottom:100px}
}