/* ============================================================
   MAKKYON WEB — mk-components.css
   Design System v3 | 2025

   使い方:
   - SWELLの子テーマ css/ フォルダに置いてfunctions.phpで読み込む
   - または 外観 > カスタマイズ > 追加CSS に貼り付ける

   クラス命名規則: mk- 接頭辞で統一
   色は4トークンのみ: blue / green / orange / gray
   ============================================================ */


/* ------------------------------------------------------------
   0. カラートークン
   ------------------------------------------------------------ */
:root {
  /* ブルー — レビュー・情報・おすすめ */
  --mk-blue-bg:    #E6F1FB;
  --mk-blue-mid:   #378ADD;
  --mk-blue-text:  #0C447C;

  /* グリーン — レビュー済み */
  --mk-green-bg:   #E1F5EE;
  --mk-green-mid:  #1D9E75;
  --mk-green-text: #085041;

  /* オレンジ — セール・価格・Amazon */
  --mk-orange-bg:  #FAEEDA;
  --mk-orange-mid: #EF9F27;
  --mk-orange-text:#633806;

  /* グレー — 予定・中立 */
  --mk-gray-bg:    #F1EFE8;
  --mk-gray-mid:   #888780;
  --mk-gray-text:  #444441;

  /* レッド — 価格下落表示のみ */
  --mk-red-bg:     #FCEBEB;
  --mk-red-mid:    #E24B4A;
  --mk-red-text:   #A32D2D;

  /* レイアウト */
  --mk-radius:     12px;
  --mk-radius-sm:  7px;
  --mk-gap:        1rem;
  --mk-gap-sm:     0.625rem;
}


/* ------------------------------------------------------------
   1. バッジ
   <span class="mk-badge mk-badge--green">
     <svg ...></svg>レビュー済み
   </span>
   ------------------------------------------------------------ */
.mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 8px;
  border-radius: 4px;
  white-space: nowrap;
  line-height: 1.4;
  border: 0.5px solid;
  vertical-align: middle;
}
.mk-badge svg {
  width: 11px;
  height: 11px;
  flex-shrink: 0;
}

.mk-badge--green  { background: var(--mk-green-bg);  color: var(--mk-green-text);  border-color: var(--mk-green-mid); }
.mk-badge--blue   { background: var(--mk-blue-bg);   color: var(--mk-blue-text);   border-color: var(--mk-blue-mid); }
.mk-badge--orange { background: var(--mk-orange-bg); color: var(--mk-orange-text); border-color: var(--mk-orange-mid); }
.mk-badge--gray   { background: var(--mk-gray-bg);   color: var(--mk-gray-text);   border-color: var(--mk-gray-mid); }
.mk-badge--red    { background: var(--mk-red-bg);    color: var(--mk-red-text);    border-color: var(--mk-red-mid); }

/* カード内バッジは少し小さく */
.mk-card .mk-badge {
  font-size: 10px;
  padding: 2px 6px;
}


/* ------------------------------------------------------------
   2. 使用期間チップ
   <span class="mk-use-chip">3年間愛用中</span>
   ------------------------------------------------------------ */
.mk-use-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--mk-gray-text);
  background: rgba(255, 255, 255, 0.9);
  border: 0.5px solid rgba(0, 0, 0, 0.12);
  border-radius: 20px;
  padding: 2px 9px;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  white-space: nowrap;
}
.mk-use-chip svg {
  width: 11px;
  height: 11px;
  color: var(--mk-green-mid);
  flex-shrink: 0;
}


/* ------------------------------------------------------------
   3. セクション見出し
   <div class="mk-heading">
     <div class="mk-heading__icon mk-heading__icon--green">
       <svg ...></svg>
     </div>
     <div>
       <div class="mk-heading__title">タイトル</div>
       <div class="mk-heading__sub">サブタイトル</div>
     </div>
   </div>
   ------------------------------------------------------------ */
.mk-heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 0.75rem;
  border-bottom: 1.5px solid #e0ded6;
  margin-bottom: 1.25rem;
}

.mk-heading__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.mk-heading__icon svg {
  width: 17px;
  height: 17px;
}

.mk-heading__icon--green  { background: var(--mk-green-bg);  color: var(--mk-green-text); }
.mk-heading__icon--blue   { background: var(--mk-blue-bg);   color: var(--mk-blue-text); }
.mk-heading__icon--orange { background: var(--mk-orange-bg); color: var(--mk-orange-text); }
.mk-heading__icon--gray   { background: var(--mk-gray-bg);   color: var(--mk-gray-text); }

.mk-heading__title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  margin: 0;
  line-height: 1.3;
}
.mk-heading__sub {
  font-size: 0.75rem;
  color: var(--mk-gray-mid);
  margin-top: 2px;
}


