/* ---------------------------------------------------------------
   notice.css
   - 공지 · 일정 페이지 전용 스타일
   - 색상 톤: 헤더 푸터 짙은 남색 + 중앙부 연한 회색 + 흰 카드
   - 제목 부제목은 color: #111827 기준
   --------------------------------------------------------------- */

/* ▣ 0. 페이지 전체 레이아웃 ---------------------------------- */

/* 공지 페이지의 메인 영역
   - 중앙부 배경을 홈 화면과 동일한 톤(#f4f5f7)으로 통일 */
.notice-main {
    padding: 18px 0 32px;
    background: #f4f5f7;
}

/* 안쪽 컨테이너: 위(헤더 카드) + 아래(2열 그리드) */
.notice-page {
    display: flex;
    flex-direction: column;
    gap: 14px; /* 상단 카드와 그리드 사이 간격 */
}

/* ---------------------------------------------------------
   1) 상단 헤더 카드 (제목 + 설명 + 관리 버튼 + 오늘 날짜)
--------------------------------------------------------- */

.notice-header-card {
    padding: 14px 18px !important;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 6px 18px rgba(15, 23, 42, 0.15);
    color: #111827;
}

.notice-header-main {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.notice-header-text {
    flex: 1;
}

.notice-title {
    margin: 0 0 6px 0;
    font-size: 20px;
    font-weight: 700;
    color: #111827;
}

.notice-subtitle {
    margin: 0;
    font-size: 13px;
    line-height: 1.6;
    color: #374151;
}

/* 상단 우측 관리 버튼 영역 */
.notice-header-actions {
    flex-shrink: 0;
}

/* “공지 작성 / 일정 관리” 버튼 */
.notice-manage-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.02em;
    color: #f9fafb;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border: 1px solid #1d4ed8;
    text-decoration: none;
    box-shadow: 0 10px 22px rgba(37, 99, 235, 0.45);
    transition:
        background 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.1s ease;
}

.notice-manage-btn:hover {
    background: linear-gradient(135deg, #1d4ed8, #1d4ed8);
    box-shadow: 0 14px 26px rgba(30, 64, 175, 0.65);
    transform: translateY(-1px);
}

/* 하단 meta 라인 (오늘 날짜 기준 표시) */
.notice-header-meta {
    margin-top: 10px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    color: #6b7280;
}

.notice-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: #22c55e;
    box-shadow: 0 0 0 4px rgba(34, 197, 94, 0.25);
}

/* ---------------------------------------------------------
   2) 본문 그리드 : 공지 리스트(좌) / 다가오는 일정(우)
--------------------------------------------------------- */

/* 왼쪽이 좀 더 넓고, 오른쪽은 요약 패널 느낌 */
.notice-grid {
    display: grid;
    grid-template-columns: minmax(0, 2.0fr) minmax(0, 1.3fr);
    gap: 14px;
}

/* 각 카드 내부 상단 제목/설명 공통 */
.notice-section-header {
    margin-bottom: 10px;
}

.notice-section-title {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: #111827;
}

.notice-section-sub {
    margin: 0;
    font-size: 12.5px;
    line-height: 1.2;
    color: #6b7280;
}

/* ---------------------------------------------------------
   2-1) 공지 리스트 카드 (좌측)
--------------------------------------------------------- */

.notice-list-card {
    padding: 14px 16px !important;
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.22);
}

/* 공지가 하나도 없을 때 안내 문구 */
.notice-empty-text {
    margin: 4px 0 0 0;
    font-size: 13px;
    line-height: 1.6;
    color: #6b7280;
}

/* 공지 리스트 전체 */
.notice-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 8px;
}

/* 개별 공지 카드 */
.notice-item {
    padding: 8px 10px 10px 10px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
}

/* 공지 상단: 날짜 + 뱃지 */
.notice-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.notice-item-date {
    font-size: 11px;
    color: #6b7280;
}

.notice-item-badge {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 999px;
    background: rgba(59, 130, 246, 0.08);
    color: #1d4ed8;
    border: 1px solid rgba(59, 130, 246, 0.35);
}

