/* =========================================================
   components.css
   ---------------------------------------------------------
   共通UIパーツ
   - Divider（.divider）
   - Empty Text（.info-empty）
   - Badge（.badge-new）
   - Buttons（.btn）
   - Link（.link）
========================================================= */

/* =========================
   1) Divider
========================= */
.divider{
  margin: 26px 0 52px;
  position: relative;
  text-align: center;
  color: var(--muted, #757575);
  font: calc(12px * var(--official-font-scale, 1))/1 ui-sans-serif, system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.divider::before{
  content:"";
  position:absolute;
  left:0; right:0;
  top:50%;
  border-top: 1px solid var(--line, rgba(141,197,227,.35));
  transform: translateY(-50%);
}
.divider span{
  position: relative;
  color: #fff;
  background: var(--blue, #49a7da);
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 999px;
  padding: 6px 18px;
}

/* =========================
   2) Empty Message
========================= */
.info-empty{
  width: min(66.666%, 960px);
  margin: 0 auto;

  padding: 16px 0;
  text-align: center;

  font-size: calc(13px * var(--official-font-scale, 1));
  letter-spacing: .10em;
  color: var(--muted);
}

/* =========================
   3) Badge (NEW)
========================= */
.badge-new{
  font-size: calc(10px * var(--official-font-scale, 1));
  padding: 2px 6px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--pink), var(--yellow));
  color: #fff;
  letter-spacing: .1em;
}

/* =========================
   4) Buttons (共通)
   - entryセクション等で使用
========================= */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 18px;
  border-radius: 999px;
  font-size: calc(12px * var(--official-font-scale, 1));
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 1px solid var(--line);
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn-primary{
  background: linear-gradient(135deg, rgba(255,174,238,.55), rgba(249,197,67,.55));
  color: #1a1a1a;
}

.btn-ghost{
  background: rgba(255,255,255,.55);
  color: var(--muted);
}

@media (hover:hover){
  .btn:hover{
    transform: translateY(-2px);
    box-shadow: 0 12px 22px rgba(141,197,227,.18);
  }
}

/* =========================
   5) Text Link
========================= */
.link{
  font-size: calc(12px * var(--official-font-scale, 1));
  letter-spacing: .18em;
  color: var(--deepblue);
  border-bottom: 1px solid rgba(73,167,218,.35);
}

/* Empty publication sections: shared by SNS and information. */
.content-empty {
  box-sizing: border-box;
  display: grid;
  gap: 12px;
  width: min(66.666%, 960px);
  margin: 0 auto 32px;
  padding: clamp(28px, 6vw, 56px) 16px;
  border: 1px dashed var(--line, #c9e2ef);
  border-radius: 16px;
  background: rgba(141, 197, 227, .07);
  text-align: center;
}
.content-empty-title {
  color: var(--deepblue, #28739b);
  font-size: clamp(18px, 4vw, 24px);
  font-weight: 600;
  letter-spacing: .16em;
}
.content-empty-description {
  color: var(--muted, #757575);
  font-size: calc(12px * var(--official-font-scale, 1));
  line-height: 1.8;
}

/* Consistent breadcrumb link colors without underlining. */
.breadcrumb ul li a,
.breadcrumb ul li a:visited { color: #a34f7c; text-decoration: none; border-bottom: 0; }
.breadcrumb ul li a:hover,
.breadcrumb ul li a:focus { color: #793552; text-decoration: none; border-bottom: 0; }
.breadcrumb ul li a:focus-visible { outline: 2px solid #b56a94; outline-offset: 3px; border-radius: 3px; }