/* =========================
   Base
   ========================= */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
}

/* =========================
   Header
   ========================= */
header {
  background-color: #ffffff;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 1.2rem; /* base size; links override below */
}

.mast-logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mast-logo-container strong { font-size: 1.8rem; }

.mast-logo { height: 30px; width: auto; }

nav a {
  margin-left: 2rem;
  text-decoration: none;
  color: #003366;
  font-size: 1.8rem;   /* match left MAST size */
  font-weight: 700;    /* match bold weight */
}

/* =========================
   Intro & Slideshow
   ========================= */
.intro {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  max-width: 1100px;
  margin: 2rem auto;
  padding: 0 1rem;
}

/* (Optional) when using a static image column */
.intro-img { flex: 0 0 auto; }
.intro-img img { width: 100%; height: auto; display: block; margin: 0 auto; }

/* Hide intro text block if not needed */
.intro-text { display: none; }

.slideshow {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 2rem auto;
  aspect-ratio: 16 / 9;    /* keep container ratio; remove if not needed */
  overflow: hidden;
  background: #ffffff;     /* letterbox color */
}

.slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;     /* show full image without cropping */
  opacity: 0;
  transition: opacity .8s ease;
}

.slideshow img.active { opacity: 1; }

/* =========================
   (Optional) Header Hero with Shine Animation
   ========================= */
.mast-header {
  background-image: url('/mast_new_files/mast_newlogo_4.jpg');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  height: 60vh;
  width: 100%;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.mast-header::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  animation: shine 3s infinite;
}

@keyframes shine {
  0%   { left: -75%; }
  100% { left: 125%; }
}

/* =========================
   Content
   ========================= */
.content {
  padding: 1rem;
  max-width: 600px;
  margin: 0 auto;
}

.content h2 {
  color: #003366;
  border-bottom: 2px solid #003366;
  padding-bottom: 0.5rem;
}

.content h3 {
  color: #003366;
  margin-top: 2rem;
}

.content p,
.content ul { margin-bottom: 1.5rem; }

.content ul { padding-left: 1.5rem; }

/* =========================
   News Section
   ========================= */
.news-section {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  background-color: #fff;
}

.news-section h2 {
  font-size: 1.4rem;
  color: #003366;
  margin-bottom: 1.5rem;
}

