/*
Theme Name: SHARETERIOR
Description: SHARETERIOR の表示テーマ。業務ロジックは shareterior-core プラグイン側に置く。
Version: 0.1.0
Requires PHP: 8.0
Text Domain: shareterior
*/

/* 仕様書 13.2 の配色をそのまま使う。ここ以外に色を書かない（散らばると直せなくなる） */
:root {
  --bg: #F7F4EE;        /* 背景・アイボリー */
  --text: #2C2A27;      /* 本文・チャコール */
  --sub: #9B948A;       /* サブ・ウォームグレー */
  --accent: #6F7658;    /* アクセント・オリーブ */
  --wood: #B88A5A;      /* 木目系・ライトブラウン */
  --line: #DCD5C9;      /* 区切り線。地の色から起こした薄い線 */
  --surface: #FFFFFF;
}

/* 仕様書 13.3 UI原則
   - 角丸・影を過剰に使わない → 使わない。区切りは1pxの線だけ
   - 余白を十分に取る
   - モバイルファースト
   - 文字サイズとコントラストを確保する
*/
* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent); }

.st-container { width: 100%; max-width: 1080px; margin: 0 auto; padding: 0 20px; }

/* ヘッダー */
.st-header { border-bottom: 1px solid var(--line); background: var(--bg); }
.st-header__inner { display: flex; align-items: baseline; gap: 20px; padding: 22px 0; }
.st-logo { font-size: 20px; letter-spacing: 0.16em; font-weight: 700; text-decoration: none; }
.st-logo__ja { font-size: 11px; letter-spacing: 0.24em; color: var(--sub); margin-left: 10px; }
.st-nav { margin-left: auto; display: flex; gap: 22px; font-size: 13px; }
.st-nav a { text-decoration: none; }

/* 見出し */
.st-h1 { font-size: 26px; line-height: 1.5; font-weight: 700; margin: 36px 0 12px; }
.st-h2 { font-size: 19px; line-height: 1.6; font-weight: 700; margin: 40px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.st-lead { color: var(--sub); font-size: 14px; margin-bottom: 28px; }

/* コーディネート一覧 */
.st-cards { display: grid; grid-template-columns: 1fr; gap: 28px; margin: 28px 0 56px; }
.st-card { background: var(--surface); border: 1px solid var(--line); }
.st-card__body { padding: 18px 18px 22px; }
.st-card__title { font-size: 17px; font-weight: 700; line-height: 1.6; }
.st-card__title a { text-decoration: none; }
.st-card__meta { font-size: 12px; color: var(--sub); margin-top: 6px; }

/* 合計金額。仕様書13.3「合計金額を常に分かりやすく」。ただしCTAより目立たせない */
.st-total { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); display: flex; align-items: baseline; gap: 10px; }
.st-total__label { font-size: 12px; color: var(--sub); letter-spacing: 0.08em; }
.st-total__value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.st-total__note { font-size: 11px; color: var(--sub); }

/* 商品の並び */
.st-items { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); margin-top: 28px; }
.st-item { display: grid; grid-template-columns: 88px 1fr; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); align-items: start; }
.st-item__role { font-size: 11px; color: var(--sub); letter-spacing: 0.08em; }
.st-item__name { font-size: 15px; font-weight: 600; line-height: 1.6; margin-top: 2px; }
.st-item__price { font-size: 15px; font-variant-numeric: tabular-nums; margin-top: 6px; }
.st-item__soldout { font-size: 12px; color: var(--sub); }

/* 購入リンク。画像より目立ちすぎない大きさに留める（仕様書13.3） */
.st-buy {
  display: inline-block; margin-top: 10px; padding: 9px 18px;
  background: var(--accent); color: #fff; text-decoration: none;
  font-size: 13px; font-weight: 600; letter-spacing: 0.04em;
}
.st-buy:hover { color: #fff; opacity: 0.88; }

/* 絞り込み */
.st-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 8px; }
.st-filter {
  display: inline-block; padding: 7px 14px; font-size: 13px; text-decoration: none;
  border: 1px solid var(--line); background: var(--surface);
}
.st-filter.is-active { border-color: var(--text); font-weight: 700; }

/* 注意書き */
.st-note { font-size: 12px; color: var(--sub); margin-top: 10px; }

/* フッター */
.st-footer { border-top: 1px solid var(--line); margin-top: 64px; padding: 28px 0 48px; font-size: 12px; color: var(--sub); }

/* タブレット以上 */
@media (min-width: 768px) {
  .st-cards { grid-template-columns: 1fr 1fr; gap: 32px; }
  .st-h1 { font-size: 32px; }
  .st-item { grid-template-columns: 120px 1fr; }
}
@media (min-width: 1024px) {
  .st-cards { grid-template-columns: 1fr 1fr 1fr; }
}
/* 楽天での商品名の併記（2026-09-08 TAICHI）。見出しは短く、元名はここで必ず見せる。
   角丸・影・左の色帯は使わない（CCC 2026-09-02ルール）。 */
.st-source-name{margin:14px 0 0;padding:10px 12px;border:1px solid #CCCCCC;background:#F8F8FB;
  font-size:13px;line-height:1.7;color:#4D4D4D;word-break:break-all}
.st-source-name__label{display:block;font-weight:700;color:#1A1A1C;margin-bottom:2px}