/* 공지 제목 */
.notice-item-title {
    margin: 0 0 4px 0;
    font-size: 14px;
    font-weight: 600;
    color: #111827;
}

/* 공지 내용 */
.notice-item-content {
    font-size: 12.5px;
    line-height: 1.6;
    color: #4b5563;
    white-space: pre-line;
}

/* ---------------------------------------------------------
   2-2) 다가오는 일정 카드 (우측)
--------------------------------------------------------- */
.notice-upcoming-card {
    padding: 14px 16px !important;
    background: #ffffff; /* ← 진한 검정 Glass 제거 */
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
    color: #111827; /* 텍스트 기본색 */
}

/* 제목 */
.notice-upcoming-card .notice-section-title {
    color: #111827;
    font-size: 16px;
}

/* 설명 */
.notice-upcoming-card .notice-section-sub {
    color: #6b7280;
    font-size: 12px;
}

/* 일정 없음 */
.upcoming-empty-text {
    margin: 6px 0 0 0;
    font-size: 12px;
    line-height: 1.6;
    color: #6b7280;
}

/* 일정 리스트 */
.upcoming-list {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* 오른쪽 일정 내용 부분 */
.upcoming-body {
    flex: 1;
}

/* 일정 제목 */
.upcoming-title {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
}

/* 장소 */
.upcoming-place {
    margin-top: 2px;
    font-size: 11px;
    color: #3b82f6;
}

/* 내용 */
.upcoming-content {
    margin-top: 3px;
    font-size: 12px;
    line-height: 1.6;
    color: #374151;
}

/* 중앙부 전체 폭 제한 */
.notice-page {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

/* 🔵 공지·일정 상세 페이지 - 다가오는 일정 카드 정리본 */

/* 개별 일정 아이템 전체 */
.upcoming-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    box-shadow: 0 2px 6px rgba(148, 163, 184, 0.25);
}

/* 위아래 간격 */
.upcoming-item + .upcoming-item {
    margin-top: 10px;
}

/* 날짜 pill – 작고 단정한 파란 태그 느낌 */
.upcoming-date-pill {
    flex-shrink: 0;
    min-width: 100x;
    padding: 4px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 500;
    text-align: center;

    background: #eff6ff;                      /* 연한 파란 배경 */
    color: #1d4ed8;                           /* 진한 파란 글씨 */
    border: 1px solid rgba(59, 130, 246, 0.45);
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25);
}

/* 오른쪽 텍스트 영역 */
.upcoming-body {
    flex: 1;
}

.upcoming-title {
    font-size: 14px;              /* 일정 제목 */
    font-weight: 600;
    line-height: 1.35;
    color: #111827;
    margin-bottom: 2px;
}

.upcoming-place {
    margin-top: 2px;
    font-size: 12px;            /* 장소 */
    color: #6b7280;
}

.upcoming-content {
    margin-top: 3px;
    font-size: 12.5px;            /* 일정 설명 */
    line-height: 1.5;
    color: #4b5563;
}


/* 다가오는 일정 → 밝은 화이트 카드 버전 */
.notice-upcoming-card {
    padding: 14px 16px !important;
    background: #ffffff;
    border-radius: 14px;
    border: 1px solid rgba(0,0,0,0.06);
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.15);
    color: #111827;
}

/* 공지·일정 페이지 중앙 폭 강제 조정 */
.notice-main .layout-inner.notice-page {
    width: 100%;           /* 기존 width:1180px 덮어쓰기 */
    max-width: 1200px;     /* 원하는 전체 폭 */
    margin-left: auto;     /* 가운데 정렬 */
    margin-right: auto;
}
/* $$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$$ */

/* =========================================================
   ✅ 다가오는 일정: Timeline UI (notice.css 맨 아래 추가)
   - 기존 HTML(.upcoming-list > .upcoming-item ...) 그대로 사용
   ========================================================= */

/* 카드 내부 여백 조금 정돈 */
.notice-upcoming-card .upcoming-list{
  margin-top: 4px;
}