.news-item { display: flex; flex-direction: column; margin-bottom: 1.5rem; }
.news-date { font-size: 0.9rem; color: #555; margin-bottom: 0.2rem; }

.news-content a {
  text-decoration: none;
  color: #003366;
  font-size: 1rem;
  display: inline-block;
  margin-bottom: 0.3rem;
}

.news-content a:hover { text-decoration: underline; }

.news-content p { font-size: 0.9rem; color: #333; margin: 0; }

/* =========================
   Overview Hero (optional)
   ========================= */
.overview-hero {
  max-width: 700px;
  margin: 2rem auto 1rem;
  padding: 0 1rem;
}

.overview-hero img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 10px;
  box-shadow: 0 12px 28px rgba(0,0,0,.08);
}

.overview-hero figcaption {
  text-align: center;
  font-size: .9rem;
  color: #666;
  margin-top: .5rem;
}

/* =========================
   Footer
   ========================= */
footer {
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
  background-color: #f1f1f1;
  color: #555;
}

footer p {
  margin-bottom: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

footer a { color: inherit; text-decoration: underline; }

/* =========================
   Responsive
   ========================= */
@media (max-width: 900px) {
  .intro { flex-direction: column; }
  .intro-img { flex-basis: auto; max-width: 520px; }
}

@media (max-width: 600px) {
  nav a { margin-left: 1rem; }
}

/* wider content so two columns fit */
.content{ max-width:1100px; margin:0 auto; }

/* text left + image right */
.feature-block{
  display:flex;
  align-items:flex-start;
  gap:2rem;
  margin:1.5rem 0;
}
.feature-block .feature-text{ flex:1 1 0; min-width:0; }
.feature-block .feature-media{ flex:0 0 clamp(280px,30vw,420px); margin:0; }
.feature-block .feature-media img{ display:block; width:100%; height:auto; object-fit:contain; }

/* flip order if you want image on the left for some sections */
.feature-block.reverse{ flex-direction:row-reverse; }

/* mobile */
@media (max-width:900px){
  .feature-block{ flex-direction:column; }
  .feature-block .feature-media{ flex:none; width:100%; max-width:520px; margin:0 auto; }
}

/* Business Impact section */
.business-impact {
  background: #fff;
  padding: 2rem 1rem;
}
.business-impact__wrap {
  max-width: 900px;      /* section width */
  margin: 0 auto;
}
.business-impact h3 {
  color: #003366;
  margin-bottom: 1rem;
  border-bottom: 2px solid #ffffff;
  padding-bottom: .5rem;
}

/* list styling */
.impact-list {
  list-style: none;      /* remove default bullets */
  padding: 0;
  display: grid;
  gap: 1rem;
}

/* custom bullet */
.impact-list li {
  position: relative;
  padding-left: 1.6rem;
  line-height: 1.6;
}
.impact-list li::before {
  content: "•";          /* you can change to "✔" if you prefer */
  color: #003366;
  font-weight: 700;
  position: absolute;
  left: 0;
  top: 0;
}

/* two columns on wide screens */
@media (min-width: 900px) {
  .impact-list {
    grid-template-columns: 1fr 1fr;
    column-gap: 2rem;
  }
}

/* Partners page */
.partners-section{max-width:1100px;margin:2rem auto;padding:1rem;}
.partners-section h2{font-size:1.6rem;color:#003366;margin-bottom:2rem;border-bottom:2px solid #003366;padding-bottom:.5rem;}
.partner-layout{display:flex;gap:3rem;flex-wrap:wrap;}
.leader-info{flex:1 1 220px;max-width:250px;text-align:center;}
.leader-info img{width:120px;border-radius:6px;margin-bottom:.5rem;}
.country-partners{flex:3 1 700px;}
.country-section{margin-bottom:2.5rem;}
.country-section h3{font-size:1.2rem;color:#222;margin-bottom:1rem;}
.partner-grid-row{display:flex;flex-wrap:wrap;gap:1rem;}
.partner-card{background:#fff;padding:1rem;border-radius:6px;box-shadow:0 2px 4px rgba(0,0,0,.08);text-align:center;width:220px;flex-shrink:0;}
.partner-card img{max-height:60px;max-width:100%;margin-bottom:.5rem;}
.partner-card p{margin:.2rem 0;font-size:.95rem;}
@media (max-width:768px){
  .partner-layout{flex-direction:column;align-items:center;}
  .partner-card{width:100%;max-width:300px;}
}

/* Page: Deliverables (Work Packages) */

/* widen content for the table page */
.content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 1rem;
}

/* responsive table wrapper */
.wp-table-wrapper {
  width: 100%;
  overflow-x: auto;
}

/* table base */
.wp-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
  font-size: 0.95rem;
}

.wp-table th,
.wp-table td {
  padding: 10px;
  border: 1px solid #ccc;
  white-space: nowrap;
  text-align: left;
}

.wp-table tbody tr:nth-child(even) { background-color: #f9f9f9; }
.wp-table tbody tr:nth-child(odd)  { background-color: #ffffff; }
.wp-table tfoot { font-weight: bold; background-color: #f1f1f1; }

/* links in the table */
.wp-table a {
  color: #1a7f2e;        /* green link, replacing inline styles */
  font-weight: 600;
  text-decoration: none;
}
.wp-table a:hover { text-decoration: underline; }

/* brand text next to logo (if main.css doesn't color it) */
.brand {
  font-weight: 700;
  font-size: 1.8rem;
  color: #003366;
  text-decoration: none;
}

/* small screens: allow cells to wrap if needed */
@media (max-width: 640px) {
  .wp-table th,
  .wp-table td {
    white-space: normal;
  }
}

/* Base */
body {
  margin: 0;
  font-family: 'Segoe UI', sans-serif;
  background-color: #ffffff;
  color: #333;
  line-height: 1.6;
}

/* Header */
header {
  background-color: #ffffff;
  padding: 1.5rem 3rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid #eee;
  font-size: 1.2rem;
}

.mast-logo-container {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.mast-logo {
  height: 30px;
  width: auto;
}

.brand {
  font-size: 1.8rem;
  color: #003366;
  font-weight: 700;
  text-decoration: none;
}

nav a {
  margin-left: 2rem;
  text-decoration: none;
  color: #003366;
  font-size: 1.2rem;
}

/* News section */
.news-section {
  padding: 2rem 1rem;
  max-width: 800px;
  margin: 0 auto 3rem auto;
  background-color: #fff;
}

.news-section h2 {
  font-size: 1.4rem;
  color: #003366;
  margin-bottom: 1.5rem;
  border-bottom: 2px solid #003366; /* underline */
  padding-bottom: 0.5rem;           /* gap between text and line */
}

.news-item {
  display: flex;
  flex-direction: column;
  margin-bottom: 1.8rem;
}

.news-date {
  font-size: 0.9rem;
  color: #003366;
  margin-bottom: 0.2rem;
}

.news-content a {
  text-decoration: none;
  color: #003366;
  font-size: 1rem;
  display: inline-block;
  margin-bottom: 0.3rem;
}
.news-content a:hover { text-decoration: underline; }

.news-content p {
  font-size: 0.9rem;
  color: #333;
  margin: 0;
}

/* Footer */
footer {
  text-align: center;
  padding: 2rem;
  font-size: 0.9rem;
  background-color: #f1f1f1;
  color: #555;
}

footer p {
  margin-bottom: 1rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

footer a {
  color: inherit;
  text-decoration: underline;
}

/* Responsive */
@media (max-width: 600px) {
  nav a { margin-left: 1rem; }
}

/* Only for Partners page */
body.partners-page {
  background-color: #f4f7f9; /* 연한 하늘색 */
}