:root{
  --bg:#ffffff;
  --bg-soft:#f4f9f3;
  --ink:#22302a;
  --muted:#5b6b63;
  --brand:#2e8b57;
  --brand-dark:#1f6b41;
  --accent:#7cc576;
  --radius:16px;
  --shadow:0 10px 30px rgba(46,139,87,.10);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard','Noto Sans KR',system-ui,sans-serif;
  background:var(--bg);
  color:var(--ink);
  line-height:1.7;
  font-size:17px;
  padding-bottom:120px;
}
img{max-width:100%}
a{text-decoration:none;color:inherit}
.container{max-width:1080px;margin:0 auto;padding:0 20px}

/* 헤더 */
.site-header{
  position:sticky;top:0;z-index:50;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(8px);
  border-bottom:1px solid #e8f0e8;
}
.header-inner{display:flex;align-items:center;justify-content:space-between;padding:16px 20px}
.brand{
  font-weight:800;color:var(--brand-dark);
  display:flex;align-items:center;gap:clamp(6px,2vw,10px);
  font-size:clamp(13px,3.9vw,17px);
  white-space:nowrap;min-width:0;
}
.brand-logo{height:46px;width:auto;flex-shrink:0}
.nav{display:flex;gap:22px;align-items:center}
/* ⚠️ nowrap 이 없으면 폭이 모자랄 때 「교육 프로그램」이 「교육 / 프로그램」으로 쪼개져
   메뉴가 두 줄로 어색해진다. 항목 글자는 절대 안 쪼개지게 둔다. */