/* ------------------------------------------------------------
   4. 商品カード — 共通ベース
   HTML構造は縦型・横型・Featured で完全共通
   クラスの組み合わせで見た目が変わる
   ------------------------------------------------------------ */
.mk-card {
  background: #fff;
  border: 0.5px solid #e8e6df;
  border-radius: var(--mk-radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* --- アクセントカラー（上ボーダー：縦型デフォルト） --- */
.mk-card--green  { border-top: 2px solid var(--mk-green-mid); }
.mk-card--blue   { border-top: 2px solid var(--mk-blue-mid); }
.mk-card--orange { border-top: 2px solid var(--mk-orange-mid); }
.mk-card--gray   { border-top: 2px solid var(--mk-gray-mid); }


/* ------------------------------------------------------------
   4a. 縦型カード
   <div class="mk-card mk-card--v mk-card--green">
   ------------------------------------------------------------ */
.mk-card--v {
  /* flex-direction: column はベースで設定済み */
}

.mk-card--v .mk-card__img {
  aspect-ratio: 4 / 3;
  background: #f5f3ec;
  position: relative;
  overflow: hidden;
}
.mk-card--v .mk-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.2s ease;
}
.mk-card--v:hover .mk-card__img img {
  transform: scale(1.03);
}

.mk-card--v .mk-card__body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 9px;
  flex: 1;
}


/* ------------------------------------------------------------
   4b. 横型カード
   <div class="mk-card mk-card--h mk-card--green">
   ------------------------------------------------------------ */
.mk-card--h {
  flex-direction: row;
  border-top: none;
  border-left: 3px solid #e8e6df; /* デフォルト、色クラスで上書き */
}

/* 横型のアクセント: 左ボーダーに変更 */
.mk-card--h.mk-card--green  { border-left-color: var(--mk-green-mid); }
.mk-card--h.mk-card--blue   { border-left-color: var(--mk-blue-mid); }
.mk-card--h.mk-card--orange { border-left-color: var(--mk-orange-mid); }
.mk-card--h.mk-card--gray   { border-left-color: var(--mk-gray-mid); }

.mk-card--h .mk-card__img {
  width: 200px;
  flex-shrink: 0;
  background: #f5f3ec;
  position: relative;
  overflow: hidden;
}
.mk-card--h .mk-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.mk-card--h .mk-card__body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}


/* ------------------------------------------------------------
   4c. Featuredカード（横型の拡張）
   <div class="mk-card mk-card--h mk-card--featured mk-card--green">
   ------------------------------------------------------------ */
.mk-card--featured .mk-card__img {
  width: 240px;
}
.mk-card--featured .mk-card__body {
  padding: 20px 22px;
  gap: 12px;
}
.mk-card--featured .mk-card__name {
  font-size: 1rem;
}
.mk-card--featured .mk-card__memo-text {
  font-size: 0.875rem;
  line-height: 1.8;
}
.mk-card--featured .mk-card__actions .mk-btn {
  padding: 8px 16px;
  font-size: 0.8125rem;
}


/* ------------------------------------------------------------
   4d. カード内共通パーツ
   ------------------------------------------------------------ */

/* バッジ群（画像オーバーレイ） */
.mk-card__badges {
  position: absolute;
  top: 8px;
  left: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  z-index: 1;
}

/* 使用期間チップ（画像オーバーレイ） */
.mk-card__use {
  position: absolute;
  bottom: 8px;
  left: 8px;
  z-index: 1;
}

/* 商品名 */
.mk-card__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  line-height: 1.35;
  margin: 0;
}

/* 編集メモ — カード内最重要要素 */
.mk-card__memo {
  background: #faf9f6;
  border-radius: var(--mk-radius-sm);
  padding: 10px 12px;
  border: 0.5px solid #e8e6df;
  flex: 1;
}
.mk-card__memo-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--mk-blue-text);
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.mk-card__memo-label svg {
  width: 10px;
  height: 10px;
  flex-shrink: 0;
}
.mk-card__memo-text {
  font-size: 0.8125rem;
  color: #2a2826;
  line-height: 1.75;
}

/* 価格 */
.mk-card__price {
  display: flex;
  align-items: baseline;
  gap: 7px;
  flex-wrap: wrap;
}
.mk-card__price-sale {
  font-size: 1rem;
  font-weight: 600;
  color: var(--mk-red-text);
}
.mk-card__price-reg {
  font-size: 0.75rem;
  color: var(--mk-gray-mid);
  text-decoration: line-through;
}
.mk-card__discount {
  font-size: 0.6875rem;
  font-weight: 600;
  background: var(--mk-red-bg);
  color: var(--mk-red-text);
  padding: 1px 5px;
  border-radius: 3px;
}

