/* Oshirase 2.1 – 分離CSS版（枠線強調 + 4件スクロール） */
.oshirase-wrap{
  --fg:#111827;         /* 文字色 */
  --muted:#6b7280;      /* 補助文字 */
  --hair:#d1d5db;       /* 罫線/枠 */
  --accent:#0ea5e9;     /* アクセント */
  --bg:#ffffff;         /* 背景 */
  --chip:#f3f4f6;       /* 日付チップ背景 */
  --row-h: 56px;        /* 1行の目安高さ */
  --visible: 4;         /* 表示行数（ショートコードで上書き可） */

  margin: 0 0 1.25rem 0;
  padding: 1.25rem;
  border: 2px solid var(--accent);     /* ★ 枠線を強調 */
  border-radius: 14px;
  background: var(--bg);
  box-shadow: 0 1px 0 rgba(0,0,0,.04), 0 6px 20px rgba(2,132,199,.08);
}

.oshirase-title{
  margin: 0 0 .75rem 0;
  font-size: 1.125rem;
  line-height: 1.3;
  font-weight: 700;
  color: var(--fg);
  letter-spacing: .01em;
}

.oshirase-list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .5rem;

  /* ★ 4件ぶんの高さでスクロール */
  max-height: calc(var(--row-h) * var(--visible));
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: .5rem;
  background: #fafafa;
}

.oshirase-item{
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: .5rem;
  min-height: var(--row-h);
  padding: .25rem .5rem;
  border-radius: 8px;
}
.oshirase-item:hover{ background: #f5f7fb; }

.oshirase-date{
  display: inline-block;
  font-size: .875rem;
  color: var(--muted);
  padding: .125rem .5rem;
  border: 1px solid var(--hair);
  border-radius: 999px;
  background: var(--chip);
  white-space: nowrap;
}

.oshirase-link{
  font-size: .975rem;
  line-height: 1.5;
  text-decoration: none;
  color: var(--fg);
}
.oshirase-link:focus,
.oshirase-link:hover{
  outline: 0;
  text-decoration: underline;
  color: #0a4a6a;
}

.oshirase-empty{ font-size: .95rem; color: var(--muted); padding:.25rem 0; }

.oshirase-more{ margin-top: .75rem; text-align: right; }
.oshirase-more a{ font-size: .9rem; text-decoration: none; color: var(--accent); }
.oshirase-more a:hover{ text-decoration: underline; }