/**
 * detail-skill.html — スマホ専用 UI（max-width: 960px）
 * PC（961px以上）・他カテゴリ詳細には影響しない
 */
@media (max-width: 960px) {
  body[data-detail-type="skill"] {
    /* 52px min-height + 1px border-top（実測53px）。JS が --skill-sp-tabbar-measured を上書き */
    --skill-sp-tabbar-offset: var(
      --skill-sp-tabbar-measured,
      calc(var(--tasu-app-tabbar-total, 52px) + 1px)
    );
    --skill-sp-cta-reserve: var(--skill-sp-cta-measured, 118px);
    --skill-sp-bottom-gap: 12px;
    --skill-sp-bottom-pad: calc(
      var(--skill-sp-tabbar-offset) + var(--skill-sp-cta-reserve) + var(--skill-sp-bottom-gap)
    );
  }

  /* 1. 見積もり相談 CTA — 下部タブ直上に固定（タブバーより背面） */
  body[data-detail-type="skill"] .skill-hero-premium__cta {
    position: fixed;
    left: 0;
    right: 0;
    bottom: var(--skill-sp-tabbar-offset);
    z-index: 45;
    width: 100%;
    max-width: 100vw;
    margin: 0;
    padding: 0 var(--tasu-detail-pad-x, 0.85rem);
    box-sizing: border-box;
    background: #fff;
    border-top: 1px solid rgba(15, 23, 42, 0.08);
    box-shadow: 0 -6px 20px rgba(15, 23, 42, 0.08);
  }

  body[data-detail-type="skill"] .skill-hero-premium__cta .skill-cta-panel {
    gap: 0.6rem;
    margin: 0;
    padding: 10px 0 12px;
    border: none;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }

  body[data-detail-type="skill"] .skill-cta-panel__price {
    font-size: 1.5rem;
  }

  body[data-detail-type="skill"] .skill-cta-panel__primary {
    min-height: 48px;
  }

  body[data-detail-type="skill"] .skill-cta-panel__favorite {
    min-height: 40px;
  }

  body[data-detail-type="skill"] .skill-cta-panel__note {
    margin: 0;
    padding-bottom: 2px;
  }

  /* 下部タブバーを CTA より前面に（重なり時もナビが隠れない） */
  body[data-detail-type="skill"] .tasu-app-tabbar,
  body[data-detail-type="skill"] .talk-mobile-tabbar,
  body[data-detail-type="skill"] [data-tasu-app-tabbar],
  body[data-detail-type="skill"] [data-tasu-app-tabbar-injected] {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 110;
  }

  /* 下部余白は body のみ（wrap / main への多重 padding を防止） */
  body[data-detail-type="skill"].tasu-app-mobile-page {
    padding-bottom: var(--skill-sp-bottom-pad) !important;
  }

  body[data-detail-type="skill"] .skill-detail-wrap,
  body[data-detail-type="skill"] .skill-detail-main {
    padding-bottom: 0 !important;
    min-height: 0;
  }

  /* レビュー0件 — 過大な min-height / padding を縮小 */
  body[data-detail-type="skill"] .detail-reviews.detail-reviews--empty .detail-reviews__body {
    display: block;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 0;
    padding: 1rem 1.25rem;
  }

  body[data-detail-type="skill"] .detail-reviews__empty-state {
    margin: 0;
    padding: 0.85rem 1rem;
  }

  body[data-detail-type="skill"] .detail-reviews__empty-message {
    margin: 0;
  }

  /* レビュー終了 → 料金カード（固定CTA）間の縦余白 */
  body[data-detail-type="skill"] .detail-bottom-sections {
    gap: 1rem;
    margin-top: 0;
    margin-bottom: 0;
  }

  body[data-detail-type="skill"] .detail-bottom-sections > .detail-reviews:last-child,
  body[data-detail-type="skill"] .detail-bottom-sections > .detail-reviews:only-of-type {
    margin-bottom: 0;
  }

  body[data-detail-type="skill"] .skill-detail-wrap > footer {
    margin-top: 0;
    padding-top: 0.5rem;
    padding-bottom: 0.75rem !important;
  }

  /* 2. ステータスバッジ（納期・対応状況など） */
  body[data-detail-type="skill"] .skill-hero-meta {
    gap: 0.6rem;
  }

  body[data-detail-type="skill"] .skill-hero-meta__item {
    padding: 0.5rem 0.85rem;
    min-width: 4.75rem;
  }

  /* 3. 出品者実績数値（総販売実績・フォロワー・評価） */
  body[data-detail-type="skill"] .skill-seller-stat {
    padding: 18px 14px;
  }

  body[data-detail-type="skill"] .skill-seller-stat__value {
    margin-top: 8px;
    font-size: 1.375rem;
  }

  body[data-detail-type="skill"] .skill-seller-stat--rating .seller-stat__rating {
    font-size: 1rem;
  }

  body[data-detail-type="skill"] .skill-seller-stat--rating .seller-stat__stars {
    font-size: 0.8125rem;
  }
}