/* ══════════════════════════════════════════
       공지사항 전용 - 화이트 테마 (반응형)
       기존 다크 변수와 충돌하지 않도록 이 페이지 범위에서 색상 재정의
    ══════════════════════════════════════════ */
    :root {
      --nb-bg:        #ffffff;
      --nb-bg-soft:   #f7f8fa;
      --nb-border:    #e7e9ee;
      --nb-text:      #1c1f26;
      --nb-text-sub:  #6b7280;
      --nb-text-mute: #9aa1ad;
      --nb-accent:    #2f5fe0;
      --nb-accent-bg: #eef2fd;
      --nb-radius:    14px;
      --nb-radius-sm: 8px;
    }
    body, html { margin:0; padding:0; background: var(--nb-bg); }

    .notice-wrap {
      max-width: 720px;
      margin: 0 auto;
      padding: 24px 24px 96px;
      min-height: calc(100vh - 300px);
    }

    /* ── 페이지 헤더 ── */
    .notice-page-header {
      margin-bottom: 20px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--nb-text);
    }
    .notice-page-header h1 {
      font-size: 24px;
      font-weight: 800;
      color: var(--nb-text);
      margin: 0;
      letter-spacing: -0.01em;
    }

    /* ── 공지 카드 리스트 ── */
    .notice-list {
      background: var(--nb-bg);
    }
    .notice-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 18px 4px;
      border-bottom: 1px solid var(--nb-border);
      cursor: pointer;
      transition: background 0.15s;
    }
    .notice-item:hover { background: var(--nb-bg-soft); }

    .notice-num {
      flex-shrink: 0;
      width: 28px;
      font-size: 13px;
      font-weight: 600;
      color: var(--nb-text-mute);
      text-align: center;
    }

    .notice-main { flex: 1; min-width: 0; }
    .notice-title-row {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .notice-badge {
      flex-shrink: 0;
      display: inline-block;
      padding: 2px 9px;
      background: var(--nb-accent);
      color: #fff;
      font-size: 10px;
      font-weight: 700;
      border-radius: 20px;
      letter-spacing: 0.02em;
    }
    .notice-title {
      font-size: 15px;
      font-weight: 600;
      color: var(--nb-text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .notice-summary {
      font-size: 13px;
      color: var(--nb-text-sub);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .notice-meta {
      flex-shrink: 0;
      display: flex;
      flex-direction: column;
      align-items: flex-end;
      gap: 4px;
    }
    .notice-date {
      font-size: 12px;
      color: var(--nb-text-mute);
      white-space: nowrap;
    }
    .notice-views {
      font-size: 11px;
      color: var(--nb-text-mute);
      white-space: nowrap;
    }
    .notice-chevron {
      flex-shrink: 0;
      color: var(--nb-text-mute);
      font-size: 16px;
    }

    .notice-empty {
      text-align: center;
      padding: 70px 20px;
      color: var(--nb-text-mute);
      background: var(--nb-bg);
      border: 1px solid var(--nb-border);
      border-radius: var(--nb-radius);
    }
    .notice-empty .empty-icon { font-size: 36px; margin-bottom: 10px; }
    .notice-empty p { margin: 0; font-size: 14px; }

    /* ── 페이지네이션 ── */
    .notice-pagination {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: 6px;
      margin-top: 24px;
    }
    .nb-page-btn {
      min-width: 34px;
      height: 34px;
      padding: 0 8px;
      background: var(--nb-bg);
      border: 1px solid var(--nb-border);
      border-radius: var(--nb-radius-sm);
      color: var(--nb-text-sub);
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
      font-family: inherit;
      transition: all 0.15s;
    }
    .nb-page-btn:hover { border-color: var(--nb-accent); color: var(--nb-accent); }
    .nb-page-btn.active {
      background: var(--nb-accent);
      border-color: var(--nb-accent);
      color: #fff;
    }
    .nb-page-btn:disabled { opacity: 0.35; cursor: not-allowed; }

    /* ── 상세 모달 ── */
    .nb-modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(20,24,34,0.45);
      z-index: 1000;
      align-items: center;
      justify-content: center;
      padding: 20px;
    }
    .nb-modal-overlay.open { display: flex; }
    .nb-modal-box {
      background: var(--nb-bg);
      border-radius: var(--nb-radius);
      width: 100%;
      max-width: 640px;
      max-height: 86vh;
      overflow-y: auto;
      box-shadow: 0 24px 64px rgba(20,24,34,0.18);
    }
    .nb-modal-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 24px 26px 18px;
      border-bottom: 1px solid var(--nb-border);
      position: sticky;
      top: 0;
      background: var(--nb-bg);
    }
    .nb-modal-header-text { min-width: 0; }
    .nb-modal-header .notice-badge { margin-bottom: 8px; }
    .nb-modal-title {
      font-size: 18px;
      font-weight: 700;
      color: var(--nb-text);
      line-height: 1.4;
    }
    .nb-modal-sub {
      margin-top: 8px;
      font-size: 12px;
      color: var(--nb-text-mute);
      display: flex;
      gap: 14px;
    }
    .nb-modal-close {
      flex-shrink: 0;
      width: 32px; height: 32px;
      background: var(--nb-bg-soft);
      border: 1px solid var(--nb-border);
      border-radius: 50%;
      color: var(--nb-text-sub);
      font-size: 14px;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      font-family: inherit;
    }
    .nb-modal-body {
      padding: 24px 26px 30px;
      font-size: 14px;
      line-height: 1.85;
      color: #3a3f47;
      white-space: pre-wrap;
      word-break: break-word;
    }

    /* ── 반응형 (모바일) ── */
    @media (max-width: 640px) {
      .notice-wrap { padding: 20px 16px 64px; }
      .notice-page-header h1 { font-size: 19px; }

      .notice-item { padding: 14px 2px; gap: 10px; }
      .notice-title { font-size: 14px; }
      .notice-summary { display: none; }
      .notice-chevron { display: none; }

      .nb-modal-header { padding: 18px 18px 14px; }
      .nb-modal-title { font-size: 16px; }
      .nb-modal-body { padding: 18px 18px 26px; font-size: 13.5px; }
    }