/**
 * 파일 경로: wp-content/plugins/zooedu-landing/assets/zooedu-landing.css
 * 용도: 숏코드 [zooedu_landing] 전용 스타일.
 *       로고(카드 밖 상단) → 히어로(좌 안내 / 우 매뉴얼) → 공지사항 → 문의처 순으로 배치한다.
 *       글꼴은 테마 기본(나눔고딕)을 그대로 쓰므로 별도 웹폰트를 불러오지 않는다.
 */

.zlp{
  --zlp-ink:#12281c;
  --zlp-deep:#004f2d;      /* 로고 워드마크 진초록 */
  --zlp-leaf:#6eb92b;      /* 로고 잎사귀 초록 */
  --zlp-lime:#c3d600;      /* 로고 라임 */
  --zlp-sun:#fabe00;       /* 로고 노랑(엠버) */
  --zlp-sub:#5f6b62;
  --zlp-line:#e3e9dd;
  --zlp-page:#f2f6e9;      /* 로고 계열 연한 연둣빛 */
  --zlp-sun-soft:#fdf3d9;  /* 로고 노랑 계열 연한 톤 */
  --zlp-sun-line:#f2dfa8;
  --zlp-sun-ink:#6b4e00;
  max-width:1060px;
  margin:0 auto;
  color:var(--zlp-ink);
  line-height:1.7;
}

/* ── 로고: 카드 바깥 상단 중앙 ── */
.zlp .zlp-brand{text-align:center; margin:0 0 36px; padding-top:0}
.zlp .zlp-brand img{width:216px; max-width:60%; height:auto; display:inline-block}