.nav a{font-size:15px;color:var(--muted);font-weight:600;white-space:nowrap;flex-shrink:0}
.nav a:hover{color:var(--brand)}
.nav .nav-cta{
  background:var(--brand);color:#fff;padding:8px 16px;border-radius:999px;
}
.nav .nav-cta:hover{background:var(--brand-dark);color:#fff}

/* 햄버거 버튼 (데스크톱에서는 숨김) */
.nav-toggle{
  display:none;
  width:44px;height:44px;padding:0;flex-shrink:0;
  flex-direction:column;align-items:center;justify-content:center;gap:5px;
  background:#fff;border:1px solid #dbe8db;border-radius:12px;
  cursor:pointer;
}
.nav-toggle-bar{
  display:block;width:20px;height:2px;border-radius:2px;
  background:var(--brand-dark);transition:transform .2s,opacity .2s;
}

/* 히어로 */
.hero{
  background:linear-gradient(160deg,#eef7ec 0%,#ffffff 60%);
  padding:96px 20px 88px;
  text-align:center;
}
.hero-eyebrow{
  font-size:12px;letter-spacing:.18em;color:var(--brand);
  font-weight:700;margin-bottom:18px;
}
.hero-title{
  font-size:clamp(32px,5vw,52px);
  font-weight:800;color:var(--ink);line-height:1.2;
}
.hero-sub{
  font-size:clamp(20px,3vw,28px);
  font-weight:700;color:var(--brand-dark);margin-top:14px;
}
.hero-desc{
  margin-top:22px;color:var(--muted);font-size:17px;
}
.hero-actions{display:flex;gap:14px;justify-content:center;margin-top:34px;flex-wrap:wrap}

/* 버튼 */
.btn{
  display:inline-block;padding:14px 30px;border-radius:999px;
  font-weight:700;font-size:16px;transition:.2s;
}
.btn-primary{background:var(--brand);color:#fff}
.btn-primary:hover{background:var(--brand-dark)}
.btn-ghost{border:2px solid var(--brand);color:var(--brand)}
.btn-ghost:hover{background:var(--brand);color:#fff}
.btn-lg{padding:16px 40px;font-size:17px}

/* 섹션 */
.section{padding:88px 20px}
.section-alt{background:var(--bg-soft)}
.section-title{
  font-size:clamp(26px,4vw,36px);font-weight:800;text-align:center;
}
.section-lead{text-align:center;color:var(--muted);margin-top:10px;margin-bottom:48px}

/* 협회 소개 */
.about-grid{display:grid;grid-template-columns:1.3fr 1fr;gap:44px;align-items:start}
.about-text p{color:var(--muted);margin-bottom:16px}
.about-points{display:flex;flex-direction:column;gap:14px}
.point{
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:18px 20px;display:flex;gap:14px;align-items:center;box-shadow:var(--shadow);
}
.point-num{font-weight:800;color:var(--brand);font-size:18px}
.point p{font-weight:600;font-size:15px}
.about-badge{
  display:inline-flex;align-items:center;gap:10px;
  background:var(--bg-soft);border:1px solid #cfe6cf;
  color:var(--brand-dark);font-family:inherit;font-size:15px;font-weight:600;
  padding:8px 10px 8px 12px;border-radius:999px;margin-top:6px;
  cursor:pointer;transition:background .2s,border-color .2s,box-shadow .2s;
}
.about-badge:hover{background:#e7f4e5;border-color:var(--accent);box-shadow:var(--shadow)}
.about-badge:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.badge-emblem{width:26px;height:auto;flex:none}
.badge-text{white-space:nowrap}
.about-badge strong{color:var(--brand)}
.badge-cta{
  background:var(--brand);color:#fff;font-size:12.5px;font-weight:700;
  padding:5px 12px;border-radius:999px;white-space:nowrap;
}
.about-badge:hover .badge-cta{background:var(--brand-dark)}

/* 법인설립허가 */
.permit{
  display:grid;grid-template-columns:240px 1fr;gap:36px;align-items:start;
  margin-top:44px;padding:32px;
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.permit-info h3{font-size:20px;color:var(--brand-dark);margin-bottom:12px}
.permit-lead{color:var(--muted);font-size:15px;margin-bottom:22px}
.permit-facts{display:grid;gap:10px;margin-bottom:24px}
.permit-facts>div{display:grid;grid-template-columns:76px 1fr;gap:14px;align-items:baseline}
.permit-facts dt{font-size:14px;font-weight:700;color:var(--brand-dark)}
.permit-facts dd{font-size:15px}
.permit-label{font-weight:700;font-size:15px;margin-bottom:12px}
.permit-list{list-style:none;display:grid;gap:9px}
.permit-list li{position:relative;padding-left:20px;color:var(--muted);font-size:15px}
.permit-list li::before{
  content:"";position:absolute;left:4px;top:11px;
  width:6px;height:6px;border-radius:50%;background:var(--accent);
}

/* 허가증 아이콘 버튼 */
.permit-seal{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:26px 20px;background:var(--bg-soft);
  border:1px solid #cfe6cf;border-radius:var(--radius);
  font-family:inherit;color:var(--brand-dark);cursor:pointer;
  transition:background .2s,border-color .2s,transform .2s,box-shadow .2s;
}
.permit-seal:hover{background:#e7f4e5;border-color:var(--accent);transform:translateY(-2px);box-shadow:var(--shadow)}
.permit-seal:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.permit-seal-img{width:84px;height:auto;margin-bottom:4px}
.permit-seal-title{font-size:15px;font-weight:700}
.permit-seal-no{font-size:20px;font-weight:800;color:var(--brand);line-height:1.2}
.permit-seal-cta{
  margin-top:10px;background:var(--brand);color:#fff;
  font-size:13px;font-weight:700;padding:8px 18px;border-radius:999px;
}
.permit-seal:hover .permit-seal-cta{background:var(--brand-dark)}

/* 허가증 팝업 */
body.modal-open{overflow:hidden}
.doc-modal{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
.doc-modal[hidden]{display:none}
.doc-modal-backdrop{position:absolute;inset:0;background:rgba(24,38,31,.66);backdrop-filter:blur(3px)}
.doc-modal-panel{
  position:relative;display:flex;flex-direction:column;
  width:min(560px,100%);max-height:100%;
  background:#fff;border-radius:var(--radius);overflow:hidden;
  box-shadow:0 24px 60px rgba(0,0,0,.35);
}
.doc-modal-head{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 18px;border-bottom:1px solid #e8f0e8;
}
.doc-modal-title{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:700;color:var(--brand-dark)}
.doc-modal-title img{width:24px;height:auto;flex:none}
.doc-modal-close{
  flex:none;width:34px;height:34px;line-height:1;
  font-size:24px;color:var(--muted);font-family:inherit;
  background:transparent;border:0;border-radius:50%;cursor:pointer;
}
.doc-modal-close:hover{background:var(--bg-soft);color:var(--ink)}
.doc-modal-close:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.doc-modal-body{overflow:auto;padding:18px;background:var(--bg-soft)}
.doc-modal-body img{display:block;width:100%;height:auto;border-radius:8px;background:#fff}
.doc-modal-foot{padding:12px 18px;border-top:1px solid #e8f0e8;text-align:center;font-size:14px}
.doc-modal-foot a{color:var(--brand);font-weight:700}
.doc-modal-foot a:hover{color:var(--brand-dark);text-decoration:underline}

/* 협회 소개 - 한눈에 보는 수치 */
.about-stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:20px;margin-top:44px;
}
.stat{
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:28px 20px;text-align:center;box-shadow:var(--shadow);
}
.stat-num{
  display:block;font-size:34px;font-weight:800;color:var(--brand);
  line-height:1.1;
}
.stat p{color:var(--muted);font-size:14px;margin-top:8px;font-weight:600}

/* 카드 */
.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.card{
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:34px 26px;text-align:center;box-shadow:var(--shadow);
}
.card-icon{font-size:44px;margin-bottom:16px}
.card-tag{
  display:inline-block;background:var(--bg-soft);color:var(--brand-dark);
  font-size:12px;font-weight:700;padding:4px 12px;border-radius:999px;margin-bottom:12px;
}
.card h3{font-size:19px;margin-bottom:10px}
.card p{color:var(--muted);font-size:15px}

/* 캠페인 */
.campaign-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.campaign{
  background:var(--bg-soft);border:1px solid #e3efe3;border-radius:var(--radius);
  padding:36px 30px;
}
.campaign h3{font-size:22px;margin-bottom:14px;color:var(--brand-dark)}
.campaign p{color:var(--muted)}

/* 클릭 가능한 캠페인 카드 */
a.campaign{
  display:block;color:inherit;
  transition:transform .2s,box-shadow .2s,background .2s;
}
a.campaign:hover{background:#fff;transform:translateY(-3px);box-shadow:0 12px 26px rgba(31,107,65,.14)}
a.campaign:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.campaign-more{
  display:inline-block;margin-top:16px;
  font-size:14px;font-weight:700;color:var(--brand);
}
a.campaign:hover .campaign-more{color:var(--brand-dark)}

/* 프로그램 */
.program-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:24px}
.program{
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:30px 26px;border-left:5px solid var(--brand);
}
.program h3{font-size:18px;margin-bottom:8px}
.program p{color:var(--muted);font-size:15px}

/* CTA */
.cta{text-align:center;background:linear-gradient(160deg,#eef7ec,#ffffff)}
.cta-actions{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:8px}
.cta-note{color:var(--muted);margin-top:22px;font-size:15px}

/* 푸터 */
.site-footer{
  background:#1f2b25;color:#cfe0d6;padding:56px 20px 40px;
}
.footer-inner{
  display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;
  text-align:left;padding-bottom:36px;border-bottom:1px solid #33443c;
}
.footer-brand{font-weight:800;font-size:18px;color:#fff}
.footer-corp{display:block;font-size:13px;font-weight:600;color:#9fb8ab;letter-spacing:.02em}
.footer-text{color:#9fb8ab;margin-top:8px;font-size:15px}
.footer-label{font-weight:700;color:#fff;font-size:15px;margin-bottom:12px}
.footer-contact p,.footer-links a{color:#9fb8ab;font-size:14px;margin-bottom:8px;display:block}
.footer-contact a,.footer-links a:hover{color:#7cc576}

/* 관련 기관 (기후에너지환경부) */
.footer-org{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:30px 20px 6px;
}
.footer-org-label{font-size:13px;color:#7d9488;letter-spacing:.04em}
.footer-org-link{
  display:inline-flex;align-items:center;justify-content:center;
  background:#fff;border-radius:12px;padding:14px 24px;
  transition:transform .2s,box-shadow .2s;
}
.footer-org-link:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,0,0,.28)}
.footer-org-link:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.footer-org-link img{display:block;height:34px;width:auto}
.footer-copy{margin-top:24px;font-size:13px;color:#7d9488;text-align:center}

/* 클릭 가능한 프로그램 카드 */
a.program{
  display:block;color:inherit;
  transition:transform .2s,box-shadow .2s;
}
a.program:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(31,107,65,.14)}
a.program:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.program-more{
  display:inline-block;margin-top:14px;
  font-size:14px;font-weight:700;color:var(--brand);
}
a.program:hover .program-more{color:var(--brand-dark)}

/* 하위 페이지 공통 */
.page-hero{
  background:linear-gradient(160deg,#eef7ec 0%,#ffffff 70%);
  padding:56px 20px 52px;text-align:center;
}
.page-emoji{display:block;font-size:clamp(40px,9vw,56px);line-height:1;margin-bottom:14px}
.crumb{font-size:13px;color:var(--muted);margin-bottom:16px}
.crumb a{color:var(--brand);font-weight:600}
.crumb a:hover{text-decoration:underline}
.crumb i{font-style:normal;margin:0 7px;color:#c2d4c6}
.page-title{font-size:clamp(24px,5vw,40px);font-weight:800;color:var(--brand-dark);line-height:1.35}
.page-lead{margin-top:14px;color:var(--muted);font-size:clamp(15px,2.4vw,17px)}
.prose{max-width:780px;margin:0 auto}
.prose h3{font-size:20px;color:var(--brand-dark);margin:34px 0 12px}
.prose h3:first-child{margin-top:0}
.prose p{color:var(--muted);margin-bottom:14px}
.prose ul{margin:0 0 14px;padding-left:4px;list-style:none}
.prose li{position:relative;padding-left:20px;color:var(--muted);margin-bottom:9px}
.prose li::before{content:"·";position:absolute;left:6px;color:var(--brand);font-weight:800}
.facts{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;
  max-width:780px;margin:0 auto;
}
.fact{
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:20px 22px;border-top:4px solid var(--brand);
}
.fact dt{font-size:13px;font-weight:700;color:var(--brand-dark);letter-spacing:.02em}
.fact dd{margin-top:6px;color:var(--muted);font-size:15px}
.back-link{
  display:inline-flex;align-items:center;gap:8px;margin-top:8px;
  color:var(--brand);font-weight:700;font-size:15px;
}
.back-link:hover{color:var(--brand-dark);text-decoration:underline}
.page-foot-nav{text-align:center;padding:0 20px 72px}

/* 도식(다이어그램) */
.diagram{margin:0;max-width:1040px;margin-left:auto;margin-right:auto}
.diagram-scroll{
  overflow-x:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  box-shadow:var(--shadow);
}
.diagram-scroll img{display:block;width:100%;min-width:860px;height:auto}
.diagram figcaption{margin-top:14px;font-size:13.5px;color:var(--muted);text-align:center}
.scroll-hint{
  display:none;margin-bottom:10px;text-align:center;
  font-size:12.5px;color:var(--brand);font-weight:700;
}

/* 일정 목록 */
.sched{max-width:780px;margin:34px auto 0;list-style:none;padding:0}
.sched li{
  display:grid;grid-template-columns:186px 1fr;gap:16px;
  padding:12px 0;border-bottom:1px solid #e4eee4;
  color:var(--muted);font-size:15px;
}
.sched li:last-child{border-bottom:0}
.sched-when{font-weight:700;color:var(--brand-dark)}
.sched-note{max-width:780px;margin:16px auto 0;font-size:13px;color:var(--muted)}

/* 본문 링크 · 앵커 이동 시 sticky 헤더 가림 방지 */
.prose a{color:var(--brand);font-weight:700}
.prose a:hover{color:var(--brand-dark);text-decoration:underline}
section[id]{scroll-margin-top:86px}

/* 프로세스 흐름 */
.flow{
  display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
  max-width:1040px;margin:0 auto;
}
.flow-step{
  position:relative;background:#fff;border:1px solid #e3efe3;
  border-radius:var(--radius);padding:26px 22px 24px;box-shadow:var(--shadow);
}
.flow-step::after{
  content:"";position:absolute;top:50%;right:-28px;
  width:13px;height:13px;
  border-top:3px solid #a9d5b0;border-right:3px solid #a9d5b0;
  transform:translateY(-50%) rotate(45deg);
}
.flow-step:last-child::after{display:none}
.flow-num{
  display:inline-block;background:var(--brand);color:#fff;
  font-size:12px;font-weight:800;letter-spacing:.06em;
  padding:4px 11px;border-radius:999px;
}
.flow-icon{display:block;margin:16px 0 12px}
.flow-step h3{font-size:17px;margin-bottom:9px;color:var(--brand-dark)}
.flow-step p{color:var(--muted);font-size:14.5px}
.flow-step strong{color:var(--brand-dark);font-weight:700}
.flow-loop{
  display:block;max-width:1040px;margin:34px auto 0;text-align:center;
  background:var(--bg-soft);border:1px dashed #bcdcc0;border-radius:999px;
  padding:13px 22px;color:var(--brand-dark);font-size:15px;font-weight:600;
}
.flow-loop strong{color:var(--brand)}

/* 상세 카드 (AI 진단 · 미션) */
.detail-grid{
  display:grid;grid-template-columns:1.15fr 1fr;gap:26px;
  max-width:1040px;margin:44px auto 0;
}
.detail-card{
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:28px 26px;border-top:5px solid var(--brand);
}
.detail-title{font-size:18px;color:var(--brand-dark);margin-bottom:16px}
.detail-list{list-style:none;padding:0}
.detail-list li{
  display:grid;grid-template-columns:104px 1fr;gap:14px;
  padding:11px 0;border-bottom:1px solid #eef4ee;
  color:var(--muted);font-size:14.5px;
}
.detail-list li:last-child{border-bottom:0}
.detail-key{font-weight:700;color:var(--brand-dark)}
.mission-list{list-style:none;padding:0;display:flex;flex-wrap:wrap;gap:9px}
.mission-list li{
  background:var(--bg-soft);border:1px solid #dceadb;border-radius:999px;
  padding:8px 15px;color:var(--brand-dark);font-size:14px;font-weight:600;
}
.detail-note{margin-top:16px;font-size:12.5px;color:var(--muted);line-height:1.6}

/* 중간 폭 — 흐름 2열 */
@media(min-width:730px) and (max-width:1040px){
  .flow{grid-template-columns:repeat(2,1fr);gap:24px}
  .flow-step::after{display:none}
  .detail-grid{grid-template-columns:1fr}
}

/* ─────────────────────────────────────────────
   회장 인사말 — 제공받은 원고의 스타일을 그대로 옮김.
   클래스는 kgea- 접두어로 기존 CSS와 충돌하지 않음.
   원본의 body 규칙은 사이트 전체 배경/폰트를 덮어써서 제외했고,
   대신 .kgea-greeting-wrap 으로 배경만 살렸다.
   ───────────────────────────────────────────── */
.kgea-greeting-wrap{background:#f7f9f6}

.kgea-greeting{
  --kgea-green:#2f7a4d;
  --kgea-green-deep:#1e5233;
  --kgea-green-light:#eaf3ec;
  --kgea-text:#2b3230;
  --kgea-muted:#5f6b66;

  max-width:820px;
  margin:0 auto;
  padding:72px 28px 88px;
  color:var(--kgea-text);
  line-height:1.95;
  letter-spacing:-0.01em;
  word-break:keep-all;
}
.kgea-greeting__eyebrow{
  display:inline-block;
  font-size:13px;font-weight:700;letter-spacing:.18em;
  color:var(--kgea-green);background:var(--kgea-green-light);
  border-radius:999px;padding:7px 16px;margin:0 0 24px;
}
.kgea-greeting__title{
  font-size:clamp(26px,4.2vw,38px);
  font-weight:800;line-height:1.45;letter-spacing:-.03em;
  color:var(--kgea-green-deep);margin:0 0 14px;
}
.kgea-greeting__rule{
  width:52px;height:4px;border:0;border-radius:2px;
  background:var(--kgea-green);margin:0 0 40px;
}
.kgea-greeting p{font-size:17px;margin:0 0 26px}
.kgea-greeting__lead{
  font-size:18.5px !important;font-weight:600;color:var(--kgea-green-deep);
}
.kgea-greeting__program{
  background:#fff;border:1px solid #e2ebe4;
  border-left:4px solid var(--kgea-green);border-radius:4px;
  padding:24px 28px;margin:0 0 20px;
}
.kgea-greeting__program h3{
  font-size:17px;font-weight:700;color:var(--kgea-green-deep);
  margin:0 0 8px;letter-spacing:-.02em;
}
.kgea-greeting__program p{font-size:16.5px;color:var(--kgea-muted);margin:0}
.kgea-greeting__closing{margin-top:38px !important;font-weight:600}
.kgea-greeting__sign{
  margin-top:48px;padding-top:28px;border-top:1px solid #dde7e0;
  text-align:right;font-size:16px;color:var(--kgea-muted);
}
.kgea-greeting__sign strong{
  display:inline-block;margin-left:10px;
  font-size:19px;font-weight:700;color:var(--kgea-text);letter-spacing:.02em;
}
@media (max-width:640px){
  .kgea-greeting{padding:48px 20px 64px;line-height:1.85}
  .kgea-greeting p{font-size:16px}
  .kgea-greeting__program{padding:20px 20px}
}

/* 인사말 페이지 상단 엠블럼 */
.greeting-emblem{display:block;margin:0 auto 14px;width:88px;height:88px}

/* 협회 소개 → 회장 인사말 진입 카드 */
.greet-card{
  display:flex;align-items:center;gap:22px;
  max-width:1040px;margin:40px auto 0;
  background:#fff;border:1px solid #e3efe3;border-left:5px solid var(--brand);
  border-radius:var(--radius);padding:24px 28px;box-shadow:var(--shadow);
  transition:transform .2s,box-shadow .2s;
}
.greet-card:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,107,65,.16)}
.greet-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.greet-icon{flex-shrink:0;width:64px;height:64px}
.greet-body{flex:1;min-width:0}
.greet-label{
  display:inline-block;background:var(--bg-soft);color:var(--brand-dark);
  font-size:12px;font-weight:800;letter-spacing:.06em;
  padding:4px 12px;border-radius:999px;margin-bottom:9px;
}
.greet-title{
  display:block;font-size:18px;font-weight:800;color:var(--brand-dark);
  line-height:1.5;word-break:keep-all;
}
.greet-name{display:block;margin-top:7px;font-size:14px;color:var(--muted)}
.greet-name strong{color:var(--brand-dark)}
.greet-cta{
  flex-shrink:0;background:var(--brand);color:#fff;
  font-size:14px;font-weight:700;padding:11px 20px;border-radius:999px;
  white-space:nowrap;
}
.greet-card:hover .greet-cta{background:var(--brand-dark)}

/* 뉴스 — 태그 */
.news-meta{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.news-tag{
  display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.04em;
  padding:4px 11px;border-radius:999px;
}
.news-tag-notice{background:#e8f1fa;color:#33608c}
.news-tag-program{background:#eef7ec;color:var(--brand-dark)}
.news-tag-campaign{background:#fdeef3;color:#b23a66}
.news-tag-edu{background:#f4efe3;color:#8a6d3b}
.news-date{font-size:12.5px;color:var(--muted);font-weight:600}

/* 뉴스 — 메인 카드 그리드 */
.news-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;
  max-width:1040px;margin:0 auto;
}
.news-card{
  display:block;background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:26px 24px;box-shadow:var(--shadow);color:inherit;
  transition:transform .2s,box-shadow .2s;
}
.news-card:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(31,107,65,.14)}
.news-card:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.news-card h3{font-size:17px;color:var(--brand-dark);margin-bottom:9px;word-break:keep-all}
.news-card p{color:var(--muted);font-size:14.5px}
.news-more{
  display:inline-block;margin-top:14px;
  font-size:13.5px;font-weight:700;color:var(--brand);
}
.news-card:hover .news-more{color:var(--brand-dark)}
.news-all{text-align:center;margin-top:34px}
.news-all a{
  display:inline-block;border:2px solid var(--brand);color:var(--brand);
  font-weight:700;font-size:15px;padding:12px 28px;border-radius:999px;transition:.2s;
}
.news-all a:hover{background:var(--brand);color:#fff}

/* 뉴스 — 전체 목록 페이지 */
.news-list{list-style:none;padding:0;max-width:900px;margin:0 auto}
.news-list li{border-bottom:1px solid #e4eee4}
.news-list li:last-child{border-bottom:0}
.news-row{
  display:grid;grid-template-columns:118px 1fr 24px;gap:22px;align-items:start;
  padding:26px 8px;color:inherit;transition:background .2s;
}
.news-row:hover{background:var(--bg-soft)}
.news-row:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.news-row .news-meta{flex-direction:column;align-items:flex-start;gap:7px;margin-bottom:0}
.news-text{min-width:0}
.news-title{
  display:block;font-size:17.5px;font-weight:800;color:var(--brand-dark);
  line-height:1.5;word-break:keep-all;
}
.news-desc{display:block;margin-top:8px;color:var(--muted);font-size:15px;word-break:keep-all}
.news-arrow{
  align-self:center;font-size:18px;color:#bcdcc0;font-weight:700;transition:color .2s,transform .2s;
}
.news-row:hover .news-arrow{color:var(--brand);transform:translateX(3px)}

/* 환경·AI 뉴스 (자동 수집 피드) */
.feed-list{list-style:none;padding:0;max-width:900px;margin:0 auto}
.feed-list li{border-bottom:1px solid #dfeadf}
.feed-list li:last-child{border-bottom:0}
.feed-list a{
  display:grid;grid-template-columns:86px 1fr;gap:18px;align-items:baseline;
  padding:16px 10px;color:inherit;transition:background .2s;
}
.feed-list a:hover{background:#fff}
.feed-list a:focus-visible{outline:2px solid var(--brand);outline-offset:-2px}
.feed-kw{
  font-size:11.5px;font-weight:800;letter-spacing:.03em;
  color:var(--brand-dark);background:#fff;border:1px solid #cfe3d1;
  padding:3px 9px;border-radius:999px;text-align:center;white-space:nowrap;
}
.feed-title{
  font-size:16px;font-weight:700;color:var(--ink);
  line-height:1.55;word-break:keep-all;
}
.feed-list a:hover .feed-title{color:var(--brand-dark);text-decoration:underline}
.feed-src{
  grid-column:2;display:block;margin-top:5px;
  font-size:12.5px;color:var(--muted);
}
.feed-empty{
  max-width:900px;margin:0 auto;text-align:center;
  color:var(--muted);font-size:15px;padding:32px 12px;
}
.feed-note{
  max-width:900px;margin:20px auto 0;
  font-size:12px;color:var(--muted);line-height:1.65;text-align:center;
}

/* 에코뉴스 — 카테고리 이동 탭 */
.cat-nav{
  display:flex;flex-wrap:wrap;gap:8px;justify-content:center;
  max-width:920px;margin:0 auto 38px;
}
.cat-nav a{
  font-size:14px;font-weight:700;color:var(--muted);
  background:#fff;border:1px solid #dfeadf;border-radius:999px;
  padding:9px 18px;transition:.2s;white-space:nowrap;
}
.cat-nav a:hover{border-color:var(--brand);color:var(--brand)}
.cat-nav a.is-active{background:var(--brand);border-color:var(--brand);color:#fff}
.cat-more{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:36px}
.cat-more a{
  border:2px solid var(--brand);color:var(--brand);font-weight:700;font-size:14.5px;
  padding:11px 22px;border-radius:999px;transition:.2s;white-space:nowrap;
}
.cat-more a:hover{background:var(--brand);color:#fff}
.feed-policy{
  max-width:900px;margin:26px auto 0;
  font-size:12.5px;color:var(--muted);line-height:1.7;text-align:center;
}
.reporter-heading{margin-top:58px}
.news-tag-ai{background:#eceefa;color:#4a4f8c}
.news-tag-reporter{background:#f6eef7;color:#7a4a86}

/* ECO 뜻풀이 */
.eco-def{
  max-width:780px;margin:0 auto 42px;text-align:center;
  background:var(--bg-soft);border:1px solid #dceadb;border-radius:var(--radius);
  padding:28px 24px;
}
.eco-def-word{
  font-size:clamp(34px,7vw,52px);font-weight:800;letter-spacing:.14em;
  color:var(--brand);line-height:1;
}
.eco-def-mean{margin-top:10px;font-size:16px;font-weight:700;color:var(--brand-dark);letter-spacing:.04em}

/* 기사 카드 */
.article-card{
  display:grid;grid-template-columns:260px 1fr;gap:26px;align-items:start;
  max-width:960px;margin:0 auto 26px;background:#fff;
  border:1px solid #e3efe3;border-radius:var(--radius);
  padding:24px;box-shadow:var(--shadow);
}
.article-card:has(.article-body:only-child){grid-template-columns:1fr}
.article-photo{width:100%;height:auto;border-radius:10px;display:block}
.article-headline{font-size:20px;color:var(--brand-dark);line-height:1.45;word-break:keep-all}
.article-meta{margin-top:8px;font-size:13px;color:var(--muted);font-weight:600}
.article-text{margin-top:16px}
.article-text p{color:var(--muted);font-size:15.5px;margin-bottom:12px;word-break:keep-all}
.article-text p:last-child{margin-bottom:0}

/* 기사 등록 진입 카드 */
.write-entry{
  display:flex;align-items:center;gap:24px;max-width:900px;margin:0 auto;
  background:#fff;border:2px dashed #bcdcc0;border-radius:var(--radius);
  padding:28px;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.write-entry:hover{border-color:var(--brand);transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,107,65,.14)}
.write-entry:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.write-entry-icon{flex-shrink:0;width:72px;height:72px}
.write-entry-body{flex:1;min-width:0}
.write-entry-title{display:block;font-size:19px;font-weight:800;color:var(--brand-dark)}
.write-entry-desc{display:block;margin-top:7px;font-size:14.5px;color:var(--muted);word-break:keep-all}
.write-entry-cta{
  flex-shrink:0;background:var(--brand);color:#fff;font-weight:700;font-size:14.5px;
  padding:12px 22px;border-radius:999px;white-space:nowrap;
}
.write-entry:hover .write-entry-cta{background:var(--brand-dark)}
.write-entry-note{max-width:900px;margin:16px auto 0;text-align:center;font-size:13px;color:var(--muted)}

/* 비밀번호 입력 */
.gate-box{
  max-width:420px;margin:0 auto;text-align:center;
  background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:38px 30px;box-shadow:var(--shadow);
}
.gate-title{font-size:20px;color:var(--brand-dark)}
.gate-desc{margin:10px 0 22px;font-size:14.5px;color:var(--muted)}
.gate-input{
  width:100%;font-size:26px;text-align:center;letter-spacing:.5em;
  font-family:inherit;padding:14px 10px;border:2px solid #dfeadf;border-radius:12px;
}
.gate-input:focus{outline:none;border-color:var(--brand)}
.gate-btn{width:100%;margin-top:16px}

/* 기사 작성 폼 */
.write-form{max-width:760px;margin:0 auto}
.field{display:block;margin-bottom:26px}
.field-label{display:block;font-size:14.5px;font-weight:700;color:var(--brand-dark);margin-bottom:9px}
.field-label em{
  font-style:normal;font-size:11.5px;font-weight:800;color:#b23a66;
  background:#fdeef3;padding:2px 8px;border-radius:999px;margin-left:7px;
}
.field-input{
  width:100%;font-family:inherit;font-size:16px;color:var(--ink);
  padding:14px 16px;border:1px solid #dfeadf;border-radius:12px;background:#fff;
}
.field-input:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px rgba(46,139,87,.12)}
.field-textarea{line-height:1.8;resize:vertical;min-height:260px}
.field-hint{display:block;margin-top:7px;font-size:12.5px;color:var(--muted);text-align:right}
.photo-drop{
  display:flex;align-items:center;justify-content:center;
  min-height:180px;border:2px dashed #cfe3d1;border-radius:12px;
  background:var(--bg-soft);cursor:pointer;overflow:hidden;padding:12px;
}
.photo-drop:hover{border-color:var(--brand)}
.photo-drop img{max-width:100%;max-height:340px;border-radius:8px;display:block}
.photo-label{text-align:center;color:var(--muted);font-size:15px;font-weight:600;line-height:1.7}
.photo-label small{font-size:12.5px;font-weight:500}
.photo-clear{margin-top:12px;padding:9px 18px;font-size:14px}
.write-actions{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.form-msg{
  margin-top:16px;padding:13px 16px;border-radius:10px;
  font-size:14.5px;font-weight:600;line-height:1.6;
}
.form-msg.is-ok{background:#eef7ec;color:var(--brand-dark);border:1px solid #bcdcc0}
.form-msg.is-err{background:#fdeef3;color:#b23a66;border:1px solid #f2cdda}

/* 비밀번호 변경 (관리자) */
.pw-change{
  max-width:760px;margin:52px auto 0;
  border-top:1px solid #e4eee4;padding-top:26px;
}
.pw-change summary{
  cursor:pointer;font-size:14px;font-weight:700;color:var(--muted);
  list-style:none;padding:8px 0;
}
.pw-change summary::-webkit-details-marker{display:none}
.pw-change summary::before{content:"⚙ ";color:var(--brand)}
.pw-change summary:hover{color:var(--brand-dark)}
.pw-change-desc{margin:12px 0 20px;font-size:13.5px;color:var(--muted)}

/* 관련 기관 바로가기 — 항목이 둘 이상일 때 나란히 */
.footer-org-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;align-items:stretch}
.footer-org-row .footer-org-link{display:flex;align-items:center}
.footer-org-kb{gap:13px;padding:12px 20px}
.footer-org-emblem{height:44px;width:44px;flex-shrink:0}
.footer-org-sig{display:flex;flex-direction:column;line-height:1.3;text-align:left}
.footer-org-sig b{
  font-family:'Gowun Batang','Nanum Myeongjo','Batang','바탕',serif;
  font-size:15px;font-weight:700;color:#1E5233;letter-spacing:-.01em;white-space:nowrap;
}
.footer-org-sig small{
  font-family:'Cormorant Garamond',Georgia,'Times New Roman',serif;
  font-size:11.5px;color:#8A6A20;letter-spacing:.08em;margin-top:2px;white-space:nowrap;
}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* 에코뉴스 대표 카드 — AI환경뉴스 (매일 갱신) */
.news-featured{
  display:grid;grid-template-columns:180px 1fr auto;gap:26px;align-items:center;
  max-width:1040px;margin:0 auto 26px;
  background:linear-gradient(135deg,#f2f8f1,#ffffff 60%);
  border:1px solid #d8e8d8;border-left:5px solid var(--brand);
  border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);
  color:inherit;transition:transform .2s,box-shadow .2s;
}
.news-featured:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(31,107,65,.16)}
.news-featured:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.news-featured-side{display:flex;flex-direction:column;gap:9px;align-items:flex-start}
.news-featured-when{font-size:12px;color:var(--muted);font-weight:600;white-space:nowrap}
.news-featured-main{min-width:0}
.news-featured-title{display:block;font-size:18px;font-weight:800;color:var(--brand-dark)}
.news-featured-teaser{
  display:block;margin-top:8px;font-size:15px;color:var(--muted);
  line-height:1.6;word-break:keep-all;
}
.news-featured-src{display:block;margin-top:7px;font-size:12.5px;color:var(--faint,#8A968F)}
.news-featured-cta{
  background:var(--brand);color:#fff;font-size:14px;font-weight:700;
  padding:11px 20px;border-radius:999px;white-space:nowrap;
}
.news-featured:hover .news-featured-cta{background:var(--brand-dark)}

/* 발행 검토 */
.desk-head{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  max-width:900px;margin:0 auto 14px;flex-wrap:wrap;
}
.desk-count{
  display:inline-block;background:var(--brand);color:#fff;
  font-size:14px;font-weight:800;min-width:28px;text-align:center;
  padding:2px 10px;border-radius:999px;margin-left:8px;vertical-align:middle;
}
.desk-note{
  max-width:900px;margin:0 auto 28px;padding:14px 18px;
  background:#fdf6e8;border:1px solid #ecd9ae;border-radius:10px;
  font-size:14px;color:#7a5f24;line-height:1.7;
}
.desk-sub{margin-top:64px}
.desk-foot{max-width:900px;margin:40px auto 0;text-align:center}
.draft{
  max-width:900px;margin:0 auto 30px;background:#fff;
  border:1px solid #e3efe3;border-left:5px solid #d9a83e;
  border-radius:var(--radius);padding:26px;box-shadow:var(--shadow);
}
.draft-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.draft-tag{
  background:#fdf1dc;color:#8a6a20;border:1px solid #ecd9ae;
  font-size:11.5px;font-weight:800;letter-spacing:.04em;
  padding:4px 11px;border-radius:999px;
}
.draft-meta{font-size:12.5px;color:var(--muted);font-weight:600}
.draft-meta b{color:#8a6a20}
.draft .field{margin-bottom:18px}
.draft-source{
  margin:-4px 0 18px;font-size:13px;color:var(--muted);
  background:var(--bg-soft);border-radius:8px;padding:10px 14px;
}
.draft-source a{color:var(--brand);font-weight:700}
.draft-source a:hover{text-decoration:underline}
.draft-actions{display:flex;gap:10px;flex-wrap:wrap}
.draft-actions .btn{padding:11px 22px;font-size:15px}

/* 발행된 기사 목록 (검토 화면) */
.pub-list{list-style:none;padding:0;max-width:900px;margin:0 auto}
.pub-list li{
  display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;
  padding:15px 4px;border-bottom:1px solid #e4eee4;
}
.pub-list li:last-child{border-bottom:0}
.pub-title{font-size:15.5px;font-weight:700;color:var(--brand-dark);word-break:keep-all}
.pub-meta{font-size:12.5px;color:var(--muted);white-space:nowrap}
.pub-undo{padding:7px 14px;font-size:13px;white-space:nowrap}

/* AI환경뉴스에 실린 발행 기사 */
.pub-article{
  max-width:900px;margin:0 auto 22px;background:#fff;
  border:1px solid #e3efe3;border-left:5px solid var(--brand);
  border-radius:var(--radius);padding:26px 28px;box-shadow:var(--shadow);
}
.pub-article h3{font-size:20px;color:var(--brand-dark);line-height:1.45;word-break:keep-all}
.pub-article-meta{margin-top:9px;font-size:13px;color:var(--muted);font-weight:600}
.pub-article-summary{
  margin-top:14px;padding:12px 16px;background:var(--bg-soft);border-radius:8px;
  font-size:14.5px;color:var(--brand-dark);font-weight:600;word-break:keep-all;
}
.pub-article-text{margin-top:16px}
.pub-article-text p{color:var(--muted);font-size:15.5px;margin-bottom:12px;word-break:keep-all}
.pub-article-text p:last-child{margin-bottom:0}
.pub-article-toggle{
  margin-top:14px;background:none;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:14px;font-weight:700;color:var(--brand);
}
.pub-article-toggle:hover{color:var(--brand-dark);text-decoration:underline}
.pub-ai-note{
  display:inline-block;margin-top:12px;font-size:11.5px;font-weight:700;
  background:#f4f2ec;color:#7a6f5f;border:1px solid #e0d9c8;
  padding:3px 10px;border-radius:999px;
}

.pubs-divider{margin-top:56px;font-size:20px}

/* ─── 협회 소개 (첫인상 구역) ─────────────────────────────────────────
   섹션 안에 전체 폭 다크 밴드를 넣기 위해 좌우 여백을 섹션이 아닌
   하위 블록이 갖게 한다. .section 의 기본 padding 을 여기서만 푼다.
   ────────────────────────────────────────────────────────────────── */
.about-v2{padding:0}
.about-top{padding:clamp(64px,9vw,96px) 20px clamp(56px,7vw,76px)}
.about-bottom{padding:clamp(56px,7vw,76px) 20px clamp(64px,9vw,96px)}

.about-eyebrow{
  display:flex;align-items:center;gap:.75rem;
  font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--brand);margin-bottom:18px;
}
.about-eyebrow::before{content:"";width:28px;height:1px;background:currentColor;opacity:.6;flex:none}
.about-headline{
  font-size:clamp(28px,5vw,46px);font-weight:800;line-height:1.32;
  letter-spacing:-.03em;color:var(--ink);word-break:keep-all;
}
.about-headline em{font-style:normal;color:var(--brand)}
.about-rule{
  display:block;width:56px;height:4px;border-radius:2px;
  background:linear-gradient(90deg,var(--brand),var(--accent));
  margin:26px 0 44px;
}
.about-lead{
  font-size:clamp(17px,2.3vw,19.5px);font-weight:700;color:var(--brand-dark);
  line-height:1.7;margin-bottom:18px;word-break:keep-all;
}

/* 다섯 가지 키워드 — 다크 밴드 */
.pillars{
  background:
    radial-gradient(120% 100% at 50% 0%, #172b21 0%, #102019 55%, #0b1712 100%);
  color:#e9f1e7;padding:clamp(58px,8vw,86px) 20px;
  position:relative;overflow:hidden;
}
.pillars::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(90deg,rgba(124,197,118,.05) 0 1px,transparent 1px 52px);
}
.pillars>.container{position:relative;z-index:1}
.pillars-eyebrow{
  font-size:12px;font-weight:800;letter-spacing:.24em;text-transform:uppercase;
  color:var(--accent);text-align:center;margin-bottom:14px;
}
.pillars-title{
  font-size:clamp(23px,3.6vw,32px);font-weight:800;letter-spacing:-.02em;
  text-align:center;color:#fff;
}
.pillars-title.is-en{letter-spacing:.16em;font-size:clamp(26px,4.2vw,40px)}
.pillars-lead{
  text-align:center;color:#a8bdae;margin-top:14px;
  font-size:clamp(14.5px,2vw,16px);word-break:keep-all;
}

.pillar-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(186px,1fr));
  gap:1px;background:rgba(232,240,230,.13);
  border:1px solid rgba(232,240,230,.13);
  margin-top:clamp(38px,5vw,54px);
}
.pillar{
  background:#0f1e17;padding:32px 24px 30px;
  display:flex;flex-direction:column;gap:2px;
  transition:background .25s;
}
.pillar:hover{background:#152a20}
.pillar-icon{display:block;color:var(--accent);margin-bottom:18px}
.pillar-icon svg{width:40px;height:40px;display:block}
.pillar-en{
  font-size:11px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;
  color:#7e9686;
}
.pillar-ko{
  font-size:19px;font-weight:800;color:#fff;letter-spacing:-.02em;
  margin:6px 0 12px;
}
.pillar-desc{
  font-size:14px;color:#a8bdae;line-height:1.75;word-break:keep-all;
}

/* 반응형 */
@media(max-width:729px){
  body{padding-bottom:90px}
  .header-inner{flex-wrap:wrap}
  .nav-toggle{display:flex}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav{
    display:none;order:3;flex-basis:100%;
    flex-direction:column;align-items:stretch;gap:0;
    margin-top:12px;padding-top:8px;border-top:1px solid #e8f0e8;
  }
  .nav.is-open{display:flex}
  .nav a{padding:14px 4px;font-size:16px;border-bottom:1px solid #eef4ee}
  .nav a:last-child{border-bottom:0}
  .nav .nav-cta{margin-top:12px;text-align:center;padding:12px 16px}
  .about-grid,.campaign-grid{grid-template-columns:1fr}
  .about-rule{margin:20px 0 32px}
  .pillar{padding:26px 20px}
  .pillar-icon svg{width:34px;height:34px}
  .section{padding:64px 20px}
  .hero{padding:72px 20px 64px}
  .brand-logo{height:clamp(30px,8vw,38px)}
  .permit{grid-template-columns:1fr;gap:26px;padding:24px}
  .permit-seal{padding:22px 16px}
  .doc-modal{padding:12px}
  .doc-modal-body{padding:12px}
  .about-badge{flex-wrap:wrap;border-radius:20px}
  .badge-text{white-space:normal}
  .permit-facts>div{grid-template-columns:1fr;gap:2px}
  .footer-org{padding:24px 20px 4px}
  .footer-org-link{padding:12px 18px}
  .footer-org-link img{height:26px}
  .footer-org-row{gap:10px}
  .footer-org-kb{padding:10px 16px;gap:10px}
  .footer-org-emblem{height:36px;width:36px}
  .footer-org-sig b{font-size:13.5px}
  .footer-org-sig small{font-size:10.5px}
  .footer-inner{grid-template-columns:1fr;gap:28px}
  .page-hero{padding:44px 20px 40px}
  .facts{grid-template-columns:1fr}
  .scroll-hint{display:block}
  .sched li{grid-template-columns:1fr;gap:3px}
  .flow{grid-template-columns:1fr;gap:36px}
  .flow-step::after{top:auto;bottom:-25px;right:auto;left:50%;transform:translateX(-50%) rotate(135deg)}
  .detail-grid{grid-template-columns:1fr;gap:20px}
  .detail-list li{grid-template-columns:1fr;gap:3px}
  .flow-loop{border-radius:var(--radius);padding:14px 18px}
  .greet-card{flex-direction:column;align-items:flex-start;gap:16px;padding:22px}
  .greet-cta{width:100%;text-align:center}
  .draft{padding:20px}
  .draft-actions .btn{width:100%;text-align:center}
  .pub-list li{grid-template-columns:1fr;gap:6px}
  .pub-undo{justify-self:start}
  .pub-article{padding:20px}
  .news-row{grid-template-columns:1fr;gap:10px;padding:22px 4px}
  .news-featured{grid-template-columns:1fr;gap:14px;padding:22px;align-items:flex-start}
  .news-featured-side{flex-direction:row;align-items:center;gap:10px}
  .news-featured-cta{width:100%;text-align:center}
  .news-row .news-meta{flex-direction:row;align-items:center;gap:10px}
  .news-arrow{display:none}
  .feed-list a{grid-template-columns:1fr;gap:6px}
  .feed-src{grid-column:1}
  .cat-nav{gap:6px;margin-bottom:30px}
  .cat-nav a{font-size:13px;padding:8px 14px}
  .cat-more a{width:100%;text-align:center}
  .article-card{grid-template-columns:1fr;gap:18px;padding:20px}
  .write-entry{flex-direction:column;align-items:flex-start;gap:16px;padding:24px}
  .write-entry-cta{width:100%;text-align:center}
  .gate-box{padding:30px 22px}
  .gate-input{font-size:22px;letter-spacing:.35em}
}

/* ─────────────────────────────────────────────
   메인 상단 롤링 배너 (기획서 5장)
   PC 1600×640(2.5:1) · 모바일 800×800(1:1) 기준.
   이미지가 없는 배너는 배경색 + 문구로만 보인다.
   ───────────────────────────────────────────── */
.mbanner{position:relative;background:#eef4ee;overflow:hidden}
.mbanner-viewport{overflow:hidden}
.mbanner-track{display:flex;transition:transform .5s ease}
@media (prefers-reduced-motion:reduce){
  .mbanner-track{transition:none}
}

.mbanner-slide{
  position:relative;flex:0 0 100%;min-width:100%;
  display:flex;align-items:center;          /* 글자를 세로 가운데로 (2026-09-06) */
  aspect-ratio:2.5/1;color:#fff;text-decoration:none;
}
.mbanner-img{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
  /* ⚠️ AI 이미지 생성기(z-image-turbo)는 **무조건 1024×1024 정사각형**만 낸다.
     배너 틀은 2.5:1 이라 위아래가 잘린다. 가운데를 자르면 하늘만 남고
     오로라와 지평선이 날아가므로, 자르는 중심을 아래쪽으로 내려 둔다. */
  object-position:center 66%;
}
/* 사진 위 글씨가 읽히도록 어둠을 깔아 준다.
   ⚠️ 글자가 좌측 가운데로 옮겨졌으므로 어둠도 **왼쪽**에 깔아야 한다.
      아래쪽에 깔면 글자가 있는 곳은 밝고 빈 곳만 어두워져 아무 소용이 없다. */
.mbanner-slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to right,rgba(0,0,0,.66),rgba(0,0,0,.34) 44%,rgba(0,0,0,.06) 72%,transparent);
}
.mbanner-body{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  width:100%;max-width:1080px;margin:0 auto;
  padding:0 20px;
}
.mbanner-label{
  display:inline-block;background:rgba(255,255,255,.92);color:var(--brand-dark);
  font-size:12px;font-weight:800;letter-spacing:.04em;
  padding:5px 12px;border-radius:999px;
}
.mbanner-label-campaign{background:#dff3e2}
.mbanner-label-program{background:#e5f0fb;color:#1c4f80}
.mbanner-label-promotion{background:#fdf0dc;color:#8a5a12}
.mbanner-label-sponsor{background:#f3e9fb;color:#5b3184}
.mbanner-title{
  font-size:clamp(20px,3.6vw,38px);font-weight:800;line-height:1.3;
  text-shadow:0 2px 10px rgba(0,0,0,.35);word-break:keep-all;
}
.mbanner-sub{
  font-size:clamp(13px,1.7vw,18px);font-weight:600;line-height:1.55;
  text-shadow:0 2px 8px rgba(0,0,0,.35);word-break:keep-all;opacity:.95;
}

/* 좌우 화살표 */
.mbanner-arrow{
  position:absolute;top:50%;transform:translateY(-50%);z-index:2;
  width:44px;height:44px;padding:0;
  background:rgba(255,255,255,.85);border:0;border-radius:50%;
  cursor:pointer;transition:background .2s;
}
.mbanner-arrow:hover{background:#fff}
.mbanner-arrow:focus-visible{outline:3px solid #fff;outline-offset:2px}
.mbanner-arrow::before{
  content:"";display:block;width:11px;height:11px;margin:0 auto;
  border-top:2.5px solid var(--brand-dark);border-right:2.5px solid var(--brand-dark);
}
.mbanner-prev{left:14px}
.mbanner-prev::before{transform:translateX(2px) rotate(-135deg)}
.mbanner-next{right:14px}
.mbanner-next::before{transform:translateX(-2px) rotate(45deg)}

/* 인디케이터 + 재생/정지 */
.mbanner-controls{
  position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:2;
  display:flex;align-items:center;gap:12px;
  background:rgba(0,0,0,.34);border-radius:999px;padding:7px 12px;
  backdrop-filter:blur(4px);
}
.mbanner-dots{display:flex;align-items:center;gap:7px}
.mbanner-dot{
  width:9px;height:9px;padding:0;border:0;border-radius:50%;
  background:rgba(255,255,255,.5);cursor:pointer;transition:background .2s,width .2s;
}
.mbanner-dot.is-on{background:#fff;width:22px;border-radius:999px}
.mbanner-dot:focus-visible{outline:2px solid #fff;outline-offset:2px}

.mbanner-toggle{
  display:flex;align-items:center;gap:6px;
  background:transparent;border:0;padding:0 2px;
  color:#fff;font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;
}
.mbanner-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px;border-radius:4px}
/* 정지 아이콘(막대 두 개) → 누르면 재생 아이콘(삼각형)으로 바뀐다 */
.mbanner-toggle-icon{
  display:block;width:10px;height:11px;
  border-left:3px solid #fff;border-right:3px solid #fff;
}
.mbanner-toggle.is-paused .mbanner-toggle-icon{
  width:0;height:0;border:0;
  border-left:9px solid #fff;border-top:6px solid transparent;border-bottom:6px solid transparent;
}
.mbanner-toggle-text{letter-spacing:.02em}

@media(max-width:729px){
  .mbanner-slide{aspect-ratio:1/1}
  /* 모바일은 정사각형이라 조작 버튼과 겹치지 않게 살짝 올려 둔다 */
  .mbanner-body{gap:6px;padding-bottom:34px}
  .mbanner-arrow{display:none}          /* 모바일은 스와이프로 넘긴다 */
  .mbanner-controls{bottom:12px}
}

/* ─────────────────────────────────────────────
   공지사항 (기획서 4-1 · 3-1 콘텐츠)
   목록은 사이트에 이미 있는 .news-list / .news-row 를 그대로 쓴다.
   여기 있는 것은 상세 페이지와 '고정' 표시뿐이다.
   ───────────────────────────────────────────── */
.news-tag-pin{background:#fdf0dc;color:#8a5a12}

.notice-empty{
  text-align:center;color:var(--muted);font-size:15px;
  padding:52px 20px;background:var(--bg-soft);border-radius:var(--radius);
}

/* 상세 */
.notice-article{max-width:820px;margin:0 auto}
.notice-article-date{font-size:13px;font-weight:700;color:var(--brand);letter-spacing:.02em}
.notice-article-title{
  font-size:clamp(22px,3.6vw,32px);font-weight:800;color:var(--brand-dark);
  line-height:1.38;margin:10px 0 18px;word-break:keep-all;
}
.notice-article-lead{
  font-size:16.5px;font-weight:600;color:var(--ink);line-height:1.75;
  background:var(--bg-soft);border-left:4px solid var(--brand);
  padding:16px 20px;border-radius:0 10px 10px 0;margin-bottom:28px;word-break:keep-all;
}
.notice-article-body{
  border-top:1px solid var(--line,#e4eee4);padding-top:26px;
  font-size:16px;line-height:1.9;word-break:keep-all;
}
.notice-article-body p{margin-bottom:18px}
.notice-article-body p:last-child{margin-bottom:0}

/* 이전 · 다음 공지 */
.notice-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:12px;
  max-width:820px;margin:44px auto 0;
}
.notice-nav-item{
  display:block;background:#fff;border:1px solid #e3efe3;border-radius:var(--radius);
  padding:16px 18px;transition:border-color .2s,transform .2s;
}
.notice-nav-item:hover{border-color:var(--brand);transform:translateY(-2px)}
.notice-nav-item:focus-visible{outline:2px solid var(--brand);outline-offset:3px}
.notice-nav-label{
  display:block;font-size:12px;font-weight:700;color:var(--brand);
  letter-spacing:.04em;margin-bottom:5px;
}
.notice-nav-title{
  display:block;font-size:14.5px;font-weight:700;color:var(--ink);
  line-height:1.5;word-break:keep-all;
}
@media(max-width:729px){
  .notice-nav{grid-template-columns:1fr;gap:10px}
  .notice-article-lead{font-size:15.5px;padding:14px 16px}
  .notice-article-body{font-size:15.5px}
}

/* ─────────────────────────────────────────────
   공통 헤더 — 메뉴가 8개로 늘어난 뒤의 조정
   (협회 소개 · 주요 활동 · 캠페인 · 교육 프로그램 · K브랜드대상 · 공지사항 · 에코뉴스 · 로그인 · 문의하기)

   메뉴가 9개(로그인 포함)라 가로로 다 펴면 약 1080px 가 필요하다.
   그보다 좁으면 글자가 겹치므로 햄버거로 접히는 폭을 **1200px** 로 잡았다.
   (2026-09-07: 로그인 자리에 이름표가 붙어 메뉴가 넓어졌다. 1100 이던 것을 올렸다)
   ⚠️ site.js 의 NARROW 값과 반드시 같아야 한다. 메뉴를 더 늘리면 여기부터 다시 계산할 것.
   ───────────────────────────────────────────── */

/* ⚠️ **본문 container 는 1080px 인데 메뉴는 그 안에 안 들어간다.**
   로고+협회명 약 270px + 메뉴 약 795px = 약 1065px 인데,
   1080 에서 좌우 여백 40 을 빼면 쓸 수 있는 폭이 1040px 뿐이다.
   그래서 아무리 넓은 화면에서도 메뉴가 넘쳐 두 줄이 됐다(사장님 신고 2026-09-07).
   **헤더만** 넓게 준다. 본문 글줄은 1080 이 읽기 좋아 그대로 둔다. */
.site-header .container{max-width:1240px}

/* 넓은 화면에서도 폭에 따라 간격이 조금씩 줄어들게 해서 여유를 만든다 */
.nav{gap:clamp(14px,1.7vw,22px)}

@media(max-width:1200px){
  .header-inner{flex-wrap:wrap}
  .nav-toggle{display:flex}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2){opacity:0}
  .nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

  /* 접히는 것은 '메뉴'뿐이다. 아래 최소 헤더까지 같이 숨지 않도록 id 로 좁혀 잡았다. */
  #site-nav{
    display:none;order:3;flex-basis:100%;
    flex-direction:column;align-items:stretch;gap:0;
    margin-top:12px;padding-top:8px;border-top:1px solid #e8f0e8;
  }
  #site-nav.is-open{display:flex}
  #site-nav a{padding:14px 4px;font-size:16px;border-bottom:1px solid #eef4ee}
  #site-nav a:last-child{border-bottom:0}
  #site-nav .nav-cta{margin-top:12px;text-align:center;padding:12px 16px}

  /* 메뉴 없는 최소 헤더(에코기자 작성·검토)의 '돌아가기'.
     예전 .nav{display:none} 규칙이 이 링크까지 같이 숨겨서, 좁은 화면에서는
     돌아갈 방법이 없었다. 여기서 되살린다. */
  .site-header .nav:not(#site-nav){
    display:flex;flex-direction:row;flex-basis:auto;order:0;
    margin:0;padding:0;border:0;gap:0;
  }
  .site-header .nav:not(#site-nav) a{
    padding:0;border-bottom:0;font-size:14px;font-weight:700;
  }
}

/* ─────────────────────────────────────────────
   푸터 맨 아래 — 관리자 로그인 버튼
   처음엔 흐린 글씨로 뒀더니 어두운 배경(#1f2b25)에서 대비가 3.4:1 밖에 안 나와
   사장님이 못 찾으셨다. 테두리 있는 버튼으로 바꾸고 대비를 8:1 로 올렸다.
   저작권 문구는 원래대로 가운데 정렬을 유지하고, 버튼만 오른쪽에 얹는다.
   (로그인은 /admin 쪽에서 막으므로 버튼이 보이는 것 자체는 문제없다)
   ───────────────────────────────────────────── */
.footer-bottom{position:relative}

.footer-admin{
  position:absolute;right:20px;bottom:0;
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;font-weight:700;
  color:#cfe0d6;
  border:1.5px solid #6d8579;   /* 배경 대비 3.7:1 — 버튼 윤곽이 보이는 최소선 */
  padding:8px 16px;border-radius:999px;
  transition:color .2s,background .2s,border-color .2s;
}
.footer-admin:hover,
.footer-admin:focus-visible{
  color:#1f2b25;
  background:#cfe0d6;
  border-color:#cfe0d6;
}
.footer-admin:focus-visible{outline:2px solid #7cc576;outline-offset:3px}
.footer-admin-icon{display:block;flex-shrink:0}

/* 좁은 화면에서는 겹치므로 저작권 아래로 내린다 */
@media(max-width:729px){
  .footer-admin{
    position:static;
    display:flex;width:max-content;margin:16px auto 0;
  }
}

/* ─────────────────────────────────────────────
   메인 · 진행 중인 프로그램 (AI 튤립 탐험대)
   모집 현황 숫자는 서버가 tulip.js 에서 받아 그린다 — 손으로 고칠 일이 없다.
   ───────────────────────────────────────────── */
.tulip-card{
  background:#fff;border:1px solid #e3efe3;border-left:5px solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow);
  max-width:1040px;margin:0 auto;overflow:hidden;
}
.tulip-card-body{padding:30px 32px}
.tulip-card-badge{
  display:inline-block;background:var(--bg-soft);color:var(--brand-dark);
  font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;
}
.tulip-card-title{
  font-size:clamp(20px,3.2vw,26px);font-weight:800;color:var(--brand-dark);
  margin-top:12px;word-break:keep-all;
}
.tulip-card-desc{
  margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.8;word-break:keep-all;
}
.tulip-card-facts{
  display:flex;flex-wrap:wrap;gap:28px;margin-top:20px;
  padding-top:18px;border-top:1px solid #eef4ee;
}
.tulip-card-facts dt{font-size:12.5px;font-weight:700;color:var(--muted);letter-spacing:.02em}
.tulip-card-facts dd{
  font-size:20px;font-weight:800;color:var(--brand-dark);margin-top:4px;
  font-variant-numeric:tabular-nums;
}
.tulip-card-bar{
  margin-top:16px;height:8px;border-radius:999px;overflow:hidden;background:#e8f0e8;
}
.tulip-card-bar span{display:block;height:100%;background:var(--brand)}
.tulip-card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}

@media(max-width:729px){
  .tulip-card-body{padding:24px 20px}
  .tulip-card-facts{gap:18px}
  .tulip-card-actions .btn{width:100%;text-align:center}
}

/* ─────────────────────────────────────────────
   로그인 · 회원가입 (기획서 1장 /login)
   ───────────────────────────────────────────── */
.nav-login{color:var(--brand-dark) !important;font-weight:800 !important}

.login-wrap{
  display:grid;grid-template-columns:1.4fr 1fr;gap:26px;align-items:start;
  max-width:960px;margin:0 auto;
}
.login-box{
  background:#fff;border:1px solid #e3efe3;border-left:5px solid var(--brand);
  border-radius:var(--radius);box-shadow:var(--shadow);padding:34px 32px;
}
.login-badge{
  display:inline-block;background:var(--bg-soft);color:var(--brand-dark);
  font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:999px;
}
.login-title{font-size:clamp(20px,3vw,25px);font-weight:800;color:var(--brand-dark);margin-top:10px}
.login-desc{margin-top:10px;color:var(--muted);font-size:15.5px;line-height:1.8;word-break:keep-all}
.login-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.login-msg{min-height:24px;margin-top:10px;font-size:14.5px;font-weight:700;color:var(--brand-dark)}
.login-msg.is-error{color:#c0392b}

.login-facts{margin-top:24px;padding-top:20px;border-top:1px solid #eef4ee;display:grid;gap:14px}
.login-facts dt{font-size:12.5px;font-weight:700;color:var(--brand-dark)}
.login-facts dd{font-size:14.5px;color:var(--muted);margin-top:3px;line-height:1.7}

.login-form{margin-top:22px;padding-top:20px;border-top:1px solid #eef4ee}
.login-field{display:block;margin-bottom:14px}
.login-field>span{display:block;font-size:13.5px;font-weight:700;margin-bottom:6px}
.login-field input{
  width:100%;padding:11px 13px;font-size:15.5px;
  border:1.5px solid #dbe8db;border-radius:10px;background:#fbfdfb;
}
.login-field input:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.login-note{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.7}

.login-side{
  background:var(--bg-soft);border-radius:var(--radius);padding:26px 24px;
}
.login-side h3{font-size:16px;font-weight:800;color:var(--brand-dark);margin-bottom:12px}
.login-side ul{padding-left:18px;font-size:14.5px;line-height:1.9;color:var(--muted)}
.login-side li{margin-bottom:6px}
.login-links{list-style:none;padding:0}
.login-links a{
  display:block;padding:11px 14px;margin-bottom:7px;
  background:#fff;border:1px solid #e3efe3;border-radius:10px;
  font-size:14.5px;font-weight:700;color:var(--brand-dark);
}
.login-links a:hover{border-color:var(--brand);background:#f6fbf7}

/* 카카오 버튼 — 브랜드 색을 그대로 쓴다(사용자가 알아보는 신호) */
.btn-kakao{background:#FEE500;color:#191600;border:1.5px solid #e5cf00}
.btn-kakao:hover{background:#f5dd00;color:#191600}

@media(max-width:820px){
  .login-wrap{grid-template-columns:1fr}
}

/* 로그인 화면의 휴대폰 인증 */
.login-verify{
  margin:-4px 0 14px;padding:14px 16px;
  background:var(--bg-soft);border-radius:10px;
}
.login-verify-state{font-size:13.5px;font-weight:700;color:var(--brand-dark);margin-bottom:8px}
.login-verify-state:empty{display:none}
.login-verify-state.is-error{color:#c0392b}

/* ── 협회 회원가입 카드 (2026-09-05) ─────────────────────────────────
   카카오 로그인 뒤 정보를 한 장씩 받는다. 한 화면에 다 늘어놓으면
   아이 프로그램 신청하러 온 보호자가 부담을 느껴 중간에 나간다. */
#lg-join{grid-column:1 / -1}          /* 가입 중에는 옆 설명 칸 없이 넓게 쓴다 */
.join-box{max-width:560px;margin:0 auto}

.join-steps{
  display:flex;gap:6px;list-style:none;padding:0;margin:0 0 26px;
  font-size:12.5px;font-weight:700;color:var(--muted);
}
.join-steps li{
  flex:1;text-align:center;padding:7px 4px 9px;
  border-bottom:3px solid #e8f1e8;white-space:nowrap;
}
.join-steps li.is-on{color:var(--brand-dark);border-bottom-color:var(--brand)}
.join-steps li.is-done{color:var(--accent);border-bottom-color:var(--accent)}

.join-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:50%;
  background:var(--brand);color:#fff;font-size:15px;font-weight:800;
  font-variant-numeric:tabular-nums;
}
.join-q{
  font-size:clamp(20px,3.4vw,26px);font-weight:800;color:var(--brand-dark);
  margin-top:14px;line-height:1.45;word-break:keep-all;
}
.join-desc{margin:12px 0 22px;color:var(--muted);font-size:15px;line-height:1.8;word-break:keep-all}
.join-note{margin-top:10px;font-size:13px;color:var(--muted);line-height:1.7;word-break:keep-all}
.join-msg{min-height:22px;margin-top:8px;font-size:14px;font-weight:700;color:var(--brand-dark)}
.join-msg.is-error{color:#c0392b}
.join-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:24px}
.join-actions .btn-lg{flex:1;min-width:140px;justify-content:center}

.join-check{
  display:flex;align-items:flex-start;gap:9px;margin-top:16px;
  font-size:14.5px;line-height:1.6;cursor:pointer;
}
.join-check input{width:19px;height:19px;flex:none;margin-top:1px;accent-color:var(--brand)}
.join-check b{color:var(--brand-dark)}

/* 우편번호 칸 + 찾기 버튼을 한 줄로 */
.join-addr{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.join-addr .login-field{margin-bottom:0}
.join-addr .btn{white-space:nowrap;height:44px}
/* 주소 찾기로 채우는 칸은 눌러도 안 바뀐다는 것이 보이게 */
#join-postcode[readonly],#join-address1[readonly]{background:#f6faf6;color:var(--muted)}

.linklike{
  background:none;border:0;padding:0;font:inherit;cursor:pointer;
  color:var(--brand-dark);text-decoration:underline;
}

.join-done{text-align:center}
.join-emblem{width:76px;height:auto;margin:6px auto 4px}
.join-done .join-q{margin-top:6px}
.join-slogan{
  margin-top:14px;font-size:clamp(17px,3vw,21px);font-weight:800;color:var(--brand);
  letter-spacing:-.01em;
}
.join-done .join-desc{margin-top:16px}
.join-done .join-actions{justify-content:center}

@media(max-width:700px){
  .join-steps{font-size:11.5px}
  .join-steps li{padding:6px 2px 8px}
  .join-addr{grid-template-columns:1fr}
  .join-addr .btn{height:auto;width:100%}
}

/* 가입 마지막 카드 — 어디로 갈지 고르게 한다 (메인 / 탐험대원 신청) */
.join-pick-lead{margin-top:26px;font-size:15px;font-weight:700;color:var(--brand-dark)}
.join-pick{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px;text-align:left}
.join-pick-card{
  display:flex;flex-direction:column;gap:6px;
  padding:20px 18px;border:1.5px solid #d8ead8;border-radius:14px;background:#f7fbf6;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.join-pick-card:hover{border-color:var(--brand);box-shadow:var(--shadow);transform:translateY(-2px)}
.join-pick-card:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.join-pick-card.is-plain{background:#fff;border-color:#e6efe6}
.join-pick-emoji{font-size:26px;line-height:1}
.join-pick-title{font-size:16.5px;font-weight:800;color:var(--brand-dark)}
.join-pick-desc{font-size:13.5px;color:var(--muted);line-height:1.65;word-break:keep-all;flex:1}
.join-pick-cta{margin-top:4px;font-size:13.5px;font-weight:700;color:var(--brand)}
@media(max-width:700px){.join-pick{grid-template-columns:1fr}}

/* 카카오가 막힐 때의 두 번째 로그인 길 */
.login-alt{margin-top:20px;padding-top:18px;border-top:1px dashed #d9e8d9}
.login-alt-lead{font-size:14px;font-weight:700;color:var(--brand-dark)}
.login-alt .login-actions{margin-top:10px}

/* 내 계정 (/account/) — 아직 안 끝낸 회원가입 안내 */
.ac-todo{
  margin-top:22px;padding:20px 20px 22px;border-radius:14px;
  background:#f4faf3;border:1.5px solid #cfe6cf;
}
.ac-todo-label{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.02em}
.ac-todo-title{margin-top:6px;font-size:19px;font-weight:800;color:var(--brand-dark)}
.ac-todo-desc{margin-top:8px;font-size:14.5px;color:var(--muted);line-height:1.75;word-break:keep-all}
.ac-todo-list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px}
.ac-todo-list li{font-size:14.5px;color:var(--muted)}
.ac-todo-list li.is-done{color:var(--brand);font-weight:700}
.ac-todo .join-actions{margin-top:18px}

.ac-done{margin-top:22px}
.ac-done-badge{
  display:inline-block;padding:5px 12px;border-radius:999px;
  background:var(--brand);color:#fff;font-size:12.5px;font-weight:800;
}
.ac-done .login-facts{margin-top:14px;padding-top:0;border-top:0}

/* ═══════════════════════════════════════════════════════════════
   우주 · 오로라 테마 — 협회 페이지용 (2026-09-06)
   지금 걸린 곳: /programs/elementary/ai-tulip/ (AI 튤립 탐험대 소개)

   ⚠️ 전부 `.kg-cosmic` 안에서만 먹는다. 이 접두어를 떼면 **협회 사이트 전 페이지가
      까매진다.** style.css 는 모든 화면이 함께 쓰는 파일이다. 절대 떼지 말 것.
   ⚠️ 다른 협회 페이지에도 걸고 싶으면 그 페이지 <body> 에 class="kg-cosmic" 만 더하면 된다.
      새 CSS 를 쓰지 말 것 — 여기에 이미 다 있다.

   탐험대 쪽(tulip.css)의 .tl-cosmic 과 색·모양을 맞춰 두었다. 두 파일이 나뉜 이유는
   협회 화면과 탐험대 화면이 클래스 이름을 하나도 공유하지 않기 때문이다.
   ⚠️ 한쪽 색을 고치면 **다른 쪽도 같이 고칠 것.** 안 그러면 소개 페이지와
      탐험대 페이지의 색이 서로 달라진다(사용자는 같은 프로그램으로 느낀다).
   ═══════════════════════════════════════════════════════════════ */
body.kg-cosmic{
  background:#080b1c;
  color:#eaf2ff;
  background-image:
    linear-gradient(rgba(120,170,255,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120,170,255,.055) 1px, transparent 1px);
  background-size:52px 52px;
  position:relative;
}

/* ── 하늘 ────────────────────────────────────────────────────── */
.kg-cosmic .kg-sky{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.kg-cosmic .site-header,
.kg-cosmic section,
.kg-cosmic .page-foot-nav,
.kg-cosmic .site-footer{position:relative;z-index:1}

.kg-cosmic .kg-aurora{position:absolute;border-radius:50%;filter:blur(72px);opacity:.5;will-change:transform}
.kg-cosmic .kg-aurora-1{
  width:78vw;height:46vw;left:-16vw;top:-14vw;
  background:radial-gradient(circle at 40% 40%, #2fd6a8 0%, rgba(47,214,168,0) 68%);
  animation:kg-drift-a 34s ease-in-out infinite alternate;
}
.kg-cosmic .kg-aurora-2{
  width:70vw;height:42vw;right:-18vw;top:2vw;
  background:radial-gradient(circle at 55% 45%, #7b6bff 0%, rgba(123,107,255,0) 66%);
  animation:kg-drift-b 44s ease-in-out infinite alternate;
}
.kg-cosmic .kg-aurora-3{
  width:88vw;height:38vw;left:4vw;top:36vw;
  background:radial-gradient(circle at 50% 50%, #2a7fd4 0%, rgba(42,127,212,0) 70%);
  opacity:.34;animation:kg-drift-c 52s ease-in-out infinite alternate;
}
@keyframes kg-drift-a{from{transform:translate3d(0,0,0) scale(1)}   to{transform:translate3d(7vw,4vw,0) scale(1.14)}}
@keyframes kg-drift-b{from{transform:translate3d(0,0,0) scale(1.08)}to{transform:translate3d(-8vw,6vw,0) scale(1)}}
@keyframes kg-drift-c{from{transform:translate3d(0,0,0) scale(1)}   to{transform:translate3d(5vw,-5vw,0) scale(1.2)}}

.kg-cosmic .kg-stars{
  position:absolute;inset:-10%;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 68% 12%, rgba(214,236,255,.75) 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 34% 62%, rgba(255,255,255,.7) 50%, transparent 51%),
    radial-gradient(1.1px 1.1px at 86% 48%, rgba(198,255,240,.8) 50%, transparent 51%),
    radial-gradient(1.3px 1.3px at 22% 84%, rgba(255,255,255,.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 78%, rgba(226,214,255,.75) 50%, transparent 51%);
  background-size:340px 340px,420px 420px,300px 300px,380px 380px,460px 460px,360px 360px;
  animation:kg-twinkle 7s ease-in-out infinite alternate;
}
@keyframes kg-twinkle{from{opacity:.55}to{opacity:1}}

/* ── 머리말 ──────────────────────────────────────────────────── */
.kg-cosmic .page-hero{background:transparent;padding-bottom:44px}
.kg-cosmic .page-title{
  background:linear-gradient(96deg,#eaf6ff 0%,#8ff0e0 42%,#b9a7ff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.kg-cosmic .page-lead,
.kg-cosmic .section-lead,
.kg-cosmic .crumb{color:#9db0d4}
.kg-cosmic .crumb a{color:#8ff0e0}
.kg-cosmic .section-title{color:#eaf2ff}

/* ── 구역 ────────────────────────────────────────────────────── */
.kg-cosmic .section-alt{
  background:rgba(18,26,58,.5);border-block:1px solid rgba(150,190,255,.20);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.kg-cosmic .cta{
  background:linear-gradient(135deg,rgba(46,120,190,.42),rgba(120,90,220,.42));
  border-block:1px solid rgba(150,190,255,.20);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}

/* ── 글 ──────────────────────────────────────────────────────── */
.kg-cosmic .prose{color:#cfe0ff}
.kg-cosmic .prose h3{color:#8ff0e0}
.kg-cosmic .prose p,.kg-cosmic .prose li{color:#c2d3ef}
.kg-cosmic a{color:#8ff0e0}
.kg-cosmic .back-link{color:#8ff0e0}

/* ── 카드 ────────────────────────────────────────────────────── */
.kg-cosmic .fact,
.kg-cosmic .flow-step,
.kg-cosmic .detail-card{
  background:rgba(22,31,64,.72);
  border:1px solid rgba(150,190,255,.20);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  box-shadow:0 0 34px rgba(90,169,255,.10);
}
.kg-cosmic .fact{border-top:4px solid #6fe3c4}
.kg-cosmic .detail-card{border-top:5px solid #6fe3c4}
.kg-cosmic .fact dt,
.kg-cosmic .detail-title,
.kg-cosmic .detail-key,
.kg-cosmic .sched-when,
.kg-cosmic .flow-step h3{color:#8ff0e0}
.kg-cosmic .fact dd,
.kg-cosmic .detail-list li,
.kg-cosmic .detail-note,
.kg-cosmic .flow-step p,
.kg-cosmic .sched li,
.kg-cosmic .sched-note,
.kg-cosmic .diagram figcaption{color:#9db0d4}
.kg-cosmic .detail-list li{border-bottom-color:rgba(150,190,255,.16)}
.kg-cosmic .sched li{border-bottom-color:rgba(150,190,255,.16)}

.kg-cosmic .flow-num{background:linear-gradient(96deg,#2fd6a8,#5aa9ff);color:#06121f}
.kg-cosmic .flow-step::after{border-top-color:#6fe3c4;border-right-color:#6fe3c4}
.kg-cosmic .flow-loop{color:#7de3d0}
.kg-cosmic .mission-list li{
  background:rgba(111,227,196,.14);border-color:rgba(111,227,196,.34);color:#8ff0e0;
}
.kg-cosmic .scroll-hint{color:#7de3d0}

/* 일정 도식만 밝게 둔다 — 그림 자체가 흰 바탕이라 어둡게 감싸면 흰 판이 그냥 떠 보인다.
   ⚠️ 이 SVG 를 어두운 판 위에 올리지 말 것. 액자처럼 빛나는 틀로 감싸는 편이 자연스럽다. */
.kg-cosmic .diagram-scroll{
  background:#f7fbff;border:1px solid rgba(150,190,255,.34);
  box-shadow:0 0 40px rgba(90,169,255,.22);
}

/* ── 버튼 ────────────────────────────────────────────────────── */
.kg-cosmic .btn-primary{
  background:linear-gradient(96deg,#2fd6a8,#5aa9ff);border-color:transparent;color:#06121f;
  box-shadow:0 6px 26px rgba(60,180,220,.36);
}
.kg-cosmic .btn-primary:hover{filter:brightness(1.08);background:linear-gradient(96deg,#2fd6a8,#5aa9ff);color:#06121f}
.kg-cosmic .btn-ghost{color:#cfe0ff;border-color:rgba(150,190,255,.34);background:transparent}
.kg-cosmic .btn-ghost:hover{background:rgba(150,190,255,.12);color:#eaf2ff}

/* ── 협회 상단 메뉴 ──────────────────────────────────────────── */
.kg-cosmic .site-header{
  background:rgba(8,11,28,.74);border-bottom:1px solid rgba(150,190,255,.20);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.kg-cosmic .brand span{color:#dbe7ff}
.kg-cosmic .nav a{color:#bcccea}
.kg-cosmic .nav a:hover{color:#8ff0e0}
.kg-cosmic .nav-login{color:#8ff0e0 !important}
.kg-cosmic .nav .nav-cta{
  background:linear-gradient(96deg,#2fd6a8,#5aa9ff);color:#06121f;border-color:transparent;
}
.kg-cosmic .nav .nav-cta:hover{filter:brightness(1.08);background:linear-gradient(96deg,#2fd6a8,#5aa9ff);color:#06121f}
/* 좁은 화면에서 펼쳐지는 메뉴판도 어둡게. 안 하면 흰 판이 튀어나온다. */
.kg-cosmic #site-nav.is-open{background:rgba(10,14,34,.97);border-color:rgba(150,190,255,.22)}
.kg-cosmic .nav-toggle-bar{background:#dbe7ff}

/* ⚠️ 접근성 — 움직임 줄이기를 켠 분에게는 오로라와 별을 멈춘다. */
@media (prefers-reduced-motion: reduce){
  .kg-cosmic .kg-aurora,.kg-cosmic .kg-stars{animation:none}
}

/* 인쇄 — 종이에 검은 배경을 쓰지 않는다. */
@media print{
  body.kg-cosmic{background:#fff;color:#111;background-image:none}
  .kg-cosmic .kg-sky{display:none}
  .kg-cosmic .fact,.kg-cosmic .flow-step,.kg-cosmic .detail-card{
    background:#fff;border-color:#bbb;box-shadow:none;backdrop-filter:none;
  }
  .kg-cosmic .page-title{-webkit-text-fill-color:#111;color:#111}
}

/* 롤링 배너 — 프로젝트 딱지 (2026-09-06). 오로라 톤에 맞춘 청록. */
.mbanner-label-project{background:#dcf5ef;color:#12564a}

/* 회원가입 카드 — 필수 표시와 "왜 받는지" 설명 (2026-09-06) */
.join-must{
  display:inline-block;vertical-align:3px;margin-left:8px;
  background:linear-gradient(96deg,#ff9f6b,#ff7a5c);color:#2b1206;
  font-size:12.5px;font-weight:800;letter-spacing:.02em;
  padding:4px 11px;border-radius:999px;
}
.join-why{
  margin:0 0 20px;padding:16px 18px;
  background:#f4faf3;border:1px solid #cfe6cf;border-left:4px solid var(--brand);
  border-radius:12px;
}
.join-why-title{font-size:13px;font-weight:800;color:var(--brand-dark);margin-bottom:8px}
.join-why-body{
  font-size:14.5px;line-height:1.75;color:var(--muted);word-break:keep-all;
}
.join-why-body + .join-why-body{margin-top:7px}
.join-why-body b{color:var(--brand-dark)}

/* 회원 분류 고르기 (2026-09-06) — 라디오지만 카드처럼 눌러 고른다 */
.join-pickset{display:grid;gap:10px;margin:4px 0 8px}
.join-pick-one{
  display:flex;align-items:flex-start;gap:12px;cursor:pointer;
  padding:16px 18px;border:1.5px solid #d8ead8;border-radius:12px;background:#fff;
  transition:border-color .18s,background .18s,box-shadow .18s;
}
.join-pick-one:hover{border-color:var(--accent);background:#f7fbf6}
.join-pick-one input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand)}
/* 고른 칸이 한눈에 보이게 — 라디오 점만으로는 잘 안 보인다 */
.join-pick-one:has(input:checked){
  border-color:var(--brand);background:#f2faf1;box-shadow:0 0 0 3px rgba(46,139,87,.12);
}
.join-pick-one input:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.join-pick-one-body{display:flex;flex-direction:column;gap:4px;min-width:0}
.join-pick-one-body b{font-size:16.5px;font-weight:800;color:var(--brand-dark)}
.join-pick-one-body small{font-size:13.5px;line-height:1.65;color:var(--muted);word-break:keep-all}

/* 로그인한 분의 이름이 상단 메뉴에 보일 때 */
/* ⚠️ 메뉴가 한 줄에 다 들어가야 한다. 여기를 키우면 접히는 폭(1200px)도 같이 올려야 한다. */
.nav-login.is-me{
  display:inline-flex;align-items:center;gap:5px;
  padding:4px 11px;border-radius:999px;white-space:nowrap;
  background:var(--bg-soft);border:1px solid #cfe6cf;
}
.nav-login.is-me::before{content:"🪪";font-size:12px}
.nav-login.is-me:hover{background:#e7f4e5;border-color:var(--accent)}
.kg-cosmic .nav-login.is-me{background:rgba(111,227,196,.14);border-color:rgba(111,227,196,.34)}

/* 교사 가입 — 소속 학교 고르기 (2026-09-07) */
.join-school{margin-top:16px}
.join-school select{
  width:100%;padding:12px 13px;font-size:16px;
  border:1.5px solid #d8ead8;border-radius:10px;background:#fff;color:var(--ink);
}
.join-school select:focus{outline:2px solid var(--brand);outline-offset:1px;border-color:transparent}
.join-school-note{display:block;margin-top:8px;font-size:13px;color:var(--muted);line-height:1.7}

/* 내 계정 — 이 계정에 묶인 아이 (2026-09-07)
   ⚠️ 보호자 계정에 '대원' 딱지를 붙이지 않는다. 대원은 아이다. 여기 이름으로 보여 준다. */
.ac-mine{
  margin-top:14px;padding:14px 16px;border-radius:12px;
  background:#f4faf3;border:1px solid #cfe6cf;
}
.ac-mine-label{font-size:12.5px;font-weight:800;color:var(--brand);letter-spacing:.02em}
.ac-mine-list{list-style:none;margin:8px 0 0;padding:0;display:grid;gap:5px}
.ac-mine-list li{font-size:15px;font-weight:700;color:var(--brand-dark)}