/* 타임라인: 왼쪽 라인 확보 */
.notice-upcoming-card .upcoming-list{
  position: relative;
  padding-left: 18px; /* 라인/도트 공간 */
}

/* 세로 라인 */
.notice-upcoming-card .upcoming-list::before{
  content:"";
  position:absolute;
  left: 5px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: rgba(37, 99, 235, 0.18);
  border-radius: 999px;
}

/* 개별 아이템을 타임라인 카드로 */
.notice-upcoming-card .upcoming-item{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr; /* 날짜 pill + 본문 */
  align-items: start;
  gap: 6px;
  padding: 12px 12px;
  margin: 3px 0;
  background: #ffffff;
  border: 1px solid rgba(15, 23, 42, 0.08);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(15, 23, 42, 0.10);
}

/* 도트(타임라인 포인트) */
.notice-upcoming-card .upcoming-item::before{
  content:"";
  position:absolute;
  left: -18px;         /* 라인 위에 위치 */
  top: 18px;
  width: 10px;
  height: 10px;
  background: #2563eb;
  border-radius: 50%;
  box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.15);
}

/* 날짜 pill – 더 짧고 컴팩트 */
.notice-upcoming-card .upcoming-date-pill{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: -8px;

  padding: 2px 8px;          /* 🔹 높이/가로폭 최소화 */
  font-size: 11px;           /* 🔹 글씨 작게 */
  font-weight: 700;
  line-height: 1.1;

  color: #1e40af;
  background: rgba(37, 99, 235, 0.08);
  border: 1px solid rgba(37, 99, 235, 0.18);
  border-radius: 999px;

  white-space: nowrap;       /* 줄바꿈 방지 */
}


/* 본문 텍스트 계층(제목/장소/내용) */
.notice-upcoming-card .upcoming-title{
  font-size: 14px;
  font-weight: 650;
  color: #111827;
  line-height: 1.35;
  margin: 0 0 2px 0;
}

.notice-upcoming-card .upcoming-place{
  font-size: 12px;
  font-weight: 600;
  color: #2563eb;
  margin: 0 0 2px 0;
}

.notice-upcoming-card .upcoming-content{
  font-size: 12px;
  color: #374151;
  line-height: 1.55;
}

/* hover: 살짝 떠오르는 효과(PC) */
@media (hover:hover){
  .notice-upcoming-card .upcoming-item:hover{
    transform: translateY(-1px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.16);
    transition: 0.15s ease;
  }
}

/* ============================================================
   ✅ Upcoming(다가오는 일정) UI 정리  2025.12.16
   ============================================================ */

/* 리스트 전체 */
.upcoming-list{
  display:flex;
  flex-direction:column;
  gap:4px;
}

/* 아이템: 날짜 pill + 내용 2열 */
.upcoming-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  box-sizing:border-box;
  max-width:100%;
}

/* ✅ 날짜 pill: 길이 최소화 */
.upcoming-date-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;            /* 늘어나지 않게 */
  min-width:auto !important; /* 기존 min-width 강제 제거 */
  padding:3px 8px;          /* ✅ 짧게 */
  font-size:10px;            /* ✅ 날짜 글씨 작게 */
  line-height:1.1;
  border-radius:999px;
  white-space:nowrap;
  background: linear-gradient(135deg, #eef4ff 0%, #dbeafe 100%);
  border:1px solid #bfdbfe;
  color:#1d4ed8;
}

/* 오른쪽 내용 */
.upcoming-body{
  flex:1 1 auto;
  min-width:0;              /* ✅ 긴 글 줄바꿈 가능하게 */
}

/* 제목/장소/내용 폰트 컴팩트 */
.upcoming-title{
  font-size:13px;
  font-weight:700;
  color:#111827;
  line-height:1.2;
  margin-top:1px;
}

.upcoming-place{
  font-size:12px;
  color:#6b7280;
  margin-top:2px;
}

