/*
 * 발행호 공통영역(디자인 블록 배치) 런타임 CSS.
 *
 * 원칙: 사용자 HTML 의 스타일을 침범하지 않는다. 이 파일은 래퍼(.wz-region)에만 적용하고
 * 내부는 블록 자신의 CSS(.wz-region-block--{seq} 로 스코프됨)가 지배한다.
 *
 * z-index 정책: 플로팅 기본 60, 사용자 조정 10~200 클램프(WebzineRegionStyleOptions).
 *   미리보기 배너(9999)·팝업·뉴스레터 모달보다 항상 아래에 온다.
 */

/* ── 토큰 ───────────────────────────────────────────────── */
.wz-region {
  --wzr-max-width: 1200px;
  --wzr-pad-x: 16px;
  --wzr-pad-y: 0px;
  --wzr-mt: 0px;
  --wzr-mb: 0px;
  --wzr-radius: 0px;
  --wzr-z: 60;
  --wzr-offset-x: 24px;
  --wzr-offset-y: 24px;
  --wzr-sticky-top: 0px;
  --wzr-side-width: 280px;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  margin-top: var(--wzr-mt);
  margin-bottom: var(--wzr-mb);
  padding-block: var(--wzr-pad-y);
  /* --wzr-bg 는 사용자가 배경색을 고른 경우에만 인라인으로 정의된다.
     기본값을 토큰에 박아두면 아래 색상 모드(LIGHT/DARK)가 자기 배경을 깔 수 없다. */
  background: var(--wzr-bg, transparent);
  border-radius: var(--wzr-radius);
  /* 헤더 대체 블록의 드롭다운을 잘라내지 않도록 overflow 는 visible 유지 */
  overflow: visible;
}

.wz-region *,
.wz-region *::before,
.wz-region *::after {
  box-sizing: border-box;
}

.wz-region__inner {
  max-width: var(--wzr-max-width);
  margin-inline: auto;
  padding-inline: var(--wzr-pad-x);
}

