/* ============================================================
 * /cfd/stocklist/ ページ専用CSS
 * 参照Figma: PC 銘柄一覧 (node 712:1479)
 * 基本トークン・タイポグラフィ・.ta-hero / .ta-heading--bar は
 * /assets/css/app.css を使用し、ここではページ固有レイアウトのみ定義する。
 * ============================================================ */

.stocklist-page {
  width: 100%;
}

.stocklist-inner {
  width: min(1000px, calc(100% - 40px));
  margin: 0 auto;
}

.stocklist-intro,
.stocklist-index-section,
.stocklist-variety-nav-section,
.stocklist-category-section {
  padding: 40px 0;
}

/* ユーザー指示 2026-07-14: intro とバラエティナビは padding-bottom 0（PC側は下の min-width: 1040px ブロックで再指定） */
.stocklist-intro,
.stocklist-variety-nav-section {
  padding-bottom: 0;
}

.stocklist-index-section,
.stocklist-variety-nav-section,
.stocklist-category-section {
  scroll-margin-top: 48px;
}

.stocklist-lead,
.stocklist-section-lead {
  max-width: 800px;
  margin: 0 auto;
  text-align: center;
}

/* リード文のSP専用改行（ユーザー指定位置。PCは自然折り返し） */
.stocklist-lead-br-sp {
  display: none;
}

@media (max-width: 768px) {
  .stocklist-lead-br-sp {
    display: inline;
  }
}

/* ------------------------------------------------------------
 * 大タブ: 株価指数CFD / バラエティCFD
 * ---------------------------------------------------------- */
.stocklist-main-nav {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: 40px;
}

.stocklist-main-link {
  display: flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  padding: 10px 16px;
  border: 1px solid var(--ta-color-border);
  background: var(--ta-color-bg);
  text-align: center;
  text-decoration: none;
}

.stocklist-main-link:first-child {
  border-radius: 8px 0 0 8px;
}

.stocklist-main-link:last-child {
  border-radius: 0 8px 8px 0;
}

.stocklist-main-link:hover,
.stocklist-main-link:focus-visible,
.stocklist-main-link.is-active {
  background: var(--ta-color-main);
  border-color: var(--ta-color-main);
  color: var(--ta-color-bg);
}

.stocklist-section-title {
  margin: 0;
  text-align: center;
}

.stocklist-section-lead {
  margin-top: 40px;
}

.stocklist-variety-nav-section,
.stocklist-category-section--pale {
  background: var(--ta-color-primary-pale);
}

/* ------------------------------------------------------------
 * カテゴリピル: レバレッジ / カバードコール / テーマ / コモディティ / 指数
 * ---------------------------------------------------------- */
.stocklist-category-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 40px;
}

.stocklist-category-link {
  display: flex;
  min-height: 48px;
  align-items: center;
  justify-content: center;
  padding: 8px 40px;
  border: 2px solid var(--ta-color-border);
  border-radius: 40px;
  background: var(--ta-color-bg);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.stocklist-category-link:hover,
.stocklist-category-link:focus-visible,
.stocklist-category-link.is-active {
  background: var(--ta-color-main);
  border-color: var(--ta-color-main);
  color: var(--ta-color-bg);
}

/* ------------------------------------------------------------
 * SPカテゴリプルダウン（Figma node 1200:7704）
 * PC(769px〜)はピル .stocklist-category-nav、SPはこちらを表示。
 * 開いた状態はFigma未定義のため、バーと同じ枠色・角丸で下に重ねる。
 * ---------------------------------------------------------- */
.stocklist-category-select {
  display: none;
}

@media (max-width: 768px) {
  .stocklist-category-nav {
    display: none;
  }

  .stocklist-category-select {
    display: block;
    position: relative;
    /* 上のリード文 .stocklist-section-lead との間隔（Figma: 40px） */
    margin-top: 40px;
  }

  .stocklist-category-select-toggle {
    display: flex;
    width: 100%;
    min-height: 44px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 19px;
    background: var(--ta-color-bg);
    border: 2px solid #c8d4e3; /* Figma 1200:7704 固有色（トークン未定義） */
    border-radius: 10px;
    font: 700 14px/1.7 var(--ta-font-family-ja); /* Figma指定14px（UI部品。本文16pxルール対象外） */
    letter-spacing: 1px;
    color: var(--primary-dark);
    text-align: left;
    cursor: pointer;
  }

  /* ホバー/フォーカスで反応をわかりやすく（ピルのhoverと同トーン） */
  .stocklist-category-select-toggle:hover,
  .stocklist-category-select-toggle:focus-visible {
    background: var(--ta-color-primary-pale);
    border-color: var(--ta-color-main);
  }

  .stocklist-category-select-icon {
    flex-shrink: 0;
    transition: transform 0.2s;
  }

  .stocklist-category-select-toggle[aria-expanded="true"] .stocklist-category-select-icon {
    transform: rotate(180deg);
  }

  .stocklist-category-select-menu {
    position: absolute;
    z-index: 10;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--ta-color-bg);
    border: 2px solid #c8d4e3; /* .stocklist-category-select-toggle と同色 */
    border-radius: 10px;
    overflow: hidden;
    box-shadow: var(--ta-shadow-card);
  }

  .stocklist-category-select-menu[hidden] {
    display: none;
  }

  .stocklist-category-select-option {
    display: block;
    padding: 10px 19px;
    font: 700 14px/1.7 var(--ta-font-family-ja); /* Figma指定14px（UI部品） */
    letter-spacing: 1px;
    color: var(--primary-dark);
    text-decoration: none;
  }

  .stocklist-category-select-menu li + li .stocklist-category-select-option {
    border-top: 1px solid var(--ta-color-border);
  }

  /* 項目の背景は白のまま（ユーザー指示 2026-07-14）。カーソル/フォーカス中のみ青背景+白文字で明示 */
  .stocklist-category-select-option:hover,
  .stocklist-category-select-option:focus-visible {
    background: var(--ta-color-main);
    color: var(--ta-color-bg);
  }
}