.upcoming-content{
  font-size:12px;
  color:#374151;
  margin-top:4px;
  line-height:1.35;
  overflow-wrap:anywhere;   /* ✅ 폭 삐져나옴 방지 */
  word-break:break-word;
}


/* ---------------------------------------------------------
   3) 반응형 (모바일·태블릿)
------------------------------------------------------------ */

  @media (max-width: 900px) {
    /* 좌우 2열 → 1열로 */
    .notice-grid {
        grid-template-columns: minmax(0, 1fr);
    }
  }

  @media (max-width: 640px) {
    /* 상단 헤더 카드 정렬 변경 (버튼이 아래로) */
    .notice-header-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .notice-header-actions {
        width: 100%;
    }

    .notice-manage-btn {
        width: 100%;
        justify-content: center;
    }

/* 모바일 최적화: 글씨 간격 살짝 확대 + 줄바꿈 안정 */
    .notice-upcoming-card .upcoming-list{
      padding-left: 10px;
    }
    .notice-upcoming-card .upcoming-list::before{
      left: 7px;
    }
    .notice-upcoming-card .upcoming-item{
      grid-template-columns: auto 1fr;
      padding: 12px 12px;
      gap: 5px;
    }
    .notice-upcoming-card .upcoming-item::before{
      left: -13px;
      top: 18px;
    }
    .notice-upcoming-card .upcoming-title{ font-size: 15px; }
    .notice-upcoming-card .upcoming-content{ font-size: 13px; }
  }

/* ===============================================
   ✅ 모바일에서 폭 삐져나옴 방지
   =============================================== */
  @media (max-width: 768px){
    .notice-page,
    .notice-grid,
    .notice-list-card,
    .notice-upcoming-card,
    .notice-item,
    .upcoming-item{
      max-width:100%;
      box-sizing:border-box;
  }

  /* 그리드를 1열로 */
  .notice-grid{
    display:flex;
    flex-direction:column;
    gap:14px;
  }

  /* 카드 패딩 살짝 줄여서 꽉 차게 */
  .notice-list-card,
  .notice-upcoming-card{
    padding:14px 12px !important;
  }
}

/* =========================================
   NOTICE/MANAGE TABLE -> Mobile Cards
   - PC/Tablet: 기존 table 유지
   - Mobile(<=600px): 카드형 리스트 변환
   ========================================= */
@media (max-width: 600px){
  /* 테이블 헤더 숨김 */
  .notice-table thead{ display:none; }

  /* table 구조를 block으로 */
  .notice-table,
  .notice-table tbody,
  .notice-table tr{
    display:block;
    width:100%;
  }

  /* 한 행 = 카드 */
  .notice-table tr{
    background:#fff;
    border:1px solid rgba(0,0,0,.10);
    border-radius:16px;
    padding:12px 12px;
    margin:12px 0;
    box-shadow: 0 10px 22px rgba(0,0,0,.07);
  }

  /* 셀 = 라벨:값 */
  .notice-table td{
    display:flex;
    align-items:flex-start;
    gap:12px;
    padding:9px 0;
    border:0 !important;
    white-space: normal;
    word-break: break-word;
  }

  /* 라벨(왼쪽) */
  .notice-table td::before{
    content: attr(data-label);
    flex: 0 0 72px;       /* 라벨 폭 */
    font-weight: 800;
    opacity: .75;
    line-height: 1.2;
    padding-top: 2px;
  }

  /* 제목은 더 눈에 띄게 */
  .notice-table td[data-label="제목"]{
    font-size: 16px;
    font-weight: 800;
  }

  /* 관리 버튼 줄 */
  .notice-table td.actions{
    justify-content:flex-end;
    gap:8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(0,0,0,.12) !important;
  }
  .notice-table td.actions::before{
    content:"";
    flex:0 0 0;
  }

  /* 버튼이 너무 작으면 터치영역 보강 */
  .notice-table td.actions .btn,
  .notice-table td.actions a,
  .notice-table td.actions button{
    padding: 10px 12px;
    border-radius: 999px;
    font-weight: 800;
  }
}

