@charset "utf-8";
/* ============================================================
 * evb_content.css - 이벤트 콘텐츠 블록 렌더 스타일
 *
 * 관리자 빌더의 미리보기 iframe 과 사용자 페이지(.view-cont)에서
 * 동일하게 로드된다. 반응형 규칙은 전부 이 파일 한 곳에만 존재하므로
 * 여기만 고치면 이미 등록된 모든 게시물에 일괄 반영된다.
 *
 * 브레이크포인트는 사이트 기존 기준을 그대로 따른다.
 *   1480 / 1260 / 1024 / 780 / 480
 * 폰트 크기는 reset_{LANG}.css 의 CSS 변수를 재사용하므로
 * 별도 미디어쿼리 없이도 화면 폭에 따라 함께 줄어든다.
 * ============================================================ */

.evb-root {
  --evb-gap: 24px;
  --evb-radius: 8px;
  --evb-primary: #002C8A;
  --evb-body: #616161;
  --evb-line: #E1E1E1;
  --evb-soft: #F4F5F8;
  width: 100%;
}

/* 블록 공통 ------------------------------------------------ */
.evb-root .evb { width: 100%; }
.evb-root .evb + .evb { margin-top: 56px; }

.evb-root img,
.evb-root video { max-width: 100%; height: auto; }

/* iframe 에는 height 를 걸지 않는다.
   HTML 의 height="400" 속성은 presentational hint 라 author CSS 한 줄에도 밀린다.
   iframe 은 intrinsic 높이가 없어서 height:auto 를 주는 순간 CSS 기본값인
   150px 로 붕괴해 영상/임베드가 잘려 보인다. 폭만 제한한다. */
.evb-root iframe { max-width: 100%; }

.evb-root img { display: block; }

.evb-root a { color: inherit; }

/* 본문 인라인 서식 (rich 입력에서 허용된 것만) */
.evb-root .evb-rt { font-size: var(--sub03, 18px); color: var(--evb-body); line-height: 1.7; }
/* 호스트 페이지의 `.view-cont p` 같은 규칙이 블록 안까지 파고들지 않게 고정한다.
   (.evb-root .evb-rt p = 0,2,1 로 .view-cont p = 0,1,1 를 이긴다) */
