/* =============================================
   からだのトリセツ — components.css
   v3.0 "好きになる空気" 感情設計版
   ============================================= */

/* -----------------------------------------------
   1. Article Card
   v3：さらに丸く（16px）、サムネイルに暖色グラデ
   タイトルをセリフ体に → "読みたくなる"カード
----------------------------------------------- */
.article-card {
  background: var(--white);
  border-radius: var(--radius-md);   /* 16px */
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.24s ease, transform 0.24s ease;
  display: flex;
  flex-direction: column;
}
.article-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}
.article-card a {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

/* ★ サムネイル：くすみセージ〜ウォームアイボリーのグラデ
   「信頼（緑）×暖かさ（クリーム）」を絵で表現 */
.article-card__thumb {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, var(--green-lt) 0%, #E8F0EC 40%, #F5EDE8 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.8rem;
}

.article-card__body {
  padding: 20px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}

.article-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ★ カードタイトルにセリフ体 → "読む気になる" */
.article-card__title {
  font-size: 0.97rem;
  font-weight: 700;
  line-height: 1.58;
  color: var(--text);
  letter-spacing: 0.0em;
  font-family: var(--font-serif);
}

.article-card__excerpt {
  font-size: 0.81rem;
  color: var(--text-sub);
  line-height: 1.82;
  flex: 1;
}

.article-card__footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 6px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.71rem;
  color: var(--text-mute);
}

/* Card grid */
.article-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(288px, 1fr));
  gap: 24px;
}
@media (max-width: 600px) {
  .article-grid { grid-template-columns: 1fr; gap: 18px; }
}

/* -----------------------------------------------
   2. Category Tag
   v3：padding 増やしてゆったり感。cat4にローズ色
----------------------------------------------- */
.tag {
  display: inline-block;
  font-size: 0.67rem;
  font-weight: 700;
  padding: 3px 12px;   /* 横paddingを少し増やす */
  border-radius: 100px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.tag--green { background: var(--green-lt);  color: var(--green); }
.tag--amber { background: var(--amber-lt);  color: var(--amber); }
.tag--gray  { background: #EDEBE6;          color: #6A6560; }

.tag--cat1 { background: #E3EDE8; color: #2E6450; } /* 鍛え方 */
.tag--cat2 { background: #FEF1E0; color: #905C12; } /* 食事 */
.tag--cat3 { background: #EBF0FA; color: #3A51A7; } /* 回復 */
/* ★ cat4にローズを採用 → "それ本当？"が温かく疑問を投げかける印象に */
.tag--cat4 { background: var(--rose-lt); color: var(--rose); }

/* -----------------------------------------------
   3. Evidence Badge
----------------------------------------------- */
.evidence-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 0.7rem;
  color: var(--text-mute);
}
.evidence-badge__stars {
  color: var(--amber);
  letter-spacing: -1px;
}
.evidence-badge__label { font-size: 0.64rem; }

/* -----------------------------------------------
   4. Section Title
   v3：セリフ体で見出しに格調。バー縮小で「小さな添え線」感
----------------------------------------------- */
.section-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
  display: flex;
  align-items: center;
  gap: 10px;
  letter-spacing: -0.01em;
  font-family: var(--font-serif);   /* ★ */
}
.section-title::before {
  content: '';
  display: block;
  width: 3px;
  height: 1.15em;
  background: var(--green);
  border-radius: 99px;
  flex-shrink: 0;
  opacity: 0.65;
}
.section-title--amber::before { background: var(--amber); }

/* -----------------------------------------------
   5. Homepage Hero
   v3 最大変化：
   - 白 → アイボリーグラデ（ほんのり温かい空間）
   - ヘッドラインをセリフ体（「読みに来た感」を作る）
   - ラベルに小さな装飾ライン
   - CTA：感情的なテキストリンクのまま
----------------------------------------------- */
.hero {
  /* ★ アイボリー〜クリーム〜ごくうっすらローズのグラデ
     ほぼ気づかないレベルだが、体感温度が大幅に上がる */
  background: linear-gradient(160deg, #FDFBF7 0%, #FAF8F2 60%, #FAF6F1 100%);
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* 上部の細いアクセントライン（セージテール） */
.hero::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--green) 0%, var(--rose) 100%);
  opacity: 0.5;
}

/* 右側の大きな装飾（ごく薄い） */
.hero::after {
  content: 'KARADA';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%) rotate(90deg);
  font-family: var(--font-serif);
  font-size: 6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--green);
  opacity: 0.03;
  pointer-events: none;
  white-space: nowrap;
  line-height: 1;
  user-select: none;
}

.hero__inner {
  max-width: 580px;
}

/* ★ ラベルに小さな装飾ライン → "章立て感" */
.hero__label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 0.8;
  margin-bottom: 22px;
}
.hero__label::before {
  content: '';
  display: block;
  width: 20px;
  height: 1px;
  background: var(--green);
  opacity: 0.7;
  flex-shrink: 0;
}

