/* 推しモノ「今日の推しモノ」共通スタイル
   設計正本: docs/SITE_DESIGN_PROPOSALS_2026-07-18.md 案1(§5)+ワイヤー(§8)
   トークンは現行LP(世界観A セージ・ミニマル)を継承 */
:root {
  color-scheme: light;
  --bg: #F3EEE3;      /* メイン: 生成り(本人選択2026-07-18・リール動画の紙ジン風と同一背景=動画→サイトの世界観連続) */
  --ink: #202726;     /* サブ: チャコール(文字・CTA) */
  --sage: #77918E;    /* アクセント: セージ(★・バッジ・リンク) */
  --muted: #8A9895;
  --sub: #5F6E6B;
  --line: #DDE4E2;
  --border: #E3E8E6;
  --surface: #FFFFFF;
  --surface2: #EDF1F0;
  /* 角丸は3段+ピルのみ(場所ごとのバラバラ値を禁止=統一感の担保) */
  --r-img: 14px;   /* 大きな面: FV画像・IGボックス */
  --r-card: 12px;  /* カード・セクション枠 */
  --r-btn: 9px;    /* ボタン */
  --r-pill: 999px; /* チップ・バッジ・日付ラベル */
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  /* Zen Maru Gothic(丸ゴシック・OFL)=本人選択B 2026-07-19。
     端末デフォルトだと環境で見た目が割れるため、Webフォントで全端末統一 */
  font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans",
               "Yu Gothic UI", "Noto Sans JP", "Meiryo", sans-serif;
  background: var(--bg); color: var(--ink);
  max-width: 480px; margin: 0 auto; padding: 0 16px 28px;
  line-height: 1.6; -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
img { max-width: 100%; height: auto; display: block; }

/* 共通ヘッダー/PR/フッター */
.site-head { text-align: center; padding: 26px 0 10px; }
.brand { font-size: 22px; font-weight: 700; letter-spacing: 6px; text-indent: 6px; text-decoration: none; }
.tagline { font-size: 12px; color: var(--muted); letter-spacing: 1px; margin-top: 6px; }
.pr-note {
  font-size: 11px; color: var(--muted); text-align: center;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 8px 0; margin-bottom: 14px;
}
footer { font-size: 10px; color: #9AA6A3; text-align: center; line-height: 1.9; margin-top: 26px; }
.foot-nav { margin-bottom: 8px; }
.foot-nav a { color: var(--sub); font-size: 11px; }

/* FV(今日の推しモノ) */
.hero { text-align: center; padding: 6px 0 8px; }
.hero .date {
  font-size: 13px; color: var(--sub); letter-spacing: 2px;
  font-variant-numeric: tabular-nums;
  animation: flip-in .6s ease-out 1 both; transform-origin: top center;
}
.hero-title { font-size: 20px; font-weight: 700; letter-spacing: 2px; margin-top: 2px; }
.hero-img { display: block; margin: 12px 0 0; }
.hero-img img {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover;
  border-radius: var(--r-img); border: 1px solid var(--border); background: #E7ECEA;
}
.oshi-comment { font-size: 17px; font-weight: 700; line-height: 1.7; margin-top: 14px; }
.hero-name { font-size: 12px; color: var(--sub); margin-top: 6px; }
.proof { font-size: 12px; color: var(--sage); margin-top: 7px; }
.band {
  display: inline-block; border: 1px solid var(--sage); color: var(--sage);
  border-radius: var(--r-pill); font-size: 10px; padding: 1px 8px; margin-left: 6px; vertical-align: 1px;
}
.btn {
  display: block; text-align: center; background: var(--ink); color: #FFFFFF;
  font-size: 13px; padding: 13px 0; border-radius: var(--r-btn);
  text-decoration: none; margin-top: 12px;
}
.more-link { display: inline-block; font-size: 11px; color: var(--sub); margin-top: 10px; }
.scroll-cue { font-size: 11px; color: var(--muted); margin-top: 16px; letter-spacing: 1px; }
.policy-line { text-align: center; font-size: 11px; margin: 14px 0 4px; }
.policy-line a { color: var(--sub); }

/* カテゴリチップ+アーカイブ */
.chips { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 14px 0 4px; }
.chip {
  border: 1px solid var(--border); background: var(--surface); color: var(--sub);
  font-size: 11px; padding: 5px 12px; border-radius: var(--r-pill);
}
.chip.on { border-color: var(--sage); color: var(--sage); }
.archive { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.a-card {
  position: relative; display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-card); overflow: hidden; text-decoration: none;
}
.a-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; background: #E7ECEA; }
.a-date {
  position: absolute; top: 6px; left: 6px; background: rgba(255,255,255,.92);
  color: var(--sub); font-size: 10px; padding: 2px 7px; border-radius: var(--r-pill);
  font-variant-numeric: tabular-nums;
}
.a-proof { display: block; color: var(--sage); font-size: 11px; padding: 6px 8px; }
.a-card.hide { display: none; }
.more-btn {
  display: block; width: 100%; margin-top: 12px; background: var(--surface);
  border: 1px solid var(--border); color: var(--sub); font-size: 12px;
  padding: 11px 0; border-radius: var(--r-btn);
}
/* display:block が UA の [hidden]{display:none} を上書きしてしまうため明示する
   (hidden属性はJSが10件超の時だけ外す=初期状態・10件以下では出さない) */
.more-btn[hidden] { display: none; }

/* 商品詳細 */
.detail { padding-top: 4px; }
.detail .date { font-size: 12px; color: var(--sub); font-variant-numeric: tabular-nums; }
.d-name { font-size: 17px; font-weight: 700; line-height: 1.5; margin-top: 4px; }
.gallery { margin-top: 12px; display: grid; gap: 10px; }
.gallery img { width: 100%; border-radius: var(--r-card); border: 1px solid var(--border); background: #E7ECEA; }
.d-sec {
  margin-top: 16px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-card); padding: 13px 15px;
}
.d-sec h2 { font-size: 13px; color: var(--sub); margin-bottom: 6px; }
.points { list-style: none; }
.points li { font-size: 13px; line-height: 1.9; }
.honest p { font-size: 13px; color: var(--sub); line-height: 1.8; }
.back-link { display: inline-block; font-size: 12px; color: var(--sub); margin-top: 18px; }

/* 空状態 */
.empty { text-align: center; padding: 40px 8px 34px; }
.empty h2 { font-size: 15px; font-weight: 700; }
.empty p { font-size: 12px; color: var(--muted); margin-top: 10px; line-height: 2; }

/* IGフォロー */
.ig { background: var(--surface2); border-radius: var(--r-img); text-align: center; padding: 18px 16px; margin: 18px 0; }
.ig p { font-size: 12px; color: var(--sub); }
.ig-btn {
  display: inline-block; border: 1px solid var(--sage); color: #4E6360;
  font-size: 12px; padding: 8px 18px; border-radius: var(--r-pill);
  text-decoration: none; margin-top: 10px;
}

/* sticky CTA(詳細ページのみ・§5案1) */
.sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; max-width: 480px; margin: 0 auto;
  background: rgba(255,255,255,.96); border-top: 1px solid var(--line);
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  animation: rise .2s ease-out 1 both;
}
.sticky-cta .btn { margin-top: 0; }
body.has-sticky { padding-bottom: 92px; }

/* policyページ */
.policy h1 { font-size: 17px; margin-top: 8px; }
.policy h2 { font-size: 14px; margin-top: 18px; }
.policy p, .policy li { font-size: 13px; line-height: 1.9; }
.policy ul, .policy ol { padding-left: 1.3em; margin-top: 4px; }
.policy .note { font-size: 11px; color: var(--sub); margin-top: 14px; }

/* アニメーション(機能的最小限・§4-1#10) */
@keyframes flip-in { from { transform: rotateX(65deg); opacity: 0; } }
@keyframes rise { from { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}