/* アクション（ボタン行） */
.mk-card__actions {
  display: flex;
  gap: 6px;
  padding-top: 10px;
  border-top: 0.5px solid #e8e6df;
  margin-top: auto;
  flex-wrap: wrap;
  align-items: center;
}
/* 縦型はボタンを縦積み */
.mk-card--v .mk-card__actions {
  flex-direction: column;
}
.mk-card--v .mk-card__actions .mk-btn {
  width: 100%;
  justify-content: center;
}

/* 横型・Featuredは価格を左、ボタンを右 */
.mk-card--h .mk-card__price {
  margin-right: auto;
}


/* ------------------------------------------------------------
   5. CTAボタン
   <a href="#" class="mk-btn mk-btn--green">レビューを見る</a>
   ------------------------------------------------------------ */
.mk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 7px 14px;
  border-radius: 6px;
  text-decoration: none;
  border: 0.5px solid;
  cursor: pointer;
  line-height: 1;
  font-family: inherit;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.mk-btn:hover { opacity: 0.8; }
.mk-btn svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
}

.mk-btn--primary { background: #1e1e1c; color: #f5f3ec;            border-color: #1e1e1c; }
.mk-btn--green   { background: var(--mk-green-bg);  color: var(--mk-green-text);  border-color: var(--mk-green-mid); }
.mk-btn--orange  { background: var(--mk-orange-bg); color: var(--mk-orange-text); border-color: var(--mk-orange-mid); }
.mk-btn--blue    { background: var(--mk-blue-bg);   color: var(--mk-blue-text);   border-color: var(--mk-blue-mid); }
.mk-btn--ghost   { background: transparent;         color: var(--mk-gray-text);   border-color: #e8e6df; }


/* ------------------------------------------------------------
   6. カテゴリーカード
   <a href="#" class="mk-cat">
     <div class="mk-cat__icon mk-cat__icon--orange">SVG</div>
     <div>
       <div class="mk-cat__label">USB充電器</div>
       <div class="mk-cat__count">8製品</div>
     </div>
   </a>
   ------------------------------------------------------------ */
.mk-cat {
  background: #fff;
  border: 0.5px solid #e8e6df;
  border-radius: var(--mk-radius);
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.mk-cat:hover { border-color: #b4b2a9; }

.mk-cat__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mk-cat__icon svg {
  width: 20px;
  height: 20px;
}

.mk-cat__icon--green  { background: var(--mk-green-bg);  color: var(--mk-green-text); }
.mk-cat__icon--blue   { background: var(--mk-blue-bg);   color: var(--mk-blue-text); }
.mk-cat__icon--orange { background: var(--mk-orange-bg); color: var(--mk-orange-text); }
.mk-cat__icon--gray   { background: var(--mk-gray-bg);   color: var(--mk-gray-text); }

.mk-cat__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  line-height: 1.3;
}
.mk-cat__count {
  font-size: 0.6875rem;
  color: var(--mk-gray-mid);
  margin-top: 2px;
}


/* ------------------------------------------------------------
   7. ページレイアウト補助クラス
   ------------------------------------------------------------ */

/* カードグリッド — 縦型 */
.mk-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mk-gap);
}

/* カテゴリーカードグリッド */
.mk-cat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--mk-gap-sm);
}

/* 横型カードの縦並び */
.mk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--mk-gap);
}

/* セクション間の余白 */
.mk-section {
  margin-bottom: 3rem;
}
.mk-section + .mk-section {
  padding-top: 2rem;
  border-top: 1px solid #e8e6df;
}

/* Hero */
.mk-hero {
  background: #faf9f6;
  border: 0.5px solid #e8e6df;
  border-radius: var(--mk-radius);
  overflow: hidden;
  margin-bottom: 2.5rem;
}
.mk-hero__img {
  aspect-ratio: 21 / 8;
  overflow: hidden;
  background: #f1efe8;
}
.mk-hero__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mk-hero__body {
  padding: 1.75rem 2rem;
}
.mk-hero__eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mk-orange-text);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mk-hero__eyebrow::before {
  content: '';
  display: block;
  width: 20px;
  height: 1.5px;
  background: var(--mk-orange-mid);
}
.mk-hero__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--c-text, #1e1e1c);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}
.mk-hero__sub {
  font-size: 0.875rem;
  color: #5a5855;
  line-height: 1.75;
  margin: 0 0 1.25rem;
}
.mk-hero__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.mk-hero__date {
  font-size: 0.6875rem;
  color: var(--mk-gray-mid);
}