/* ★ セリフ体ヘッドライン → 「読んでみたくなる」感情 */
.hero__headline {
  font-family: var(--font-serif);
  font-size: clamp(1.7rem, 5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.44;
  color: var(--text);
  margin-bottom: 20px;
  letter-spacing: -0.02em;
}

.hero__sub {
  font-size: 0.92rem;
  color: var(--text-sub);
  line-height: 1.92;
  margin-bottom: 36px;
  letter-spacing: 0.005em;
  max-width: 420px;
}

.hero__cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  letter-spacing: 0.02em;
  border-bottom: 1.5px solid var(--green);
  padding-bottom: 2px;
  transition: opacity 0.15s, gap 0.2s;
}
.hero__cta:hover {
  opacity: 0.72;
  text-decoration: none;
  gap: 12px;   /* ★ ホバーで矢印が右に動く小さなアニメ */
}

/* スマホ */
@media (max-width: 700px) {
  .hero { padding: 52px 0 46px; }
  .hero::after { display: none; }
  .hero__inner { max-width: 100%; }
  .hero__sub br { display: none; }
}

/* -----------------------------------------------
   6. Category Row
----------------------------------------------- */
.category-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 4px;
  scrollbar-width: none;
}
.category-row::-webkit-scrollbar { display: none; }

.category-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  font-size: 0.8rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  color: var(--text-sub);
  background: var(--white);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.category-chip:hover {
  border-color: var(--green);
  color: var(--green);
  background: var(--green-lt);
  text-decoration: none;
}

/* -----------------------------------------------
   7. Read More
----------------------------------------------- */
.read-more {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green);
  text-decoration: none;
  letter-spacing: 0.02em;
  transition: gap 0.18s;
}
.read-more::after { content: '→'; }
.read-more:hover { gap: 9px; text-decoration: none; }

/* -----------------------------------------------
   8. About Teaser（トップページ）
   v3：ローズとグリーンの柔らかいグラデ背景
----------------------------------------------- */
.about-teaser {
  /* ★ うっすらグラデ：無機質な単色から「あたたかみのある面」へ */
  background: linear-gradient(135deg, var(--green-lt) 0%, #F2EAE7 100%);
  border: 1px solid var(--green-mid);
  border-radius: var(--radius-md);
  padding: 36px 32px;
  display: flex;
  gap: 22px;
  align-items: flex-start;
}
.about-teaser__icon {
  font-size: 2rem;
  flex-shrink: 0;
  opacity: 0.85;
}
.about-teaser__title {
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--green);
  margin-bottom: 10px;
  font-family: var(--font-serif);   /* ★ */
  letter-spacing: 0.01em;
}
.about-teaser__text {
  font-size: 0.84rem;
  color: var(--text-sub);
  line-height: 1.9;
}
@media (max-width: 500px) {
  .about-teaser { flex-direction: column; gap: 10px; padding: 24px 20px; }
}

/* -----------------------------------------------
   About ページ専用コンポーネント
----------------------------------------------- */

/* 3つの約束：番号付きリスト */
.promise-list {
  display: flex;
  flex-direction: column;
}
.promise-item {
  display: flex;
  gap: 22px;
  padding: 30px 0;
  border-bottom: 1px solid var(--border);
}
.promise-item:last-child { border-bottom: none; }
.promise-item__num {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  padding-top: 3px;
  min-width: 18px;
  opacity: 0.65;
  font-family: var(--font-serif);   /* ★ 番号もセリフ体で雑誌感 */
}
.promise-item__title {
  font-size: 0.97rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  font-family: var(--font-serif);   /* ★ */
}
.promise-item__text {
  font-size: 0.86rem;
  color: var(--text-sub);
  line-height: 1.92;
  margin: 0;
}

/* 根拠レベル表 */
.evidence-scale { display: flex; flex-direction: column; }
.evidence-scale__row {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}
.evidence-scale__row:last-child { border-bottom: none; }
.evidence-scale__stars {
  color: var(--amber);
  font-size: 0.76rem;
  white-space: nowrap;
  min-width: 66px;
  letter-spacing: -1px;
  flex-shrink: 0;
}
.evidence-scale__desc {
  font-size: 0.84rem;
  color: var(--text-sub);
  line-height: 1.65;
}

/* 著者プロフィール（About版） */
.about-author {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 8px 0 0;
}
.about-author__avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  /* ★ アバターにグラデ：より温かみのある印象 */
  background: linear-gradient(135deg, var(--green-lt), var(--rose-lt));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  flex-shrink: 0;
}
.about-author__name {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 3px;
  font-family: var(--font-serif);   /* ★ */
}
.about-author__role {
  font-size: 0.7rem;
  color: var(--text-mute);
  margin-bottom: 11px;
  letter-spacing: 0.02em;
}
.about-author__bio {
  font-size: 0.86rem;
  color: var(--text-sub);
  line-height: 1.92;
  margin: 0;
}
@media (max-width: 480px) {
  .about-author { flex-direction: column; gap: 12px; }
}