.stocklist-category-title {
  margin: 0;
  padding-left: 20px;
  border-left: 2px solid var(--ta-color-accent-light);
}

/* ------------------------------------------------------------
 * カードグリッド / カード
 * ---------------------------------------------------------- */
.stocklist-card-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px 12px;
  margin-top: 40px;
}

.stocklist-card {
  position: relative;
  display: flex;
  min-width: 0;
  /* 固定min-heightは廃止: カードの高さは中身+paddingにフィットさせる（ユーザー指示 2026-07-14） */
  box-sizing: border-box;
  flex-direction: column;
  align-items: center;
  /* 全ブレークポイント共通で上詰め（ユーザー指示 2026-07-14）。
   * 間隔はgapでなく __name/__ticker の margin-top で指定（銘柄名↔ティッカーだけ詰めるため） */
  justify-content: flex-start;
  gap: 0;
  padding: 20px 12px;
  background: var(--ta-color-bg);
  border: 2px solid var(--ta-color-card-border);
  border-radius: var(--ta-radius-l);
  box-shadow: var(--ta-shadow-card);
  overflow: hidden;
}

.stocklist-card__icon {
  display: block;
  width: 100px;
  max-width: 100%; /* SP 3列時のカード幅 < 100px でもはみ出さない */
  height: 80px;
  object-fit: contain;
}

/* 日経Wインバ(1357)・日経レバ(1570)のみ: 画像に薄い枠線（ユーザー指示 2026-07-14。index.php の icon_border フラグで付与） */
.stocklist-card__icon--border {
  border: 1px solid var(--ta-color-border);
}

.stocklist-card--flag .stocklist-card__icon {
  width: 93px;
  height: 70px;
}

.stocklist-card__name,
.stocklist-card__ticker {
  width: 100%;
  margin: 0;
  text-align: center;
  overflow-wrap: anywhere;
}

.stocklist-card__name {
  margin-top: 8px; /* アイコンとの間隔（.stocklist-card は gap: 0） */
}

.stocklist-card__ticker {
  margin-top: 1px; /* 銘柄名との間隔を詰める（ユーザー指示 2026-07-14） */
}

.stocklist-card__name-sp {
  display: none;
}

.stocklist-card__ticker {
  color: var(--ta-color-sub-text);
}

