/* =========================================================
   대흥제과제빵기계 공지사항 페이지
========================================================= */

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: #f5f6f8;
  color: #222;
  font-family:
    "Pretendard",
    "Noto Sans KR",
    Arial,
    sans-serif;
}

/* =========================================================
   공지사항 상단 영역
========================================================= */

.notice-header {
  padding: 70px 20px 60px;
  text-align: center;
  background:
    linear-gradient(
      135deg,
      rgba(37, 44, 56, 0.96),
      rgba(64, 75, 92, 0.94)
    );
  color: #fff;
}

.notice-header h1 {
  margin: 0 0 18px;
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -1px;
}

.notice-header p {
  margin: 0;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.85);
}

/* =========================================================
   전체 공지 영역
========================================================= */

.notice-wrap {
  width: min(1100px, calc(100% - 40px));
  min-height: 480px;
  margin: 55px auto 80px;
}

/* =========================================================
   검색 영역
========================================================= */

.notice-search-wrap {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.notice-search {
  display: flex;
  width: 100%;
  max-width: 420px;
  overflow: hidden;
  border: 1px solid #d9dde3;
  border-radius: 10px;
  background: #fff;
}

.notice-search input {
  flex: 1;
  min-width: 0;
  padding: 14px 16px;
  border: none;
  outline: none;
  font-size: 15px;
  background: transparent;
}

.notice-search button {
  min-width: 86px;
  padding: 0 18px;
  border: none;
  cursor: pointer;
  background: #2e3540;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
}

.notice-search button:hover {
  background: #1d222a;
}

/* =========================================================
   공지사항 목록
========================================================= */

.notice-list {
  overflow: hidden;
  border: 1px solid #e0e3e8;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(26, 34, 45, 0.06);
}

.notice-table-header {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 150px;
  align-items: center;
  min-height: 54px;
  padding: 0 22px;
  background: #f1f3f6;
  border-bottom: 1px solid #dfe3e8;
  color: #59616d;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
}

.notice-item {
  border-bottom: 1px solid #eceef1;
  transition:
    background 0.2s ease,
    transform 0.2s ease;
}

.notice-item:last-child {
  border-bottom: none;
}

.notice-item:hover {
  background: #fafbfc;
}

.notice-summary {
  display: grid;
  grid-template-columns: 100px minmax(0, 1fr) 150px;
  align-items: center;
  min-height: 72px;
  padding: 0 22px;
  cursor: pointer;
}

.notice-number {
  text-align: center;
  color: #8a919c;
  font-size: 14px;
}

.notice-title-area {
  min-width: 0;
  padding: 0 18px;
}

.notice-title-line {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}

.notice-title {
  overflow: hidden;
  color: #252b33;
  font-size: 16px;
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.notice-date {
  text-align: center;
  color: #858c96;
  font-size: 14px;
}

/* =========================================================
   중요공지 / 팝업 배지
========================================================= */

.notice-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  min-height: 25px;
  padding: 4px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
}

.notice-badge.pinned {
  background: #fff0ed;
  color: #dc4a32;
}

.notice-badge.popup {
  background: #edf3ff;
  color: #3567c8;
}

.notice-item.is-pinned {
  background: #fffdf9;
}

.notice-item.is-pinned .notice-number {
  color: #dc4a32;
  font-weight: 800;
}

.notice-item.is-pinned .notice-title {
  font-weight: 800;
}

/* =========================================================
   공지 상세내용
========================================================= */

.notice-content {
  display: none;
  padding: 30px 40px 36px;
  border-top: 1px solid #eceef1;
  background: #fafbfc;
  color: #464d57;
  font-size: 15px;
  line-height: 1.9;
  white-space: pre-wrap;
  word-break: break-word;
}

.notice-item.open .notice-content {
  display: block;
}

.notice-item.open .notice-summary {
  background: #f8f9fb;
}

.notice-toggle-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: auto;
  border-radius: 50%;
  background: #eef0f3;
  color: #5e6672;
  font-size: 14px;
  transition: transform 0.2s ease;
}