/* AI shell 안의 실제 기능은 서버가 주입한다. 블록 CSS가 없어도 조작 가능하도록 최소값만 둔다. */
[data-wz-region-component] { display: inline-flex; align-items: center; min-width: 0; }
.wz-region-system__navigation ul { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; }
.wz-region-system__search { display: inline-flex; align-items: center; gap: 6px; }
.wz-region-system__company { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.wz-region-system__legal { display: inline-flex; flex-wrap: wrap; gap: 12px; }
.wz-region-system__theme { cursor: pointer; }

.wz-region--bleed > .wz-region__inner {
  max-width: none;
  padding-inline: 0;
}

/* ── 정렬 ───────────────────────────────────────────────── */
.wz-region--align-left > .wz-region__inner { margin-inline: 0 auto; }
.wz-region--align-right > .wz-region__inner { margin-inline: auto 0; }

/* ── 슬롯별 기본 ────────────────────────────────────────── */
/* 반드시 "표시 방식"보다 먼저 선언한다. 슬롯 클래스와 표시 방식 클래스는 명시도가 같아(0,1,0)
   뒤에 오는 쪽이 이긴다. 뒤에 두면 page_top 의 STICKY, page_bottom 의 FLOATING 이
   position:relative 로 덮여 고정 배치가 통째로 무효화된다. */
.wz-region--header_replace,
.wz-region--footer_replace { width: 100%; }

/* 최상단 띠는 INLINE 일 때만 낮은 겹침 순서를 쓴다.
   STICKY 로 바꾸면 아래 .wz-region--sticky 가 --wzr-z 로 덮어쓴다. */
.wz-region--page_top { z-index: 5; }

/* ── 표시 방식 ──────────────────────────────────────────── */
.wz-region--inline { position: relative; }

.wz-region--sticky {
  position: sticky;
  top: var(--wzr-sticky-top);
  z-index: var(--wzr-z);
}

.wz-region--floating {
  position: fixed;
  width: auto;
  max-width: min(var(--wzr-max-width), calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  margin: 0;
  overflow: auto;
  z-index: var(--wzr-z);
  pointer-events: auto;
}

.wz-region--floating > .wz-region__inner {
  padding-inline: var(--wzr-pad-x);
}

/* 앵커는 항상 2변만 지정해 전체 덮기(inset:0)를 만들 수 없게 한다. */
.wz-region--anchor-tl { top: var(--wzr-offset-y); left: var(--wzr-offset-x); }
.wz-region--anchor-tr { top: var(--wzr-offset-y); right: var(--wzr-offset-x); }
.wz-region--anchor-bl { bottom: var(--wzr-offset-y); left: var(--wzr-offset-x); }
.wz-region--anchor-br { bottom: var(--wzr-offset-y); right: var(--wzr-offset-x); }
.wz-region--anchor-tc { top: var(--wzr-offset-y); left: 50%; transform: translateX(-50%); }
.wz-region--anchor-bc { bottom: var(--wzr-offset-y); left: 50%; transform: translateX(-50%); }
.wz-region--anchor-cl { top: 50%; left: var(--wzr-offset-x); transform: translateY(-50%); }
.wz-region--anchor-cr { top: 50%; right: var(--wzr-offset-x); transform: translateY(-50%); }

/* ── 색상 모드 ──────────────────────────────────────────── */
/* AUTO 는 색을 지정하지 않는다 — 블록 CSS 가 --brand-* 를 참조해 테마 전환을 따라간다.
   LIGHT/DARK 는 글자색과 바탕색을 한 쌍으로 깐다(글자색만 바꾸면 반대 테마에서 읽을 수 없다).
   사용자가 배경색을 직접 고르면 --wzr-bg 가 인라인으로 정의되어 이 기본 바탕을 이긴다. */
.wz-region--light {
  color: #16181d;
  background: var(--wzr-bg, #ffffff);
}

.wz-region--dark {
  color: #f5f6f8;
  background: var(--wzr-bg, #14161b);
}

/* ── 기기별 노출 ────────────────────────────────────────── */
@media (max-width: 767px) {
  .wz-region--hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .wz-region--hide-desktop { display: none !important; }
}

/* ── 스크롤 노출(JS 가 is-visible 부여) ─────────────────── */
.wz-region--scroll-reveal {
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity .24s ease, transform .24s ease, visibility .24s;
}

.wz-region--scroll-reveal.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* JS 미로드(정적 내보내기·스크립트 차단) 시에도 콘텐츠가 보이도록 한다. */
html.no-js .wz-region--scroll-reveal,
.wz-region--scroll-reveal:not([data-wz-region-scroll]) {
  opacity: 1;
  visibility: visible;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .wz-region--scroll-reveal { transition: none; }
}

/* ── 닫기 버튼 ─────────────────────────────────────────── */
.wz-region__dismiss {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
  color: inherit;
  background: transparent;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  opacity: .65;
}

.wz-region__dismiss:hover,
.wz-region__dismiss:focus-visible { opacity: 1; }

.wz-region__dismiss:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
}

/* ── 사이드 레이아웃 ───────────────────────────────────── */
/* 컬럼 폭은 배치 옵션(side_width)에서 온다. CSS 변수는 위로 상속되지 않으므로
   조각(.wz-region)이 아니라 그리드 컨테이너에 서버가 인라인으로 심는다.
   좌/우 중 실제로 배치가 있는 쪽만 컬럼을 만든다(빈 컬럼이 폭을 먹지 않도록). */
.wz-region-aside-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
}

.wz-region-aside-layout--has-left {
  grid-template-columns: var(--wzr-side-left, 280px) minmax(0, 1fr);
}

.wz-region-aside-layout--has-right {
  grid-template-columns: minmax(0, 1fr) var(--wzr-side-right, 280px);
}

.wz-region-aside-layout--has-left.wz-region-aside-layout--has-right {
  grid-template-columns: var(--wzr-side-left, 280px) minmax(0, 1fr) var(--wzr-side-right, 280px);
}

.wz-region-aside-layout__main { min-width: 0; }

@media (max-width: 900px) {
  .wz-region-aside-layout,
  .wz-region-aside-layout--has-left,
  .wz-region-aside-layout--has-right,
  .wz-region-aside-layout--has-left.wz-region-aside-layout--has-right {
    grid-template-columns: minmax(0, 1fr);
  }

  /* order 는 그리드 아이템(=컬럼)에만 먹는다. 조각에 걸면 무시되므로
     모바일 순서 옵션은 서버가 컬럼 div 에 클래스로 내려준다. */
  .wz-region-aside-layout__main { order: 1; }
  .wz-region-aside-layout__side { order: 2; }
  .wz-region-aside-layout__side--mobile-before { order: 0; }
  .wz-region-aside-layout__side--mobile-hidden { display: none; }
  .wz-region--mobile-hidden { display: none; }
}

/* ── 헤더/푸터 미렌더 시 여백 보정 ─────────────────────── */
/* 공통영역 조각은 자기 여백(margin_top/bottom 옵션)을 가지므로 보정 대상에서 제외한다.
   조각이 맨 앞/뒤에 오면 본문은 이미 화면 끝에 붙어 있지 않아 보정 자체가 필요 없고,
   :not() 없이 두면 사용자가 설정한 조각 여백을 이 규칙이 0 으로 덮어쓴다. */
body.wz-without-header .wz-wrap > :not(.wz-region):first-child,
body.wz-without-header .listing-page > :not(.wz-region):first-child { margin-top: 0; }

body.wz-without-header .listing-visual { margin-top: 0; }

body.wz-without-footer .wz-wrap > :not(.wz-region):last-child,
body.wz-without-footer .listing-page > :not(.wz-region):last-child { margin-bottom: 0; }

/* ── 필수 유틸 바 ──────────────────────────────────────── */
.wz-region-utility {
  position: relative;
  z-index: 20;
  width: 100%;
  background: var(--brand-bg, #101216);
  color: var(--brand-fg, #f2f3f5);
  border-bottom: 1px solid rgba(127, 127, 127, .24);
  font-size: 14px;
}

.wz-region-utility__inner {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 1200px;
  min-height: 44px;
  margin-inline: auto;
  padding: 6px 16px;
  flex-wrap: wrap;
}

.wz-region-utility__home {
  font-weight: 700;
  color: inherit;
  text-decoration: none;
}

.wz-region-utility__nav { position: relative; }

.wz-region-utility__nav-toggle {
  background: transparent;
  border: 1px solid rgba(127, 127, 127, .4);
  border-radius: 6px;
  color: inherit;
  padding: 4px 10px;
  cursor: pointer;
  font: inherit;
}

.wz-region-utility__menu {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 180px;
  margin: 0;
  padding: 6px 0;
  list-style: none;
  background: var(--brand-bg, #101216);
  border: 1px solid rgba(127, 127, 127, .32);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .28);
  display: none;
  z-index: 30;
}

.wz-region-utility__nav-toggle[aria-expanded="true"] + .wz-region-utility__menu { display: block; }

.wz-region-utility__menu a {
  display: block;
  padding: 8px 14px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.wz-region-utility__menu a:hover { background: rgba(127, 127, 127, .16); }

.wz-region-utility__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
  flex-wrap: wrap;
}

.wz-region-utility__search {
  display: flex;
  align-items: center;
  gap: 4px;
  border: 1px solid rgba(127, 127, 127, .4);
  border-radius: 999px;
  padding: 2px 6px 2px 12px;
}

.wz-region-utility__search input {
  width: 140px;
  background: transparent;
  border: 0;
  color: inherit;
  font: inherit;
  outline: none;
}

.wz-region-utility__search button,
.wz-region-utility__theme {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: transparent;
  border: 0;
  color: inherit;
  cursor: pointer;
  border-radius: 999px;
}

.wz-region-utility__theme { border: 1px solid rgba(127, 127, 127, .4); }

.wz-region-utility__link {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.wz-region-utility__link:hover { text-decoration: underline; }

@media (max-width: 640px) {
  .wz-region-utility__search input { width: 96px; }
}

/* ── 법적 정보 바 ──────────────────────────────────────── */
.wz-region-legal {
  width: 100%;
  background: var(--brand-bg, #0d0f13);
  color: var(--brand-fg, #cfd2d8);
  border-top: 1px solid rgba(127, 127, 127, .24);
  font-size: 13px;
  line-height: 1.7;
}

.wz-region-legal__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.wz-region-legal__info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.wz-region-legal__info small {
  opacity: .6;
  margin-right: 4px;
  font-size: 12px;
}

.wz-region-legal__info a { color: inherit; text-decoration: none; }
.wz-region-legal__info a:hover { text-decoration: underline; }

.wz-region-legal__company { font-weight: 700; }

.wz-region-legal .wz-region-required__links,
.wz-region-required__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.wz-region-legal .wz-region-required__links a,
.wz-region-legal .wz-region-required__links button,
.wz-region-required__links a,
.wz-region-required__links button {
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-decoration: underline;
}

.wz-region-legal__copyright { opacity: .6; }

/* 기본 푸터가 숨김/대체되고 법적 정보 바도 꺼진 경우 유지하는 최소 필수 바로가기. */
.wz-region-required {
  width: 100%;
  border-top: 1px solid rgba(127, 127, 127, .24);
  background: var(--brand-bg, #0d0f13);
  color: var(--brand-fg, #cfd2d8);
  font-size: 13px;
  line-height: 1.7;
}

.wz-region-required__inner {
  display: flex;
  max-width: 1200px;
  flex-direction: column;
  gap: 8px;
  margin-inline: auto;
  padding: 16px;
}

.wz-region-required__copyright { opacity: .6; }