@media (max-width: 768px) {
  .stocklist-card--sp-name .stocklist-card__name-pc {
    display: none;
  }

  .stocklist-card__name-sp {
    display: inline;
  }

  /* SPカード縮小版: Figma StockCard_3 (QFcqeJvlvSqaaasp5ZzGFw node 1200:7521) 準拠
   * 文字11px・アイコン66x53（国旗60x45）・枠色 primary-pale。右下矢印アイコンはリンク先未定のため省略 */
  .stocklist-card {
    /* 上padding 12px: NEWリボン（幅60px・回転45度）はカード左上角の対角線上にあり、
     * 中央寄せのアイコン左上(x+y≈38px)はリボン帯(x+y≈33pxまで)と被らない */
    padding: 12px 8px 12px;
    /* 間隔はgapでなく各要素のmargin-topで指定（銘柄名↔ティッカーだけ詰めるため。__name/__ticker のルール参照） */
    gap: 0;
    border-color: var(--ta-color-primary-pale);
    /* 上詰め: アイコン→銘柄名→ティッカーを上から順に詰める（ユーザー指示 2026-07-14:
     * 銘柄名が1行のカードはティッカーもその分上に上がってよい。下端固定はしない） */
    justify-content: flex-start;
  }

  .stocklist-card__icon {
    /* Figmaサンプルは66x53。ユーザー指示でもう一回り縮小（比率維持） */
    width: 56px;
    height: 45px;
  }

  .stocklist-card--flag .stocklist-card__icon {
    /* Figmaサンプルは60x45。ユーザー指示でもう一回り縮小（4:3維持） */
    width: 52px;
    height: 39px;
  }

  .stocklist-card__name {
    font: 700 10.5px/1.3 var(--ta-font-family-ja); /* ユーザー指示 2026-07-14: SPは10.5px（カードUI部品） */
    letter-spacing: 1px;
    margin-top: 5px; /* アイコンとの間隔（.stocklist-card は gap: 0） */
  }

  .stocklist-card__ticker {
    font: 700 10.5px/1.7 var(--ta-font-family-ja); /* ユーザー指示 2026-07-14: SPは10.5px（カードUI部品） */
    letter-spacing: 1px;
    margin-top: 1px; /* 銘柄名との間隔を詰める（ユーザー指示 2026-07-14。.stocklist-card は gap: 0） */
  }
}

@media (max-width: 359px) {
  .stocklist-card-grid {
    grid-template-columns: 1fr;
  }
}

/* NEW リボン: Figma の回転ポリゴン装飾を CSS の角リボンで再現 */
.stocklist-card__ribbon {
  position: absolute;
  top: 9px;
  left: -25px;
  width: 88px;
  transform: rotate(-45deg);
  background: var(--ta-color-main);
  color: var(--ta-color-bg);
  font: var(--ta-type-caption);
  text-align: center;
  padding: 2px 0;
  pointer-events: none;
}

/* SPはNEWリボン（文字と青帯）を小型化（ユーザー指示 2026-07-14）。
 * 同一詳細度のため、必ず上の base 定義より後に置くこと（前に置くと打ち消される） */
@media (max-width: 768px) {
  .stocklist-card__ribbon {
    top: 4px;
    left: -17px;
    width: 60px;
    padding: 1px 0;
    font: 700 10px/1.4 var(--ta-font-family-ja); /* 青帯の太さ ≒ 10px×1.4+2px */
    letter-spacing: 0.5px;
  }
}

/* カテゴリ移動時にJSがセクションへフォーカスを移すが、セクション全体への
 * 青outline表示は「上下の青枠」に見えて紛らわしいため非表示（ユーザー指示 2026-07-14） */
.stocklist-index-section:focus-visible,
.stocklist-variety-nav-section:focus-visible,
.stocklist-category-section:focus-visible {
  outline: none;
}

@media (min-width: 769px) {
  .stocklist-index-section,
  .stocklist-variety-nav-section,
  .stocklist-category-section {
    scroll-margin-top: 112px;
  }
}

@media (min-width: 1040px) {
  .stocklist-inner {
    width: 1000px;
  }

  .stocklist-index-section,
  .stocklist-category-section {
    padding: 80px 0;
  }

  /* ユーザー指示 2026-07-14: padding-bottom 0 */
  .stocklist-variety-nav-section {
    padding: 80px 0 0;
  }

  /* ユーザー指示 2026-07-14: padding-bottom 0 */
  .stocklist-intro {
    padding: 40px 0 0;
  }

  .stocklist-main-link {
    min-height: 67px;
  }

  .stocklist-category-nav {
    /* 5ピルを必ず1行に収める（ユーザー指示 2026-07-14）。
     * gap 52px固定だと「コモディティ」で1000pxを超えるため space-between で分配 */
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  .stocklist-card-grid {
    grid-template-columns: repeat(3, 280px);
    justify-content: space-between;
    gap: 40px 0;
    margin-top: 80px;
  }

  .stocklist-card-grid--flags {
    grid-template-columns: repeat(4, 232px);
    gap: 30px 24px;
  }

  .stocklist-card {
    /* 固定高さ218pxを廃止し中身にフィット（ユーザー指示 2026-07-14: カード内の余白を無くす） */
    padding: 24px 20px;
  }

  .stocklist-card__name {
    margin-top: 13px; /* PCのアイコンとの間隔（旧gap 13px相当。ティッカーとの間隔は base の margin-top: 1px） */
  }

  .stocklist-card--flag {
    padding: 20px;
  }
}