.notice-item.open .notice-toggle-icon {
  transform: rotate(180deg);
}

/* =========================================================
   빈 목록 / 로딩 / 오류
========================================================= */

.loading,
.notice-empty,
.notice-error {
  padding: 100px 20px;
  border: 1px solid #e0e3e8;
  border-radius: 14px;
  background: #fff;
  text-align: center;
  box-shadow: 0 10px 30px rgba(26, 34, 45, 0.05);
}

.loading {
  color: #6b727d;
  font-size: 16px;
}

.notice-empty-icon,
.notice-error-icon {
  margin-bottom: 16px;
  font-size: 46px;
}

.notice-empty h3,
.notice-error h3 {
  margin: 0 0 10px;
  color: #333a44;
  font-size: 21px;
}

.notice-empty p,
.notice-error p {
  margin: 0;
  color: #858c96;
  font-size: 15px;
  line-height: 1.6;
}

/* =========================================================
   공지 개수 표시
========================================================= */

.notice-count {
  margin-bottom: 14px;
  color: #696f79;
  font-size: 14px;
}

.notice-count strong {
  color: #252b33;
}

/* =========================================================
   팝업 공지
========================================================= */

.notice-popup-overlay {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(14, 18, 24, 0.68);
}

.notice-popup-overlay.show {
  display: flex;
}

.notice-popup {
  width: min(520px, 100%);
  max-height: 80vh;
  overflow: hidden;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.28);
  animation: popupAppear 0.22s ease;
}

@keyframes popupAppear {
  from {
    opacity: 0;
    transform: translateY(15px) scale(0.98);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

.notice-popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 20px 22px;
  background: #2d343e;
  color: #fff;
}

.notice-popup-header h2 {
  margin: 0;
  font-size: 20px;
  line-height: 1.4;
}

.notice-popup-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  padding: 0;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font-size: 20px;
}

.notice-popup-close:hover {
  background: rgba(255, 255, 255, 0.23);
}

.notice-popup-body {
  max-height: 50vh;
  overflow-y: auto;
  padding: 28px 25px;
  color: #404751;
  font-size: 15px;
  line-height: 1.85;
  white-space: pre-wrap;
  word-break: break-word;
}

.notice-popup-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 15px 20px;
  border-top: 1px solid #eceef1;
  background: #f8f9fa;
}

.notice-popup-footer button {
  padding: 10px 16px;
  border: 1px solid #d6dae0;
  border-radius: 8px;
  cursor: pointer;
  background: #fff;
  color: #4f5660;
  font-size: 14px;
}

.notice-popup-footer button:last-child {
  border-color: #2d343e;
  background: #2d343e;
  color: #fff;
}

/* =========================================================
   반응형
========================================================= */

@media (max-width: 768px) {
  .notice-header {
    padding: 55px 18px 48px;
  }

  .notice-header h1 {
    font-size: 30px;
  }

  .notice-header p {
    font-size: 15px;
  }

  .notice-wrap {
    width: calc(100% - 24px);
    margin-top: 35px;
  }

  .notice-search-wrap {
    justify-content: stretch;
  }

  .notice-search {
    max-width: none;
  }

  .notice-table-header {
    display: none;
  }

  .notice-summary {
    grid-template-columns: 1fr auto;
    gap: 10px;
    min-height: 88px;
    padding: 16px 18px;
  }

  .notice-number {
    display: none;
  }

  .notice-title-area {
    padding: 0;
  }

  .notice-title-line {
    flex-wrap: wrap;
  }

  .notice-title {
    width: 100%;
    white-space: normal;
    line-height: 1.5;
  }

  .notice-date {
    align-self: flex-start;
    padding-top: 3px;
    white-space: nowrap;
    font-size: 13px;
  }

  .notice-content {
    padding: 24px 20px 28px;
  }

  .notice-toggle-icon {
    display: none;
  }

  .notice-popup {
    max-height: 88vh;
  }

  .notice-popup-header {
    padding: 17px 18px;
  }

  .notice-popup-header h2 {
    font-size: 18px;
  }

  .notice-popup-body {
    max-height: 56vh;
    padding: 22px 19px;
  }
}

