:root {
  --green: #0B7A4B;
  --green-dark: #064C30;
  --green-light: #E9F6EF;
  --accent: #2F855A;
  --text: #1a1a1a;
  --muted: #6b7280;
  --bg: #ffffff;
  --shadow: 0 6px 20px rgba(0,0,0,0.06);
}
* { box-sizing: border-box; }
html, body { margin:0; padding:0; background:var(--bg); color:var(--text); font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Apple SD Gothic Neo, '맑은 고딕', sans-serif; }
a { color: var(--green-dark); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { width: min(1100px, 92vw); margin:0 auto; }
.site-header { position: sticky; top:0; background:#fff; border-bottom:1px solid #eef1f1; z-index:20; }
.nav-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:.9rem 0; }
.brand { display:flex; align-items:center; gap:.6rem; }
.logo { height: 40px; width: auto; max-width: 100%; }
.brand-text { font-weight:700; color:var(--green-dark); white-space:nowrap; }
.site-nav { display:flex; gap:.4rem; flex-wrap:wrap; }
.site-nav a { padding:.5rem .7rem; border-radius:.6rem; }
.site-nav a:hover { background: var(--green-light); }
.nav-toggle { display:none; font-size:1.4rem; background:none; border:none; }
.hero { }
.hero-inner { display:grid; grid-template-columns: 1.2fr .8fr; gap:2rem; padding: 2.8rem 0; }
.hero-copy h1 { font-size: clamp(1.8rem, 2.4vw + 1rem, 3rem); margin:0 0 .5rem; color: var(--green-dark); }
.lead { color: var(--muted); line-height:1.6; }
.cta-row { display:flex; gap:.8rem; margin-top:1.2rem; }
.btn { display:inline-block; padding:.6rem 1rem; border-radius:.7rem; font-weight:600; box-shadow: var(--shadow); border:1px solid transparent; }
.btn-primary { background: var(--green); color:#fff; }
.btn-ghost { background:#fff; color: var(--green-dark); border-color:#dbe7e2; }
.btn-sm { padding:.3rem .6rem; font-size:.9rem; }
.hero-card { background:#fff; padding:1rem 1.2rem; border-radius:1rem; box-shadow: var(--shadow); border:1px solid #eef1f1; }
.bullet { margin:.4rem 0 0 1rem; }
.cards { display:grid; grid-template-columns: repeat(3,1fr); gap:1rem; padding: 1.4rem 0 2rem; }
.card { background:#fff; border:1px solid #eef1f1; padding:1.1rem; border-radius:1rem; box-shadow: var(--shadow); }
.card .muted { color: var(--muted); }
.link { font-weight:600; }
.page { padding: 2rem 0 3rem; }
.team-grid { display:grid; grid-template-columns: 1fr; gap:1rem; }
.person { display:flex; gap:1rem; align-items:flex-start; background:#fff; border:1px solid #eef1f1; padding:1rem; border-radius:1rem; box-shadow: var(--shadow); }
.avatar { width:56px; height:56px; display:grid; place-items:center; background: var(--green-light); border-radius:50%; font-size:1.4rem; }
.role { color: var(--accent); font-weight:600; font-size:.95rem; margin-left:.3rem; }
.pub-list { line-height:1.9; }
.news-item { background:#fff; border:1px solid #eef1f1; border-radius:1rem; padding:1rem; box-shadow: var(--shadow); }
.contact-grid { display:grid; grid-template-columns: 1fr 1fr; gap:1rem; }
.map-placeholder { height:260px; background: repeating-linear-gradient(45deg, #f3faf6, #f3faf6 12px, #e7f5ee 12px, #e7f5ee 24px); border:1px dashed #b7d9c8; border-radius:.8rem; display:grid; place-items:center; color:#408a6b; }
.site-footer { background:#0e1f18; color:#d7e8df; margin-top:2rem; }
.site-footer h4 { color:#fff; margin:.2rem 0 .6rem; }
.footer-grid { display:grid; grid-template-columns: 2fr 1.2fr 1fr; gap:1rem; padding: 2rem 0; }
.quick-links { list-style:none; padding-left:0; margin:0; display:grid; gap:.4rem; }
.quick-links a { color:#cfe7dc; }
.legal { padding: .8rem 0 1.2rem; border-top: 1px solid #1e3a2f; color:#b7c9c0; }
/* SBR layout */
.sbr { display:grid; grid-template-columns: 240px 1fr; gap:1rem; padding: 1.6rem 0 2.4rem; }
.sbr-side { background:#fff; border:1px solid #eef1f1; border-radius:1rem; padding:1rem; height:max-content; box-shadow: var(--shadow); }
.sbr-side nav { display:grid; gap:.4rem; }
.sbr-side a { padding:.5rem .6rem; border-radius:.5rem; color:#0b4732; }
.sbr-side a:hover { background: var(--green-light); }
.sbr-main { background:#fff; border:1px solid #eef1f1; border-radius:1rem; padding:1.2rem; box-shadow: var(--shadow); }
.paper { border-bottom:1px solid #eef1f1; padding:.6rem 0; }
.paper-meta { display:flex; gap:.8rem; align-items:center; }
.steps { counter-reset: step; list-style:none; padding-left:0; }
.steps li::before { counter-increment: step; content: counter(step) "."; font-weight:700; margin-right:.4rem; color: var(--green-dark);}
.cfp-callout { background:var(--green-light); border:1px solid #d6eee4; padding: .8rem 1rem; border-radius:.7rem; }
@media (max-width: 960px) {
  .hero-inner { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-nav { display:none; flex-direction:column; gap:.6rem; padding:.6rem 0; }
  .nav-toggle { display:block; }
  .sbr { grid-template-columns: 1fr; }
}

@media (max-width: 600px) { .logo { height: 70px; } }


/* Adjusted logo size and alignment */
header .logo img {
    height: 70px !important;
    width: auto;
    display: block;
    margin: 0 auto;
}

/* === two-band hero with center green strip + edge photo === */
.hero.two-band {
  position: relative;
  display: grid;
  grid-template-columns: 1fr minmax(0, var(--content-width, 1200px)) 1fr;
}
.hero.two-band > .hero-photo {
  grid-column: 1 / -1;
  background-image: url('../assets/images/school-panorama.jpg');
  background-size: cover;
  background-position: center;
  min-height: 380px;
  z-index: 0;
}
.hero.two-band > .hero-strip {
  grid-column: 2;
  background: linear-gradient(135deg, rgba(173,230,201,0.8), rgba(248,255,251,0.8));
  border-bottom: 1px solid #eef1f1;
  min-height: 380px;
  z-index: 1;
}
.hero.two-band > .hero-inner {
  grid-column: 2;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  padding: 2.8rem 0;
  z-index: 2;
}

/* mobile: stack and keep photo faint under strip */
@media (max-width: 960px) {
  .hero.two-band > .hero-photo,
  .hero.two-band > .hero-strip {
    min-height: 460px;
  }
  .hero.two-band > .hero-inner {
    grid-template-columns: 1fr;
  }
}



/* === FIX: two-band layering so photo, green strip, and content overlap correctly === */
.hero.two-band {
  position: relative;
  min-height: 420px;
  display: block;
}
.hero.two-band > .hero-photo,
.hero.two-band > .hero-strip {
  position: absolute;
  top: 0;
  bottom: 0;
}
.hero.two-band > .hero-photo {
  left: 0;
  right: 0;
  background-image: url('../assets/images/school-panorama.jpg');
  background-size: cover;
  background-position: center;
  z-index: 0;
}
.hero.two-band > .hero-strip {
  left: 50%;
  transform: translateX(-50%);
  width: min(var(--content-width, 1200px), 100%);
  background: linear-gradient(135deg, rgba(173,230,201,0.8), rgba(248,255,251,0.8));
  border-bottom: 1px solid #eef1f1;
  z-index: 1;
}
.hero.two-band > .hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--content-width, 1200px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 2rem;
  padding: 2.8rem 1rem;
}

@media (max-width: 960px) {
  .hero.two-band { min-height: 520px; }
  .hero.two-band > .hero-inner { grid-template-columns: 1fr; }
}

.news-list { margin: .6rem 0 0 1rem; }
.news-list li { margin: .2rem 0; }
.news-list a { text-decoration: none; }
.news-list a:hover { text-decoration: underline; }


/* Modal styles for news board */
.news-modal { position: fixed; inset: 0; display:none; z-index: 100; }
.news-modal .modal-overlay { position:absolute; inset:0; background: rgba(0,0,0,.45); }
.news-modal .modal-box { position:relative; max-width: 840px; width: calc(100% - 2rem); margin: 6vh auto; background:#fff; border-radius: 1rem; padding: 1.2rem; box-shadow: var(--shadow); }
.news-modal .modal-body { margin: .8rem 0 1rem; line-height: 1.7; }
.news-item .excerpt { margin-top: .4rem; color: var(--muted); }



/* Typography for content */
.modal-body { font-size: 1rem; line-height: 1.8; }
.modal-body p { margin: .6rem 0; }
.modal-body h1, .modal-body h2, .modal-body h3 { margin: 1rem 0 .4rem; }
.modal-body ul, .modal-body ol { padding-left: 1.2rem; margin: .6rem 0; }
.modal-body a { text-decoration: underline; }
.modal-body blockquote { border-left: 3px solid var(--green-light); padding-left: .8rem; color: var(--muted); }
.modal-body code { background: #f6f8fa; padding: .1rem .3rem; border-radius: .3rem; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.modal-body pre { background:#f6f8fa; padding: .6rem; overflow:auto; border-radius: .6rem; }


/* Modal shared styles */
.news-modal { position: fixed; inset: 0; display:none; z-index: 100; }
.news-modal .modal-overlay { position:absolute; inset:0; background: rgba(0,0,0,.45); }
.news-modal .modal-box { position:relative; max-width: 880px; width: calc(100% - 2rem); margin: 6vh auto; background:#fff; border-radius: 1rem; padding: 1.2rem; box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.06)); }
.news-modal .modal-body { margin: .8rem 0 1rem; line-height: 1.7; }
.btn.btn-sm { display:inline-block; padding:.4rem .7rem; border:1px solid #d1d5db; border-radius:.6rem; text-decoration:none; margin-right:.4rem; background:#fff; }
.news-item { background:#fff; border:1px solid #eef1f1; border-radius:1rem; padding:1rem; box-shadow: var(--shadow, 0 6px 20px rgba(0,0,0,.06)); margin:.6rem 0; }
.pubs-nav { display:flex; gap:.6rem; flex-wrap:wrap; margin:.6rem 0 1rem; }