/* =====================================================
   Simple Notice
   テーマのブランドカラーから自動派生する完全版CSS
   ===================================================== */


/* -----------------------------------------------------
   1. ブランド基準色の取得（フォールバック付き）
   ----------------------------------------------------- */

/*
  想定：
  - テーマが --key-color / --accent-color 等を持っていればそれを使用
  - 無ければ安全なデフォルト色にフォールバック
*/
:root {
  --notice-brand-base: var(--key-color, var(--accent-color, #2e7d32));
}


/* -----------------------------------------------------
   2. 派生カラーの計算
   ----------------------------------------------------- */

:root {
  /* 背景（かなり薄く） */
  --notice-bg:
    color-mix(in srgb, var(--notice-brand-base) 6%, white);

  /* 区切り線 */
  --notice-border:
    color-mix(in srgb, var(--notice-brand-base) 28%, white);

  /* 日付テキスト */
  --notice-date-color:
    color-mix(in srgb, var(--notice-brand-base) 55%, black);

  /* タイトル文字 */
  --notice-title-color:
    color-mix(in srgb, var(--notice-brand-base) 85%, black);
}


/* =====================================================
   3. 通常版（一覧ページ・下層用）
   ===================================================== */

.notice-list {
  border-top: 1px solid var(--notice-border);
}

.notice-item {
  display: flex;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--notice-border);
}

.notice-thumb img {
  width: 80px;
  height: auto;
  display: block;
}

.notice-body {
  flex: 1;
}

.notice-date {
  font-size: 12px;
  color: var(--notice-date-color);
  margin-bottom: 4px;
  white-space: nowrap;
}

.notice-title {
  font-size: 16px;
  margin: 0 0 6px;
  line-height: 1.6;
  color: var(--notice-title-color);
}

.notice-excerpt {
  font-size: 14px;
  color: #444;
}


/* =====================================================
   4. トップページ用：コンパクト版
   ===================================================== */

.notice-compact {
  background: var(--notice-bg);
  border-radius: 6px;
  padding: 12px 16px;
  margin: 20px 0 28px;
}

.notice-compact .notice-list {
  border-top: none;
  margin: 0;
}

.notice-compact .notice-item {
  display: block;
  padding: 6px 0;
}

/* サムネイルは非表示 */
.notice-compact .notice-thumb {
  display: none;
}

/* 日付＋タイトルを横並び */
.notice-compact .notice-body {
  display: flex;
  gap: 10px;
  align-items: baseline;
}

/* 日付 */
.notice-compact .notice-date {
  font-size: 12px;
  color: var(--notice-date-color);
  white-space: nowrap;
  flex-shrink: 0;
}

/* タイトル（最大2行・アクセント付き） */
.notice-compact .notice-title {
  font-size: 14px;
  margin: 0;
  line-height: 1.5;
  color: var(--notice-title-color);

  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;

  border-bottom: 2px solid var(--notice-brand-base);
  padding-bottom: 2px;
}

/* 抜粋は非表示 */
.notice-compact .notice-excerpt {
  display: none;
}

/* 区切り線 */
.notice-compact .notice-item:not(:last-child) {
  border-bottom: 1px dotted var(--notice-border);
}


/* =====================================================
   5. 見出し（h4想定）
   ===================================================== */

.notice-heading {
  font-size: 14px;
  font-weight: 600;
  margin: 24px 0 8px;
  color: var(--notice-title-color);
}