@media (max-width: 480px) {
  .notice-header h1 {
    font-size: 26px;
  }

  .notice-search {
    border-radius: 8px;
  }

  .notice-search input {
    padding: 12px 13px;
    font-size: 14px;
  }

  .notice-search button {
    min-width: 72px;
    padding: 0 12px;
  }

  .notice-summary {
    grid-template-columns: 1fr;
  }

  .notice-date {
    text-align: left;
  }

  .notice-popup-overlay {
    padding: 12px;
  }

  .notice-popup-footer {
    flex-direction: column;
  }

  .notice-popup-footer button {
    width: 100%;
  }
}
/* V9 main-page design unification */
.notice-page { background:#f5f6f8; color:#18202b; }
.notice-page .notice-header { padding:68px 20px 62px; background:linear-gradient(135deg,#152238 0%,#273a58 72%,#344967 100%); }
.notice-page .notice-header::before { content:"NOTICE"; display:block; margin-bottom:12px; color:#d5b35a; font-size:12px; font-weight:900; letter-spacing:2.5px; }
.notice-page .notice-header h1 { margin-bottom:14px; font-size:40px; letter-spacing:-1.4px; }
.notice-page .notice-header p { color:rgba(255,255,255,.76); }
.notice-page .notice-wrap { width:min(1200px,calc(100% - 40px)); margin:48px auto 85px; }
.notice-page .notice-search-wrap { margin-bottom:24px; }
.notice-page .notice-search { max-width:460px; border-color:#d6dce5; border-radius:8px; box-shadow:0 7px 20px rgba(21,34,56,.04); }
.notice-page .notice-search input { padding:15px 17px; }
.notice-page .notice-search button { background:#152238; }
.notice-page .notice-search button:hover { background:#263956; }
.notice-page .notice-count { color:#687486; }
.notice-page .notice-count strong { color:#b38a2e; }
.notice-page .notice-list { border-color:#dfe4eb; border-radius:14px; box-shadow:0 15px 40px rgba(21,34,56,.07); }
.notice-page .notice-table-header { min-height:58px; background:#152238; border:0; color:#fff; }
.notice-page .notice-summary { min-height:76px; }
.notice-page .notice-title { color:#1e2b3e; }
.notice-page .notice-item:hover { background:#f8fafc; }
.notice-page .notice-item.is-pinned { background:#fffaf0; }
.notice-page .notice-badge.pinned { background:#152238; color:#f0d889; }
.notice-page .notice-badge.popup { background:#edf1f7; color:#314667; }
.notice-page .notice-toggle-icon { background:#edf1f5; color:#42516a; }
.notice-page .notice-item.open .notice-summary { background:#f6f8fb; }
.notice-page .notice-item.open .notice-toggle-icon { background:#152238; color:#fff; }
.notice-page .notice-content { padding:34px 42px 40px; background:#f8f9fb; border-color:#e3e7ed; color:#465267; }
.notice-page .loading,.notice-page .notice-empty,.notice-page .notice-error { border-color:#dfe4eb; border-radius:14px; box-shadow:0 14px 38px rgba(21,34,56,.06); }
@media(max-width:700px){.notice-page .notice-header{padding:50px 18px}.notice-page .notice-header h1{font-size:32px}.notice-page .notice-wrap{width:calc(100% - 28px);margin-top:30px}.notice-page .notice-table-header{display:none}.notice-page .notice-summary{grid-template-columns:58px minmax(0,1fr);padding:0 12px}.notice-page .notice-date{grid-column:2;text-align:left;padding:0 18px 14px;margin-top:-12px}.notice-page .notice-content{padding:25px 22px 30px}.notice-page .notice-search{max-width:none}}