/* ========================================
 * LOCONDO 商品カード埋め込み (サンキュ！記事本文内)
 *
 * 連携:
 *   - output-catalog-39.js が Handlebars 描画後、以下のDOM構造を生成する想定
 *   - 子テーマ 39mag-child/assets/css/common.css の :root トークンを利用
 *     (フォールバック値は子テーマ現行値と同値)
 *
 * Breakpoint ルール (サンキュ！既存 CSS に準拠):
 *   - SP (default):             max-width: 767px
 *   - TB (tablet / PC narrow):  min-width: 768px
 *   - PC (desktop):             min-width: 1024px
 *
 * font-size / spacing のプリミティブ rem 値:
 *   サンキュ！のトークン系には font-size scale / spacing scale が未整備のため、
 *   rem 直値で表現している (サンキュ！の補足/meta 帯 10-15px に準拠)。
 * ======================================== */

.catalogOutput_List {
  list-style: none;
  margin: 1.6rem 0;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}

.catalogOutput_List_Item {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg-gray, #f8f8fa);
  border-radius: var(--radius-10, 10px);
  align-items: center;
}

/* --- サムネイル (ファッション写真に合わせて 3:4 portrait) --- */
.catalogOutput_itemImg {
  aspect-ratio: 3 / 4;
  overflow: hidden;
  border-radius: var(--radius-thumbnail, 6px);
  background: var(--bg-color, #ffffff);
}

.catalogOutput_List_link {
  display: block;
  width: 100%;
  height: 100%;
}

.catalogOutput_itemImg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.catalogOutput_List_link:focus-visible {
  outline: 2px solid var(--color-main, #47a0aa);
  outline-offset: 2px;
}

/* --- テキスト側 --- */
.catalogOutput_text {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}

.catalogOutput_brandname {
  font-size: 1rem;
  color: var(--color-third, #666666);
  letter-spacing: var(--letter-space-tight, 0.02em);
  font-weight: var(--font-normal-weight, 400);
}

.catalogOutput_commodityname {
  font-size: 1.1rem;
  color: var(--color-text, #444c4c);
  line-height: 1.5;
  font-weight: var(--font-sub-weight, 500);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: break-word;
}

.catalogOutput_price {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.4rem;
  font-weight: var(--font-strong-weight, 700);
}

.catalogOutput_price .price {
  font-size: 1.3rem;
  color: var(--color-text, #444c4c);
}

.catalogOutput_price .old_price {
  font-size: 1rem;
  color: var(--color-second, #999999);
  text-decoration: line-through;
  font-weight: var(--font-normal-weight, 400);
}

.catalogOutput_price .special_price {
  /* サンキュ！に sale/price 用の赤トークン無し。BLUE SINCERE の同テンプレ実装 (#ED143D) に揃える */
  color: #ED143D;
  font-size: 1.3rem;
}

/* --- CTA: サンキュ！既存のボタン青 (--color-button-blue) を使用 ---
 * HTML 側で .mag-btn クラスを併用することで、single-article.css の
 * `.article-content a:where(:not(.mag-btn)...)` から除外され、
 * 青色・下線 !important が適用されない。このため本セレクタに !important は不要。
 */
.catalog_list_more_btn {
  align-self: flex-start;
  margin-top: 0.4rem;
  padding: 0.5rem 1.2rem;
  background: var(--color-button-blue, #1967d2);
  color: var(--color-text-sub, #ffffff);
  border-radius: var(--radius-button-primary, 100px);
  font-size: 1rem;
  font-weight: var(--font-bold-weight, 600);
  letter-spacing: var(--letter-space-normal, 0.04em);
  line-height: 1;
  transition: opacity 0.2s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

/* 外部リンクアイコン (common.css footer-meta-links::after と同形の Phosphor ArrowSquareOut / 白色) */
.catalog_list_more_btn[target="_blank"]::after {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  margin-left: 0.25em;
  vertical-align: -0.1em;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%23ffffff' viewBox='0 0 256 256'%3E%3Cpath d='M224,104a8,8,0,0,1-16,0V59.32l-66.33,66.34a8,8,0,0,1-11.32-11.32L196.68,48H152a8,8,0,0,1,0-16h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z'%3E%3C/path%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.catalog_list_more_btn:hover,
.catalog_list_more_btn:focus-visible {
  opacity: 0.85;
}

.catalog_list_more_btn:focus-visible {
  outline: 2px solid var(--color-main, #47a0aa);
  outline-offset: 2px;
}

/* ========================================
 * TB (tablet / PC narrow) — min-width: 768px
 * ======================================== */
@media screen and (min-width: 768px) {
  .catalogOutput_List {
    margin: 2rem 0;
    gap: 1rem;
  }

  .catalogOutput_List_Item {
    grid-template-columns: 140px 1fr;
    padding: 1.2rem;
    gap: 1.6rem;
  }

  .catalogOutput_brandname {
    font-size: 1.1rem;
  }

  .catalogOutput_commodityname {
    font-size: 1.2rem;
  }

  .catalogOutput_price .price,
  .catalogOutput_price .special_price {
    font-size: 1.4rem;
  }

  .catalogOutput_price .old_price {
    font-size: 1.1rem;
  }

  .catalog_list_more_btn {
    font-size: 1.1rem;
    padding: 0.55rem 1.4rem;
  }
}

/* ========================================
 * PC (desktop) — min-width: 1024px
 * ======================================== */
@media screen and (min-width: 1024px) {
  .catalogOutput_List {
    margin: 2.4rem 0;
    gap: 1.2rem;
  }

  .catalogOutput_List_Item {
    grid-template-columns: 170px 1fr;
    padding: 1.6rem;
    gap: 2rem;
  }

  .catalogOutput_brandname {
    font-size: 1.2rem;
  }

  .catalogOutput_commodityname {
    font-size: 1.3rem;
  }

  .catalogOutput_price .price,
  .catalogOutput_price .special_price {
    font-size: 1.5rem;
  }

  .catalogOutput_price .old_price {
    font-size: 1.2rem;
  }

  .catalog_list_more_btn {
    font-size: 1.2rem;
    padding: 0.6rem 1.6rem;
  }
}