/* =============================================================================
   [TIGHT] notice.php 카드 높이/여백 축소 (전문가 느낌 + 과한 공백 제거)
   - 적용 범위: notice 페이지 전용(.notice-main)
============================================================================= */

/* 페이지 상단/섹션 사이 여백 줄이기 */
.notice-main .notice-page {
  padding-top: 8px;           /* 기존이 크면 줄임 */
  padding-bottom: 18px;
}

/* 헤더 카드: 패딩/라인 간격 축소 */
.notice-main .notice-header-card {
  padding: 14px 16px;         /* ✅ 카드 높이 크게 줄이는 핵심 */
}

/* 타이틀/설명: 위아래 여백 축소 */
.notice-main .notice-title {
  margin: 0 0 6px 0;
  line-height: 1.15;
}
.notice-main .notice-subtitle {
  margin: 0;
  line-height: 1.35;
}

/* 헤더 메타 줄도 슬림하게 */
.notice-main .notice-header-meta {
  margin-top: 10px;
  padding-top: 8px;
}

/* 섹션 헤더(최근공지/다가오는일정)도 슬림하게 */
.notice-main .notice-section-header {
  margin-bottom: 10px;
}
.notice-main .notice-section-title {
  margin: 0 0 6px 0;
  line-height: 1.15;
}
.notice-main .notice-section-sub {
  margin: 0;
  line-height: 1.35;
}

/* 공지 아이템 간격 축소 */
.notice-main .notice-item {
  padding: 10px 12px;
  margin-bottom: 10px;
}
.notice-main .notice-item-title {
  margin: 6px 0 6px;
  line-height: 1.25;
}
.notice-main .notice-item-content,
.notice-main .upcoming-content {
  line-height: 1.45;
}

/* 모바일에서는 설명문 더 타이트 */
@media (max-width: 720px) {
  .notice-main .notice-header-card {
    padding: 12px 12px;
  }
  .notice-main .notice-subtitle,
  .notice-main .notice-section-sub {
    font-size: 13px;          /* 너무 작지 않게, 하지만 공간 절약 */
  }
}

/* ===================================================================== 2026. 01. 09 ===========
   notice.css (PRO)
   - notice.php / notice_manage.php 공용
   - Desktop + Tablet + Mobile (980/768/640/480/420)
   ============================================================================================== */

.notice-page{
  --panel-max: 980px;
  --card-bg: #fff;
  --border: rgba(15, 23, 42, .08);
  --shadow: 0 10px 30px rgba(2, 6, 23, .06);
  --radius: 16px;
  --muted: rgba(15,23,42,.65);
  --text: #0f172a;
  --primary: #2563eb;
  --danger: #ef4444;
}

.notice-wrap{
  max-width: var(--panel-max);
  margin: 18px auto;
  padding: 0 12px;
}

.notice-topbar{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 12px;
  flex-wrap:wrap;
  margin-bottom: 12px;
}

.notice-title{
  margin: 0;
  font-size: 30px;
  letter-spacing: -0.02em;
  color: var(--text);
}

.notice-actions{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.notice-panel{
  background: transparent;
}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--card-bg);
  color: var(--text);
  text-decoration:none;
  font-weight: 700;
  line-height: 1;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 6px 16px rgba(2,6,23,.06);
}

.btn:hover{
  transform: translateY(-1px);
  border-color: rgba(37,99,235,.25);
  box-shadow: 0 10px 22px rgba(2,6,23,.10);
}

.btn-ghost{
  background: #f8fafc;
}

.btn-danger{
  background: #fff;
  border-color: rgba(239,68,68,.25);
  color: #b91c1c;
}
.btn-danger:hover{
  border-color: rgba(239,68,68,.45);
}

/* ---------- List (notice.php) ---------- */
.notice-list{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.notice-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 14px 16px;
  text-decoration:none;
  color: inherit;
  border-top: 1px solid var(--border);
}

.notice-row:first-child{ border-top: 0; }

.notice-row:hover{
  background: #f8fafc;
}

.notice-row-title{
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.01em;
}