.evb-root .evb-rt p { font-size: inherit; color: inherit; line-height: inherit; }
.evb-root .evb-rt p + p { margin-top: 12px; }
.evb-root .evb-rt strong, .evb-root .evb-rt b { font-weight: 700; color: #313131; }
.evb-root .evb-rt a { color: var(--evb-primary); text-decoration: underline; }
.evb-root .evb-rt ul, .evb-root .evb-rt ol { padding-left: 20px; margin: 12px 0; }
.evb-root .evb-rt li { list-style: inherit; margin-top: 6px; }
.evb-root .evb-rt ul { list-style: disc; }
.evb-root .evb-rt ol { list-style: decimal; }
.evb-root .evb-hl { color: var(--evb-primary); font-weight: 700; }

/* 1. 히어로 배너 ------------------------------------------- */
.evb-hero { position: relative; }
.evb-hero .evb-hero-media { width: 100%; border-radius: var(--evb-radius); overflow: hidden; }
.evb-hero .evb-hero-media img { width: 100%; }
.evb-hero .evb-hero-body { margin-top: 24px; }
.evb-hero .evb-hero-tit {
  font-size: var(--subtit_b, 40px);
  font-weight: 700;
  color: #313131;
  line-height: 1.3;
}
.evb-hero .evb-hero-sub {
  margin-top: 12px;
  font-size: var(--sub03, 18px);
  color: var(--evb-body);
  line-height: 1.6;
}
.evb-hero.is-center { text-align: center; }
.evb-hero.is-left { text-align: left; }

/* 이미지 위에 겹치기 */
.evb-hero.is-overlay .evb-hero-body {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding: 40px;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55), rgba(0, 0, 0, 0));
}
.evb-hero.is-overlay.is-dark .evb-hero-tit,
.evb-hero.is-overlay.is-dark .evb-hero-sub,
.evb-hero.is-dark .evb-hero-tit,
.evb-hero.is-dark .evb-hero-sub { color: #fff; }

/* 2. 텍스트 ------------------------------------------------ */
.evb-text .evb-text-tit {
  font-size: var(--subtit_s, 32px);
  font-weight: 700;
  color: #313131;
  line-height: 1.35;
  margin-bottom: 20px;
}
.evb-text.is-center { text-align: center; }

/* 3. 이미지 ------------------------------------------------ */
.evb-image { text-align: center; }
.evb-image img { margin: 0 auto; border-radius: var(--evb-radius); }
.evb-image.is-full img { width: 100%; }
.evb-image.is-wide img { width: 100%; max-width: 900px; }
.evb-image.is-narrow img { width: 100%; max-width: 560px; }
.evb-image .evb-caption {
  margin-top: 12px;
  font-size: var(--fz02, 20px);
  color: #909090;
}

/* 4. 다단 그리드 ------------------------------------------- */
.evb-cols { display: grid; gap: var(--evb-gap); align-items: stretch; }
.evb-cols[data-cols="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.evb-cols[data-cols="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.evb-cols[data-cols="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.evb-cols .evb-col {
  min-width: 0;
  background: var(--evb-soft);
  border-radius: var(--evb-radius);
  padding: 28px;
}
.evb-cols.is-plain .evb-col { background: none; padding: 0; }
.evb-cols .evb-col-media { margin: -28px -28px 20px; border-radius: var(--evb-radius) var(--evb-radius) 0 0; overflow: hidden; }
.evb-cols.is-plain .evb-col-media { margin: 0 0 16px; border-radius: var(--evb-radius); }
.evb-cols .evb-col-media img { width: 100%; }
.evb-cols .evb-col-tit {
  font-size: var(--fz00, 24px);
  font-weight: 700;
  color: #313131;
  line-height: 1.4;
  margin-bottom: 10px;
}

/* 5. 버튼 CTA ---------------------------------------------- */
.evb-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.evb-cta.is-center { justify-content: center; }
.evb-cta.is-left { justify-content: flex-start; }
.evb-cta.is-right { justify-content: flex-end; }
.evb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  min-height: 56px;
  padding: 14px 32px;
  border-radius: 999px;
  font-size: var(--sub03, 18px);
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  transition: opacity 0.2s;
}
.evb-btn:hover { opacity: 0.85; }
.evb-btn.is-primary { background: var(--evb-primary); color: #fff; }
.evb-btn.is-outline { border: 1px solid var(--evb-primary); color: var(--evb-primary); background: #fff; }
.evb-btn.is-ghost { background: #313131; color: #fff; }

/* 6. 구분선 / 여백 ----------------------------------------- */
.evb-divider { border-top: 1px solid var(--evb-line); }
.evb-divider.is-sm { margin-top: 24px; }
.evb-divider.is-lg { margin-top: 80px; }
.evb-space { height: 24px; }
.evb-space.is-md { height: 48px; }
.evb-space.is-lg { height: 96px; }
.evb-root .evb-space + .evb,
.evb-root .evb-divider + .evb { margin-top: 24px; }

/* 7. HTML 원본 --------------------------------------------- */
/* 기존 CKEditor 로 작성된 콘텐츠가 담기는 블록.
   px 로 고정된 폭이 섞여 있어도 최소한 화면을 넘치지는 않도록 방어한다. */
.evb-html { max-width: 100%; overflow-x: auto; }
.evb-html img { display: inline-block; max-width: 100%; height: auto; }
.evb-html table { max-width: 100%; }
.evb-html li { list-style: inherit; }

/* ============================================================
 * 반응형
 * ============================================================ */
@media screen and (max-width: 1024px) {
  .evb-root { --evb-gap: 20px; }
  .evb-root .evb + .evb { margin-top: 44px; }
  .evb-cols[data-cols="4"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evb-hero.is-overlay .evb-hero-body { padding: 28px; }
  .evb-cols .evb-col { padding: 24px; }
  .evb-cols .evb-col-media { margin: -24px -24px 16px; }
}

@media screen and (max-width: 780px) {
  .evb-root { --evb-gap: 16px; }
  .evb-root .evb + .evb { margin-top: 36px; }

  /* 다단 → 1단 */
  .evb-cols[data-cols="2"],
  .evb-cols[data-cols="3"],
  .evb-cols[data-cols="4"] { grid-template-columns: minmax(0, 1fr); }

  /* 겹친 제목은 이미지 아래로 내려 가독성 확보 */
  .evb-hero.is-overlay .evb-hero-body {
    position: static;
    padding: 16px 0 0;
    background: none;
  }
  .evb-hero.is-overlay.is-dark .evb-hero-tit,
  .evb-hero.is-overlay.is-dark .evb-hero-sub { color: inherit; }
  .evb-hero.is-overlay.is-dark .evb-hero-sub { color: var(--evb-body); }

  .evb-image.is-wide img,
  .evb-image.is-narrow img { max-width: 100%; }

  .evb-cta { flex-direction: column; }
  .evb-btn { width: 100%; min-width: 0; min-height: 52px; }

  .evb-space { height: 16px; }
  .evb-space.is-md { height: 32px; }
  .evb-space.is-lg { height: 60px; }
  .evb-divider.is-lg { margin-top: 48px; }

  /* 레거시 HTML 방어: 인라인 px 폭이 있어도 화면을 넘치지 않게 */
  .evb-html img,
  .evb-html video,
  .evb-html table { max-width: 100% !important; height: auto !important; }
  .evb-html table { width: 100% !important; table-layout: fixed; }
  .evb-html [style*="width"] { max-width: 100% !important; }

  /* iframe 은 폭만 제한한다 (height:auto 를 주면 150px 로 붕괴) */
  .evb-html iframe { max-width: 100% !important; }

  /* 다만 영상 임베드는 폭이 줄면 높이도 같이 줄어야 하므로 16:9 로 잡아준다 */
  .evb-html iframe[src*="youtube"],
  .evb-html iframe[src*="youtu.be"],
  .evb-html iframe[src*="vimeo"],
  .evb-html iframe[src*="iframe.ly"],
  .evb-html iframe[src*="dailymotion"],
  .evb-html iframe[src*="facebook.com/plugins/video"] {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 16 / 9;
  }
}

@media screen and (max-width: 480px) {
  .evb-root .evb + .evb { margin-top: 28px; }
  .evb-cols .evb-col { padding: 20px; }
  .evb-cols .evb-col-media { margin: -20px -20px 14px; }
  .evb-hero .evb-hero-body { margin-top: 16px; }
  .evb-text .evb-text-tit { margin-bottom: 14px; }
}

/* ============================================================
 * 모바일 우선 빌더(evb_editor.js) 출력 스타일
 * 웹에서도 얇은 세로 컬럼(원통형)으로 고정 렌더. 블록은 컨테이너 폭 100%.
 * 색·크기·둥근모서리 등 개별 설정은 인라인 style 로 실려 온다.
 * ============================================================ */
.evb-root.evb-mobile {
  width: 100%;
  max-width: 100%;          /* 부모(.view-cont) 폭을 그대로 채움. 데스크톱=넓게, 모바일=좁게 반응형 */
  margin: 0 auto;
  padding: 0;               /* 좌우 여백은 부모 레이아웃이 이미 가짐 */
  box-sizing: border-box;
}
.evb-mobile .evb-blk { width: 100%; }
/* 블록 간 기본 간격. evb_editor.js 의 renderAll() 이 블록마다 인라인으로 같은 값을 찍으므로
 * (인라인이 이 규칙을 이긴다) 여기는 인라인 margin 이 없는 옛 저장물용 폴백이다. 두 값을 같이 유지할 것.
 * 화면폭별로 줄이지 않는다 - 인라인 값이 고정이라 미디어쿼리를 둬도 에디터 출력에는 먹지 않는다. */
.evb-mobile .evb-blk + .evb-blk { margin-top: 8px; }

.evb-mobile .evb-b-text { width: 100%; line-height: 1.55; word-break: break-word; }

/* 이미지 여러 개(2~4)를 한 줄에.
 *  - flex + space-between: 원본이 각자 몫보다 작으면 남는 폭이 '이미지 사이 간격'으로 벌어진다.
 *  - 각 셀 max-width(=균등 몫, JS 인라인)로 상한 → 좁은 화면/모바일에선 절반씩 비율 유지하며 축소.
 *  - img width:auto + max-width:100%: 셀보다 작으면 업스케일(늘어남/뭉개짐) 없이 원본 크기 유지. */
.evb-mobile .evb-b-imgs { display: flex; flex-wrap: nowrap; align-items: flex-start; justify-content: space-between; width: 100%; }
.evb-mobile .evb-b-imgs > a,
.evb-mobile .evb-b-imgs > div { display: block; overflow: hidden; min-width: 0; flex: 0 1 auto; text-align: center; }
.evb-mobile .evb-b-imgs img { max-width: 100%; width: auto; height: auto; display: inline-block; }

/* 이미지 1개: 예전처럼 폭 100% 로 꽉 채운다 */
.evb-mobile .evb-b-imgs[data-count="1"] > a,
.evb-mobile .evb-b-imgs[data-count="1"] > div { flex: 1 1 100%; }
.evb-mobile .evb-b-imgs[data-count="1"] img { width: 100%; }

.evb-mobile .evb-b-btn {
  display: flex; width: 100%;
  align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 20px;
  font-weight: 700; font-size: 16px;
  text-decoration: none; box-sizing: border-box;
}

.evb-mobile .evb-b-yt { position: relative; width: 100%; padding-bottom: 56.25%; height: 0; }
.evb-mobile .evb-b-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.evb-mobile .evb-b-ph {
  border: 2px dashed #c9d2e0; border-radius: 12px;
  padding: 22px 8px; text-align: center; color: #aeb6c4; font-size: 12px;
}