/* ==========================================================================
   03-components.css — ボタン・カード・バッジ等の共通部品
   【触らない領域】部品の見た目を変える場合はここではなく00-tokens.cssの
   色・余白の値を調整することで対応してください。
   ========================================================================== */

/* ---- ボタン ---- */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 13px 24px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  min-height: 44px;
  transition: transform .15s ease, box-shadow .15s ease;
}
.btn:active{ transform: scale(.97); }

.btn-primary{
  background: var(--color-primary);
  color: #fff;
  box-shadow: var(--shadow-card);
}
.btn-outline{
  background: transparent;
  color: #fff;
  border: 1.5px solid rgba(255,255,255,.75);
}

/* ---- セクション見出し ---- */
.section-head{
  margin-bottom: var(--space-6);
  max-width: 60ch;
}
.section-eyebrow{
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: .16em;
  color: var(--color-primary);
  margin-bottom: var(--space-2);
}
.section-head h2{
  font-size: clamp(22px, 4vw, 30px);
}
.section-desc{
  margin-top: var(--space-3);
  color: var(--color-ink-soft);
  font-size: 14.5px;
}

/* ---- バッジ ---- */
.badge{
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--color-secondary-soft);
  color: var(--color-secondary);
}
.badge-gold{
  background: var(--color-gold-soft);
  color: var(--color-gold);
}

/* ---- カード基底（メニュー／口コミ／季節メニューが継承） ---- */
.card{
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-m);
  overflow: hidden;
  box-shadow: var(--shadow-card);
}

/* ---- 画像プレースホルダー枠（読み込み前の面積確保） ---- */
.media-frame{
  aspect-ratio: 4 / 3;
  background: var(--color-surface-2);
  overflow: hidden;
}
.media-frame img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ---- 星評価 ---- */
.stars{
  display: inline-flex;
  gap: 2px;
  color: var(--color-star);
}
.stars svg{ width: 14px; height: 14px; }
.stars .is-empty{ opacity: .28; }

/* ---- アクセス情報リスト ---- */
.info-list{
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  font-size: 14.5px;
}
.info-list dt{
  font-size: 12px;
  color: var(--color-ink-soft);
  letter-spacing: .06em;
}
.info-list dd{
  margin: 2px 0 0;
}