/* ── 히어로 ── */
.zlp .zlp-hero{
  background:#fff; border:1px solid var(--zlp-line); border-radius:18px;
  padding:40px; gap:40px; margin-bottom:40px;
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:stretch;
}
/* 위·가운데·아래 세 덩어리를 균등하게 벌려 버튼이 설명과 기간의 중간에 오게 한다 */
.zlp .zlp-hero-main{display:flex; flex-direction:column; justify-content:space-between; gap:26px}
.zlp .zlp-eyebrow{
  display:inline-flex; align-items:center;
  height:30px; padding:0 16px; margin:0 0 14px;
  font-size:13px; font-weight:700; letter-spacing:.01em; line-height:1.15;
  /* 라임 배경 위에서도 탭 배지만큼 또렷하게 보이도록 글자색을 더 짙게 */
  color:#2c3700; background:var(--zlp-lime); border-radius:999px;
}
.zlp .zlp-title{
  margin:0 0 14px; font-size:32px; font-weight:700; letter-spacing:-.03em;
  line-height:1.28; color:var(--zlp-deep); word-break:keep-all;
}
.zlp .zlp-lead{margin:0; font-size:15px; color:var(--zlp-sub); max-width:34em; word-break:keep-all}
.zlp .zlp-actions{display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.zlp .zlp-btn{
  display:inline-block; background:var(--zlp-deep); color:#fff; text-decoration:none;
  font-size:15.5px; font-weight:700; padding:15px 36px; border-radius:999px;
  transition:background-color .15s ease, color .15s ease;
}
.zlp .zlp-btn:hover,
.zlp .zlp-btn:focus-visible{
  background:var(--zlp-sun); color:#3f2d00; text-decoration:none;
}
.zlp .zlp-note{
  margin:0; font-size:13.5px; color:var(--zlp-sub);
  display:flex; align-items:baseline; gap:8px;
}
.zlp .zlp-note::before{
  content:""; flex:none; width:4px; height:4px; border-radius:50%;
  background:var(--zlp-leaf); transform:translateY(-3px);
}
.zlp .zlp-note b{color:var(--zlp-ink); font-weight:700}

/* ── 히어로 우측: 매뉴얼 ── */
.zlp .zlp-side{
  border-left:1px solid var(--zlp-line); padding-left:36px;
  display:flex; flex-direction:column; justify-content:flex-start;
}
/* 자료가 적어도 세로 구분선이 왼쪽 열 높이만큼 이어지도록 남는 공간을 확보 */
.zlp .zlp-side .zlp-cards:last-of-type{margin-bottom:auto}
/* 자료 종류 탭 — 왼쪽 배지와 높이·여백을 맞춰 두 열의 첫 줄을 정렬한다 */
.zlp .zlp-tabs{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  min-height:30px; margin:0 0 14px;
}
.zlp .zlp-tab{
  --zlp-tab-c:#01a9e4;
  font:inherit; font-size:12.5px; font-weight:700; line-height:1;
  height:30px; padding:0 14px; border-radius:999px; cursor:pointer;
  color:var(--zlp-sub); background:#f1f4ee;
  border:1px solid transparent;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.zlp .zlp-tab:hover{color:var(--zlp-ink)}
.zlp .zlp-tab.is-on{
  color:#fff; background:var(--zlp-tab-c); border-color:var(--zlp-tab-c);
}
.zlp .zlp-tab:focus-visible{outline:2px solid var(--zlp-tab-c); outline-offset:2px}
.zlp .zlp-cards[hidden]{display:none !important}
.zlp .zlp-cards{
  /* 항목 수가 달라도 위에서부터 순서대로 쌓이게 한다(가운데·양끝 분산 금지) */
  list-style:none; margin:0; padding:0;
}
.zlp .zlp-cards li + li{border-top:1px solid var(--zlp-line)}
.zlp .zlp-card{
  display:flex; align-items:center; gap:15px; padding:14px 2px;
  text-decoration:none; color:inherit;
}
.zlp .zlp-card:hover .zlp-card-title{color:var(--zlp-deep)}
.zlp .zlp-card:hover .zlp-go{border-color:var(--zlp-leaf); transform:rotate(45deg) translate(2px,-2px)}
.zlp .zlp-card-thumb{
  flex:none; width:116px; aspect-ratio:16/9; background:#eef2e7;
  border:1px solid var(--zlp-line); border-radius:7px; overflow:hidden;
}
.zlp .zlp-card-thumb img{width:100%; height:100%; object-fit:cover; object-position:center; display:block}
.zlp .zlp-card-body{flex:1 1 auto; min-width:0}
.zlp .zlp-card-title{display:block; font-size:14.5px; font-weight:700; word-break:keep-all; transition:color .16s ease}
.zlp .zlp-card-desc{display:block; font-size:12.5px; color:var(--zlp-sub); margin-top:3px; word-break:keep-all}
/* 꺽쇠는 글꼴에 따라 모양이 달라지므로 CSS 로 그린다 */
.zlp .zlp-go{
  flex:none; width:8px; height:8px; margin-right:4px;
  border-top:1.6px solid #b9c6b2; border-right:1.6px solid #b9c6b2;
  transform:rotate(45deg);
  transition:border-color .16s ease, transform .16s ease;
}

/* ── 공지사항 ── */
.zlp .zlp-section{margin-bottom:40px}
.zlp .zlp-section-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  margin-bottom:18px; padding-bottom:12px; border-bottom:2px solid var(--zlp-line);
}
.zlp .zlp-section-head h3{margin:0; font-size:19px; font-weight:700; letter-spacing:-.01em; color:var(--zlp-ink)}
.zlp .zlp-more{font-size:13.5px; color:var(--zlp-sub); text-decoration:none}
.zlp .zlp-more:hover{color:var(--zlp-deep)}
.zlp .zlp-notices{list-style:none; margin:0; padding:0}
.zlp .zlp-notices li + li{border-top:1px solid var(--zlp-line)}
.zlp .zlp-notice{
  display:flex; align-items:center; gap:14px; padding:17px 6px;
  text-decoration:none; color:inherit;
}
.zlp .zlp-notice:hover .zlp-notice-title{color:var(--zlp-deep)}
.zlp .zlp-badge{
  flex:none; color:#fff; font-size:11.5px; font-weight:700; line-height:1;
  padding:5px 10px; border-radius:5px; letter-spacing:.01em; white-space:nowrap;
}
.zlp .zlp-notice-title{flex:1 1 auto; min-width:0; font-size:15.5px; word-break:keep-all; transition:color .16s ease}
.zlp .zlp-notice-date{flex:none; font-size:12.5px; color:var(--zlp-sub)}

/* ── 문의처 ── */
.zlp .zlp-contact{
  background:var(--zlp-sun-soft); border:1px solid var(--zlp-sun-line);
  border-radius:14px; padding:24px; text-align:center;
}
.zlp .zlp-contact h3{margin:0 0 6px; font-size:15px; font-weight:700; color:var(--zlp-sun-ink)}
.zlp .zlp-contact-lines{
  margin:0; font-size:14.5px;
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:0 2px;
}
.zlp .zlp-contact-plain{color:var(--zlp-sun-ink); font-weight:700}
.zlp .zlp-contact-lines a{color:var(--zlp-sun-ink); font-weight:700; text-decoration:none}
.zlp .zlp-contact-lines a:hover{text-decoration:underline}
.zlp .zlp-dot{color:#b99b4e; margin:0 10px}
.zlp .zlp-contact-note{margin:6px 0 0; font-size:12.5px; color:var(--zlp-sub)}

/* ── 공지 팝업 ── */
.zlp .zlp-pop[hidden]{display:none !important}
.zlp .zlp-pop{
  position:fixed; inset:0; z-index:99999;
  background:rgba(17,24,39,.5);
  display:flex; align-items:center; justify-content:center; padding:20px;
}
.zlp .zlp-pop-inner{
  background:#fff; border-radius:14px; width:100%; max-width:560px;
  /* 기본 높이. 실제 값은 설정에서 내려오는 인라인 스타일이 덮어쓴다. */
  max-height:min(34vh, 360px); min-height:345px;
  box-shadow:0 12px 32px rgba(0,0,0,.2);
  /* 스크롤은 안쪽 영역만 담당해 모서리 라운드가 잘리지 않게 한다 */
  overflow:hidden; display:flex; flex-direction:column;
}
.zlp .zlp-pop-scroll{
  flex:1 1 auto; min-height:0; overflow-y:auto;
  /* 아래에 내용이 더 있으면 끝자락이 흐려져 스크롤 여지가 드러난다 */
  background:
    linear-gradient(#fff 30%, rgba(255,255,255,0)) top / 100% 24px no-repeat,
    linear-gradient(rgba(255,255,255,0), #fff 70%) bottom / 100% 24px no-repeat,
    radial-gradient(farthest-side at 50% 0, rgba(0,0,0,.08), rgba(0,0,0,0)) top / 100% 10px no-repeat,
    radial-gradient(farthest-side at 50% 100%, rgba(0,0,0,.08), rgba(0,0,0,0)) bottom / 100% 10px no-repeat;
  background-attachment:local, local, scroll, scroll;
}
/* 스크롤 막대를 얇고 눈에 덜 띄게 */
.zlp .zlp-pop-scroll{scrollbar-width:thin}
.zlp .zlp-pop-scroll::-webkit-scrollbar{width:8px}
.zlp .zlp-pop-scroll::-webkit-scrollbar-thumb{background:#d5dcd2; border-radius:99px; border:2px solid #fff}
/* 헤더: 로고 라임 계열 연한 톤으로 본문과 구분 */
.zlp .zlp-pop-bar{
  flex:none;
  display:flex; align-items:flex-start; justify-content:space-between; gap:14px;
  padding:18px 20px; background:#f5f9e6; border-bottom:1px solid #e6efcd;
}
.zlp .zlp-pop-heading{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; min-width:0;
}
.zlp .zlp-pop-x{
  flex:none; background:none; border:0; font-size:22px; line-height:1;
  color:var(--zlp-sub); cursor:pointer; padding:0 2px; margin-top:1px;
}
.zlp .zlp-pop-img{line-height:0; flex:none}
.zlp .zlp-pop-img img{
  width:100%; height:auto; max-height:110px; object-fit:cover; object-position:center; display:block;
}
.zlp .zlp-pop-body{padding:16px 20px 18px}
.zlp .zlp-pop-title{margin:0; font-size:16.5px; font-weight:700; line-height:1.45; word-break:keep-all; color:var(--zlp-ink)}
.zlp .zlp-pop-date{margin:0 0 10px; font-size:12.5px; color:var(--zlp-sub)}
.zlp .zlp-pop-text{margin:0 0 20px; font-size:14px; line-height:1.6; color:#3f4a42; word-break:keep-all}
/* 테마가 p 에 준 여백이 겹치지 않도록 명시적으로 덮어쓴다 */
.zlp .zlp-pop-text p{margin:0 0 6px !important; line-height:1.6}
.zlp .zlp-pop-text p:last-child{margin-bottom:0 !important}
.zlp .zlp-pop-text br{display:inline; margin:0; line-height:inherit}
.zlp .zlp-pop-text ul,
.zlp .zlp-pop-text ol{
  margin:2px 0 6px !important; padding-left:19px !important; list-style-position:outside;
}
.zlp .zlp-pop-text ul{list-style:disc}
.zlp .zlp-pop-text ol{list-style:decimal}
.zlp .zlp-pop-text li{
  /* 항목 간격은 문단 간격(6px)보다 좁게 */
  margin:0 0 2px !important; padding:0 !important; line-height:1.55;
}
.zlp .zlp-pop-text li:last-child{margin-bottom:0 !important}
.zlp .zlp-pop-text li::marker{color:#8aa382}
.zlp .zlp-pop-text strong,
.zlp .zlp-pop-text b{font-weight:700; color:var(--zlp-ink)}
.zlp .zlp-pop-text a{color:var(--zlp-deep); font-weight:700; text-decoration:underline}
.zlp .zlp-pop-text a:hover{color:var(--zlp-leaf)}
.zlp .zlp-pop-btn{
  display:block; text-align:center; background:var(--zlp-deep); color:#fff;
  font-size:14px; font-weight:700; padding:12px 20px; border-radius:999px; text-decoration:none;
}
.zlp .zlp-pop-btn:hover{color:#fff; opacity:.9; text-decoration:none}
.zlp .zlp-pop-foot{
  flex:none;
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 20px; border-top:1px solid var(--zlp-line); background:#fafbfa;
}
.zlp .zlp-pop-today{display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--zlp-sub); cursor:pointer}
.zlp .zlp-pop-close{background:none; border:0; font-size:13px; color:var(--zlp-sub); cursor:pointer; padding:4px 2px}

/* ── 좁은 화면 ── */
@media (max-width:820px){
  .zlp .zlp-hero{grid-template-columns:1fr; padding:32px 24px; gap:24px}
  .zlp .zlp-hero-main{justify-content:flex-start}
  .zlp .zlp-title{font-size:27px}
  .zlp .zlp-side{border-left:0; border-top:1px solid var(--zlp-line); padding-left:0; padding-top:20px}
  .zlp .zlp-brand{margin-bottom:26px}
  .zlp .zlp-brand img{width:190px}
}
@media (max-width:560px){
  .zlp .zlp-brand{margin-bottom:22px}
  .zlp .zlp-brand img{width:168px}
  .zlp .zlp-hero{padding:26px 18px; border-radius:14px; margin-bottom:32px}
  .zlp .zlp-title{font-size:23px}
  .zlp .zlp-eyebrow{font-size:12.5px; padding:0 14px}
  .zlp .zlp-btn{display:block; width:100%; box-sizing:border-box; text-align:center}
  .zlp .zlp-section{margin-bottom:32px}
  .zlp .zlp-notice{gap:10px; padding:14px 2px; flex-wrap:wrap}
  .zlp .zlp-notice-title{flex:1 1 100%; order:3; font-size:14.5px}
  .zlp .zlp-card-thumb{width:96px}
  .zlp .zlp-pop-bar{padding:14px 16px}
  .zlp .zlp-pop-title{font-size:15.5px}
  .zlp .zlp-pop-body{padding:16px}
  .zlp .zlp-pop-foot{padding:11px 16px}
}