/* news-detail.css — News & Notice article detail (Figma 374:994) */

.news-detail {
  width: 100%;
  display: flex;
  justify-content: center;
  background-color: #ffffff;
  padding: 6.25rem 0 7.5rem; /* 100px top / 120px bottom */
}

.news-detail__inner {
  width: 100%;
  max-width: 80rem; /* 1280px */
  box-sizing: border-box;
}

/* ----- Indexing (breadcrumb + page title) ----- */
.news-detail__indexing {
  display: flex;
  flex-direction: column;
  gap: 0.625rem; /* 10px */
  margin-bottom: 7.5rem; /* 120px to the article */
}

.news-detail__breadcrumb {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.25rem; /* 20px */
  line-height: 1.4;
  color: #0e1b2b;
}

.news-detail__page-title {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 300;
  font-size: 3.125rem; /* 50px */
  line-height: 1.2;
  letter-spacing: -0.02em;
  color: #222222;
}
.news-detail__page-title strong {
  font-weight: 700;
}

/* ----- Article header (title + date) ----- */
.news-detail__header {
  display: flex;
  flex-direction: column;
  gap: 2.5rem; /* 40px */
  padding: 2rem 0 2rem; /* divider lines above & below (Figma Frame 302 top+bottom) */
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}

.news-detail__title {
  margin: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 2.5rem; /* 40px */
  line-height: 1.4;
  color: #222222;
}

.news-detail__date {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  color: #000000;
}

/* ----- Content (photo + body), 60px inset like Figma ----- */
.news-detail__content {
  padding: 5rem 3.75rem 0; /* 80px top, 60px sides */
}

.news-detail__photo {
  width: 100%;
  margin-bottom: 5rem; /* 80px */
  border-radius: 0.5rem;
  overflow: hidden;
}
.news-detail__photo img {
  width: 100%;
  aspect-ratio: 29 / 10; /* Figma 1160 x 400 — keeps ratio at any width */
  object-fit: cover;
  display: block;
}

.news-detail__body {
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #454545;
}
.news-detail__body p {
  margin: 0 0 1.5rem;
}
/* Rich-text (editor) content — headings, lists, links, images, alignment */
.news-detail__body h1,
.news-detail__body h2,
.news-detail__body h3 {
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.35;
  margin: 2.5rem 0 1rem;
}
.news-detail__body h1 { font-size: 1.75rem; }
.news-detail__body h2 { font-size: 1.5rem; }
.news-detail__body h3 { font-size: 1.25rem; }
.news-detail__body ul,
.news-detail__body ol {
  margin: 0 0 1.5rem;
  padding-left: 1.4rem;
}
.news-detail__body ul { list-style: disc; }
.news-detail__body ol { list-style: decimal; }
.news-detail__body li {
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.news-detail__body a {
  color: #006241;
  text-decoration: underline;
}
.news-detail__body img {
  max-width: 100%;
  height: auto;
  border-radius: 0.5rem;
  margin: 0.5rem 0;
}
.news-detail__body .ql-align-center { text-align: center; }
.news-detail__body .ql-align-right { text-align: right; }
.news-detail__body .ql-align-justify { text-align: justify; }

/* PDF attachment download */
.news-detail__attach {
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e2e8f0;
}
.news-detail__attach-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  border: 1px solid #006241;
  border-radius: 0.5rem;
  color: #006241;
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}
.news-detail__attach-link:hover {
  background-color: #006241;
  color: #fff;
}

/* lead sentence — larger & bold (Figma 24px / 700) */
.news-detail__lead {
  font-size: 1.5rem; /* 24px */
  font-weight: 700;
  line-height: 1.4;
  margin-bottom: 2rem;
}

/* bulleted list (Figma UNORDERED lines) */
.news-detail__bullets {
  margin: 0;
  padding-left: 1.4rem;
  list-style: disc;
}
.news-detail__bullets li {
  font-size: 1.125rem; /* 18px */
  line-height: 1.5;
  color: #454545;
}

/* ----- Prev / Next nav ----- */
.news-detail__nav {
  margin-top: 3.75rem; /* 60px */
  /* Figma: lines only ABOVE Prev and BELOW Next — none between the two rows */
  border-top: 1px solid #d9d9d9;
  border-bottom: 1px solid #d9d9d9;
}

.news-detail__nav-row {
  display: flex;
  align-items: center;
  gap: 5rem; /* 80px between label and title */
  padding: 1.625rem 0.625rem; /* 26px */
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.news-detail__nav-row:hover {
  background-color: #fafafa;
}

.news-detail__nav-label {
  flex: 0 0 auto;
  width: 5.625rem; /* 90px */
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  color: #000000;
}

.news-detail__nav-text {
  flex: 1;
  min-width: 0;
  font-family: "Pretendard", sans-serif;
  font-weight: 600;
  font-size: 1.375rem; /* 22px */
  line-height: 1.4;
  color: #222222;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ----- List button ----- */
.news-detail__actions {
  display: flex;
  justify-content: center;
  margin-top: 4rem; /* 64px */
}

.news-detail__list-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16.25rem; /* 260px */
  height: 4rem; /* 64px */
  border-radius: 5rem; /* 80px pill */
  background-color: #7bc642;
  font-family: "Pretendard", sans-serif;
  font-weight: 400;
  font-size: 1rem; /* 16px */
  color: #ffffff;
  text-decoration: none;
  transition: background-color 0.2s ease;
}
.news-detail__list-btn:hover {
  background-color: #6ab235;
}

/* ===== Tablet ===== */
@media (max-width: 1199px) {
  .news-detail {
    padding: 4rem 5% 5rem;
  }
  .news-detail__indexing {
    margin-bottom: 3.5rem;
  }
  .news-detail__content {
    padding: 3rem 0 0;
  }
  .news-detail__title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
  }
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  .news-detail__page-title {
    font-size: 2rem;
  }
  .news-detail__nav-row {
    gap: 1.5rem;
  }
  .news-detail__nav-label {
    width: 3rem;
  }
  .news-detail__nav-text {
    font-size: 1.125rem;
  }
  .news-detail__list-btn {
    width: 100%;
    max-width: 20rem;
  }
}