/* =====================================================
   section-meta.css
   エージェントD担当: メタレイヤー（3カラム）
   ===================================================== */

/* --- セクション全体 --- */
.top-meta {
  max-width: 1160px;
  margin: 0 auto;
  padding: 2em 1.5em;
  background-color: var(--color-bg-light); /* 空色tint */
  border-top: 1px solid var(--color-border);
}

/* --- セクション見出し（セクション外・水色背景の上に配置） --- */
.top-meta-section-title {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0.5em 0.8em 0.3em;
  margin-bottom: 1rem;
  font-size: 1.4em;
  color: var(--color-main);
  border-bottom: 2px solid var(--color-sky);
}

/* --- 補助見出し --- */
.top-meta-lead {
  max-width: 1115px;
  margin: 0 auto 1rem;
  padding-left: 20.16px;
  padding-right: 0.8em;
  box-sizing: border-box;
  color: var(--color-text);
  font-size: 0.95em;
  line-height: 1.6;
}

/* --- 3カラムグリッド --- */
.top-meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.5em;
}

/* --- アイテム (plan 1788166673044: 1行維持のため軽微縮小 1.5→1.2, 1.0→0.7) --- */
.top-meta-item {
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 1.2em;
  background-color: #ffffff;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  /* plan 1788422502785: 通常時のごく薄い影を18枚に統一（hover 0 4px 12pxより明確に弱く） */
  box-shadow: 0 1px 3px rgba(31,32,65,0.06);
  text-decoration: none;
  color: inherit;
  transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

/* plan 1788441452706: 白カードhover統一トークンA（影＋浮きのみ・枠維持） */
@media (hover: hover) {
  .top-meta-item:hover {
    box-shadow: 0 4px 16px rgba(31, 32, 65, 0.12);
    border-color: var(--color-border, #DCE6EE);
    transform: translateY(-2px);
  }
  .top-meta-item:active {
    transform: translateY(0);
    box-shadow: 0 1px 4px rgba(31, 32, 65, 0.10);
  }
}

.top-meta-item:focus-visible {
  outline: 2px solid var(--color-fuji-deep, #5F568E);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .top-meta-item {
    transition: none;
  }
  .top-meta-item:hover,
  .top-meta-item:active {
    transform: none;
    box-shadow: 0 1px 3px rgba(31, 32, 65, 0.06);
  }
}

@media print {
  .top-meta-item:hover,
  .top-meta-item:active {
    transform: none;
    box-shadow: none;
  }
}

/* --- アイコン (plan 1788166673044: 1.8→1.6) --- */
.top-meta-icon {
  font-size: 1.6em;
  color: var(--color-main);
  line-height: 1;
  flex-shrink: 0;
}

/* --- コンテンツ --- */
.top-meta-content {
  flex: 1;
  min-width: 0;
}

/* --- 左カラム（アイコン＋ラベル）(plan 1788166673044: 60→56, 8→6) --- */
.top-meta-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  align-self: center;
  gap: 0.3em;
  padding-right: 6px;
  margin-right: 6px;
  border-right: 1px solid var(--color-border);
  flex-shrink: 0;
  min-width: 56px;
}

/* --- ラベル --- */
.top-meta-label {
  font-size: 0.8em;
  color: var(--color-main);
  font-weight: bold;
  white-space: nowrap;
}

/* --- 右カラム（コンテンツ）(plan 1788166673044: gap 0.6→0.4) --- */
.top-meta-right {
  flex: 1;
  min-width: 0;
  text-align: left;
  display:flex;
  flex-direction:row; align-items:center; gap:0.4em;
}
.top-meta-right .top-meta-text{
  flex:1; min-width:0; display:flex; flex-direction:column;
}
.top-meta-right .top-meta-title,
.top-meta-right .top-meta-desc{ flex:1; min-width:0; }
.top-meta-right .top-card-aff--iconOnly{
  margin-left:auto; margin-top:0; align-self:center;
}

.top-meta-title {
  font-size: 1em;
  color: var(--color-main); /* 藤色deep */
  margin: 0 0 0.5em 0;
  text-align: left;
  padding-left: 0;
}

.top-meta-desc {
  color: var(--color-text);
  font-size: 0.85em;
  line-height: 1.6;
  margin: 0;
  text-align: left;
}

/* plan 1788273929470 課題2 PC: メタカードをカード同型のシェブロン帯に — plan 1788423003233: 完全tint一致・濃くしない + 最終表示fujiに追従 + 3px inset白縁（height:100%はtop/bottomオフセットと競合するため除去） */
.top-meta-item{
  position: relative;
  overflow: hidden;
  padding-right: 33px;
}
.top-meta-item .top-card-aff--iconOnly{
  position: absolute;
  top: 3px; right: 3px; bottom: 3px;
  width: 30px; min-width: 30px; max-width: 30px;
  /* plan 1788423003233: 完全tint一致・濃くしない（var(--color-bg-fuji,#F6F3FB)と同値 / 8pxフェード維持 / 最終表示はfront-page-inline上書きのfujiに合わせる） */
  background: linear-gradient(to right, rgba(246,243,251,0) 0, var(--color-bg-fuji, #F6F3FB) 8px);
  border-radius: 0 5px 5px 0;
  margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: center;
  /* fix 2026-09-03: .top-meta-right継承のalign-self:centerがtop/bottomストレッチを潰して帯高20px化するためstretchで上書き（height:100%除去の代替） */
  align-self: stretch;
}
.top-meta-right{ padding-right: 0.6em; }

/* --- レスポンシブ --- */