/* 編集長より */
.mk-editor-note {
  border: 0.5px solid #e8e6df;
  border-radius: var(--mk-radius);
  padding: 1.5rem 1.75rem;
  margin-bottom: 2.5rem;
  display: flex;
  gap: 16px;
  background: #fff;
}
.mk-editor-note__avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--mk-blue-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 600;
  color: var(--mk-blue-text);
  flex-shrink: 0;
  margin-top: 2px;
}
.mk-editor-note__label {
  font-size: 0.6875rem;
  font-weight: 600;
  color: var(--mk-gray-mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 5px;
}
.mk-editor-note__text {
  font-size: 0.875rem;
  color: #2a2826;
  line-height: 1.85;
}

/* 関連記事カード */
.mk-related {
  background: #fff;
  border: 0.5px solid #e8e6df;
  border-radius: 9px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  transition: border-color 0.15s;
}
.mk-related:hover { border-color: #b4b2a9; }
.mk-related__img {
  width: 64px;
  height: 64px;
  border-radius: 6px;
  background: #f1efe8;
  overflow: hidden;
  flex-shrink: 0;
}
.mk-related__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.mk-related__title {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--c-text, #1e1e1c);
  line-height: 1.45;
}
.mk-related__cat {
  font-size: 0.6875rem;
  color: var(--mk-gray-mid);
  margin-top: 3px;
}

/* フッターCTA */
.mk-footer-cta {
  background: #faf9f6;
  border: 0.5px solid #e8e6df;
  border-radius: var(--mk-radius);
  padding: 2rem 1.5rem;
  text-align: center;
  margin-top: 3rem;
}
.mk-footer-cta__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--c-text, #1e1e1c);
  margin: 0 0 0.4rem;
}
.mk-footer-cta__sub {
  font-size: 0.8125rem;
  color: var(--mk-gray-mid);
  margin: 0 0 1.25rem;
}
.mk-footer-cta__btns {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
}

/* セクション区切り */
.mk-divider {
  height: 1px;
  background: #e8e6df;
  margin: 3rem 0;
  border: none;
}


/* ------------------------------------------------------------
   8. レスポンシブ
   ------------------------------------------------------------ */

/* タブレット（〜900px） */
@media (max-width: 900px) {
  .mk-grid         { grid-template-columns: repeat(3, 1fr); }
  .mk-cat-grid     { grid-template-columns: repeat(3, 1fr); }
  .mk-card--h .mk-card__img,
  .mk-card--featured .mk-card__img { width: 180px; }
  .mk-hero__body   { padding: 1.25rem 1.5rem; }
}

/* スマホ（〜600px） */
@media (max-width: 600px) {
  .mk-grid         { grid-template-columns: repeat(2, 1fr); }
  .mk-cat-grid     { grid-template-columns: repeat(2, 1fr); }

  /* 横型・Featuredはスマホで縦積みに変換 */
  .mk-card--h,
  .mk-card--featured {
    flex-direction: column;
    border-left: none;
    border-top: 2px solid #e8e6df;
  }
  .mk-card--h.mk-card--green,
  .mk-card--featured.mk-card--green   { border-top-color: var(--mk-green-mid); }
  .mk-card--h.mk-card--blue,
  .mk-card--featured.mk-card--blue    { border-top-color: var(--mk-blue-mid); }
  .mk-card--h.mk-card--orange,
  .mk-card--featured.mk-card--orange  { border-top-color: var(--mk-orange-mid); }
  .mk-card--h.mk-card--gray,
  .mk-card--featured.mk-card--gray    { border-top-color: var(--mk-gray-mid); }

  .mk-card--h .mk-card__img,
  .mk-card--featured .mk-card__img {
    width: 100%;
    aspect-ratio: 16 / 9;
  }
  .mk-card--h .mk-card__body,
  .mk-card--featured .mk-card__body {
    padding: 14px 16px;
  }
  .mk-card--h .mk-card__actions {
    flex-direction: column;
  }
  .mk-card--h .mk-card__price {
    margin-right: 0;
  }
  .mk-card--h .mk-card__actions .mk-btn {
    width: 100%;
    justify-content: center;
  }

  .mk-hero__title  { font-size: 1.125rem; }
  .mk-hero__body   { padding: 1rem 1.25rem; }
  .mk-editor-note  { flex-direction: column; gap: 10px; }
  .mk-section      { margin-bottom: 2rem; }
  .mk-divider      { margin: 2rem 0; }
}

/* 動作低減 */
@media (prefers-reduced-motion: reduce) {
  .mk-card--v .mk-card__img img { transition: none; }
  .mk-btn { transition: none; }
}