/* ============================================================
   부천FC 1995 패밀리 앱 — 공지/알림 기능 (메인 + 상세)
   styles.css 에 이어 붙이거나 별도 로드 가능
   요청 클래스: .whomenotice*, .wnotice-detail*
   ============================================================ */

/* ─── 메인 — 공지 스트립 (data-mount="home-notices") ───────────
   위치: .wmatch-combo 아래, .wpanel--official 위
   - 카드 안 카드처럼 보이지 않도록 panel 헤더 대신 얇은 eyebrow
   - 최대 3개 노출, 각 행은 라벨 + 제목 1줄 + 셰브론
   ------------------------------------------------------------ */
.whomenotice {
  margin-top: 14px;
  padding: 4px 4px 0;
}
.whomenotice__head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding: 0 4px 8px;
  gap: 8px;
}
.whomenotice__eyebrow {
  font-family: var(--font-mono);
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.20em;
  color: var(--w-mute);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
}
.whomenotice__eyebrow::before {
  content: "";
  width: 14px; height: 1.5px;
  background: var(--w-red);
  display: inline-block;
}
.whomenotice__count {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--w-mute);
}
.whomenotice__list {
  background: var(--w-card);
  border: 1px solid var(--w-rule);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 1px 0 rgba(0,0,0,0.03), 0 6px 14px -10px rgba(28,18,14,0.14);
}
.whomenotice__item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 13px 14px 13px 14px;
  text-decoration: none;
  color: inherit;
  position: relative;
}
.whomenotice__item + .whomenotice__item {
  border-top: 1px solid var(--w-rule);
}
.whomenotice__item:active {
  background: #FAF6EE;
}
/* 라벨 — 공지/소식/경기를 색으로 빠르게 구분
   기본은 ink-on-bone 칩, data-category 로 톤 차등 */
.whomenotice__label {
  font-family: var(--font-mono);
  font-size: 9.5px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--w-ink);
  padding: 3px 7px 3px 7px;
  border-radius: 4px;
  background: var(--w-bone);
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex; align-items: center; gap: 5px;
  line-height: 1.2;
}
.whomenotice__label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
  flex-shrink: 0;
}
.whomenotice__item[data-category="notice"] .whomenotice__label {
  background: #F7E4E2;
  color: var(--w-red-deep);
}
.whomenotice__item[data-category="news"] .whomenotice__label {
  background: #DDF2F4;
  color: var(--w-cyan);
}
.whomenotice__item[data-category="match"] .whomenotice__label {
  background: var(--w-espresso);
  color: #fff;
}
.whomenotice__title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--w-ink);
  line-height: 1.3;
  /* 한 줄 ellipsis */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.whomenotice__chev {
  width: 14px; height: 14px;
  color: rgba(0,0,0,0.28);
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* 빈 상태 (혹시 0개일 때 — 보통은 섹션 자체를 숨김) */
.whomenotice--empty .whomenotice__list {
  padding: 18px 14px;
  text-align: center;
  font-size: 12px;
  color: var(--w-mute);
}

/* ─── 360px 안전폭 ─── */
@media (max-width: 380px) {
  .whomenotice__item {
    grid-template-columns: auto 1fr auto;
    gap: 8px;
    padding: 12px;
  }
  .whomenotice__title { font-size: 13px; }
  .whomenotice__label { font-size: 9px; padding: 3px 6px; }
}

/* ============================================================
   상세 페이지 — notice.html (.wnotice-detail*)
   ─ 본문은 줄바꿈 유지 + 읽기 폭 적정
   ─ 도크와 겹치지 않게 하단 여백
   ============================================================ */
.wnotice-detail {
  margin-top: 8px;
  padding: 4px 4px calc(var(--safe-bottom) + 24px);
  display: flex; flex-direction: column;
}

.wnotice-detail__crumb {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--w-mute);
  text-transform: uppercase;
  margin: 4px 0 12px;
  text-decoration: none;
  align-self: flex-start;
}
.wnotice-detail__crumb svg {
  width: 12px; height: 12px;
  display: inline-block;
}

.wnotice-detail__meta {
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
}
.wnotice-detail__meta .label {
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 4px;
  background: var(--w-bone);
  color: var(--w-ink);
  display: inline-flex; align-items: center; gap: 6px;
}
.wnotice-detail__meta .label::before {
  content: "";
  width: 5px; height: 5px;
  border-radius: 999px;
  background: currentColor;
}
.wnotice-detail[data-category="notice"] .wnotice-detail__meta .label {
  background: #F7E4E2; color: var(--w-red-deep);
}
.wnotice-detail[data-category="news"] .wnotice-detail__meta .label {
  background: #DDF2F4; color: var(--w-cyan);
}
.wnotice-detail[data-category="match"] .wnotice-detail__meta .label {
  background: var(--w-espresso); color: #fff;
}
.wnotice-detail__meta .when {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--w-mute);
  letter-spacing: 0.04em;
}

.wnotice-detail__title {
  margin: 12px 0 0;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.3;
  color: var(--w-ink);
  word-break: keep-all;
  text-wrap: pretty;
}

.wnotice-detail__rule {
  margin: 18px 0 0;
  height: 1px;
  background: var(--w-rule);
  border: 0;
}

.wnotice-detail__body {
  margin: 18px 0 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--w-ink-sub, #3E342C);
  white-space: pre-wrap;            /* 운영자가 입력한 줄바꿈 그대로 */
  word-break: keep-all;
  text-wrap: pretty;
}
.wnotice-detail__body p { margin: 0 0 0.9em; }
.wnotice-detail__body p:last-child { margin-bottom: 0; }
.wnotice-detail__body a {
  color: var(--w-red-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 관련 링크 CTA — url 이 있을 때만 노출 */
.wnotice-detail__link {
  margin-top: 22px;
  display: inline-flex; align-items: center; gap: 8px;
  align-self: flex-start;
  padding: 12px 18px 12px 18px;
  background: var(--w-espresso);
  color: #fff;
  border-radius: 999px;
  font-size: 13.5px; font-weight: 700;
  letter-spacing: -0.005em;
  text-decoration: none;
}
.wnotice-detail__link svg {
  width: 14px; height: 14px;
}
.wnotice-detail__link[hidden],
.wnotice-detail__link:empty { display: none; }

/* 보조 — 홈으로 돌아가기 */
.wnotice-detail__back {
  margin-top: 24px;
  display: inline-flex; align-items: center; gap: 6px;
  align-self: flex-start;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.10em;
  color: var(--w-mute);
  text-decoration: none;
  padding: 6px 0;
  border-bottom: 1px solid transparent;
}
.wnotice-detail__back:hover { color: var(--w-ink); }

/* 본문이 비어있을 때의 안전한 표현 */
.wnotice-detail__body--empty {
  color: var(--w-mute);
  font-style: italic;
}

:root[data-theme="dark"] .whomenotice__item[data-category="notice"] .whomenotice__label,
:root[data-theme="dark"] .wnotice-detail[data-category="notice"] .wnotice-detail__meta .label {
  background: var(--w-red-soft);
  color: var(--w-red-deep-text, #FF9B91);
}

:root[data-theme="dark"] .whomenotice__item[data-category="news"] .whomenotice__label,
:root[data-theme="dark"] .wnotice-detail[data-category="news"] .wnotice-detail__meta .label {
  background: var(--w-cyan-soft);
  color: var(--w-cyan-text, #63D7DD);
}

:root[data-theme="dark"] .wnotice-detail__body a {
  color: var(--w-red-text, #FF8A80);
}