.notice-row-meta{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.notice-row-arrow{
  font-size: 22px;
  color: rgba(15,23,42,.35);
}

/* ---------- Article (notice.php?id=) ---------- */
.notice-article{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
}

.notice-article-head{
  margin-bottom: 12px;
}

.notice-article-title{
  margin: 0 0 6px;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}

.notice-article-meta{
  font-size: 12px;
  color: var(--muted);
}

.notice-article-body{
  line-height: 1.75;
  color: rgba(15,23,42,.88);
  white-space: normal;
}

.notice-article-foot{
  margin-top: 14px;
  display:flex;
  gap: 10px;
}

/* ---------- Manage cards ---------- */
.notice-card{
  background: var(--card-bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-top: 14px;
}

.notice-card-head{
  margin-bottom: 12px;
}

.notice-card-head-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap: 10px;
  flex-wrap:wrap;
}

.notice-card-title{
  margin: 0;
  font-size: 18px;
  letter-spacing: -0.02em;
  color: var(--text);
}

.notice-card-sub{
  margin-top: 6px;
  font-size: 13px;
  color: var(--muted);
}

/* ---------- Form ---------- */
.notice-form .field{
  margin-top: 12px;
}

.notice-form .label{
  display:block;
  font-weight: 800;
  margin-bottom: 6px;
  color: var(--text);
}

.notice-form .input,
.notice-form .textarea{
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 12px;
  font-size: 14px;
  outline: none;
  background: #fff;
  transition: border-color .12s ease, box-shadow .12s ease;
}

.notice-form .textarea{
  min-height: 180px;
  resize: vertical;
}

.notice-form .input:focus,
.notice-form .textarea:focus{
  border-color: rgba(37,99,235,.35);
  box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.form-actions{
  margin-top: 12px;
}

/* ---------- Manage list ---------- */
.notice-manage-list{
  border-top: 1px solid var(--border);
  margin-top: 10px;
}

.notice-manage-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}

.notice-manage-row:first-child{
  border-top: 0;
}

.notice-manage-main{
  flex: 1 1 auto;
  text-decoration:none;
  color: inherit;
  min-width: 220px;
}

.notice-manage-title{
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--text);
}

.notice-manage-meta{
  margin-top: 4px;
  font-size: 12px;
  color: var(--muted);
}

.notice-manage-del{
  margin: 0;
  flex: 0 0 auto;
}

/* ---------- Empty ---------- */
.notice-empty{
  background: var(--card-bg);
  border: 1px dashed rgba(15,23,42,.20);
  border-radius: var(--radius);
  padding: 18px;
  color: rgba(15,23,42,.70);
}


/* =========================================================
   Responsive: 980 / 768 / 640 / 480 / 420
   ========================================================= */

/* 980px */
@media (max-width: 980px){
  .notice-wrap{ padding: 0 14px; }
  .notice-title{ font-size: 26px; }
}

/* 768px */
@media (max-width: 768px){
  .notice-title{ font-size: 24px; }
  .notice-row{ padding: 13px 14px; }
  .btn{ padding: 10px 12px; border-radius: 12px; }
}

/* 640px */
@media (max-width: 640px){
  .notice-title{ font-size: 22px; }
  .notice-article{ padding: 14px; }
  .notice-card{ padding: 14px; }
  .notice-row-arrow{ font-size: 20px; }
}

/* 480px */
@media (max-width: 480px){
  .notice-topbar{
    align-items: flex-start;
  }
  .notice-actions{
    width: 100%;
  }
  .notice-actions .btn{
    width: 100%;
  }

  .notice-manage-row{
    flex-direction: column;
    align-items: stretch;
  }
  .notice-manage-del .btn{
    width: 100%;
  }

  .notice-article-foot .btn{
    width: 100%;
  }
}

/* 420px */
@media (max-width: 420px){
  .notice-wrap{ padding: 0 12px; }
  .notice-title{ font-size: 20px; }
  .notice-row-title{ font-size: 14px; }
  .notice-row-meta{ font-size: 11px; }
}