/*
 * main-v9.css — v9 메인 페이지 전용 스타일 (.v9-page 스코프)
 * 2026-05-27 신규
 *
 * 원본: KCP 기반 마크업 (default.css / index.css) 발췌 + GSAP 인터랙션 보조
 * 모든 셀렉터는 .v9-page 안으로 캡슐화되어 다른 페이지와 충돌 없음.
 * 이미지 url() 은 박지 않음 — 모두 EJS 인라인 style 로 주입.
 *
 * 1단계: 메인 슬라이드 + 우측 퀵메뉴 + 풀페이지 스냅 보조 CSS
 */

/* ─────────────────────────────────────────────────
 * 0) 페이지 전체 / 박스 모델
 * ───────────────────────────────────────────────── */
body.main-v9 {
  overflow-x: hidden;
}

.v9-page,
.v9-page * { box-sizing: border-box; }

.v9-page #v9-paged {
  position: relative;
}

/* ─────────────────────────────────────────────────
 * 0-0) v9 헤더 높이 통일 — 로고 영역 72px, GNB 48px (메인/서브 동일)
 *      --header-height 고정 → site.js 재계산 분기와 함께 layout shift 차단
 *      info_head(32) + head(72) + nav(48) = 152px (info_head 없으면 그만큼 적게)
 * ───────────────────────────────────────────────── */
body.main-v9 { --header-height: 152px; }
body.main-v9:not(:has(.info_head)) { --header-height: 120px; }
body.main-v9 #header .head .inner {
  height: 72px;
  display: flex;
  align-items: center;
}
body.main-v9 #header .nav .inner { height: 48px; }
body.main-v9 #header .nav .gnb > li > a {
  height: 48px;
  line-height: 48px;
}
body.main-v9 #header .head .logo {
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  height: 72px;
  line-height: 1;
}
body.main-v9 #header .head .logo a,
body.main-v9 #header .head .logo img {
  display: block;
  vertical-align: middle;
}
/* GNB 라인 — 하단만 (layout.css 기본은 위아래 둘 다) */
body.main-v9 #header .nav {
  border-top: none;
}
/* .header-util (로그인/회원가입 등) — 한 줄 가운데 정렬 + 우측 */
body.main-v9 #header .head .inner .header-util {
  flex-direction: row;
  align-items: center;
  height: auto;
  gap: 12px;
  margin-left: auto;
}
body.main-v9 #header .head .inner .header-util .top,
body.main-v9 #header .head .inner .header-util .bottom {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ─────────────────────────────────────────────────
 * 0-1) 헤더 오버레이 (첫 섹션이 GNB 까지 덮음)
 *      - #wrap 의 기본 padding-top 제거
 *      - #header 는 fixed 로 슬라이드 위에 떠 있음
 *      - 초기: 투명 배경 + 흰 글자
 *      - .v9-scrolled: 흰 배경 + 원래 글자색 (사이트 기본 스타일 복원)
 *      모두 body.main-v9 한정 → 다른 페이지 0 영향
 * ───────────────────────────────────────────────── */
body.main-v9.v9-home #wrap {
  padding-top: 0;
}

/* v9 트랜지션 SSOT — 헤더 색 / 메가메뉴 동일 duration 으로 동기화
 * ease-out: 빠르게 시작 → 부드럽게 마무리 (사라질 때 자연스러움)
 * duration 0.4s: 0.25s 보다 여유 있어 시각적 어색함 감소 */
body.main-v9 {
  --v9-header-transition: 0.4s ease-out;
}

body.main-v9.v9-home #header {
  position: fixed;
  background: transparent !important;       /* 본 #header background 는 항상 투명, 흰색은 ::before 가 담당 */
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: none;
  transition: border-color var(--v9-header-transition);
  overflow: visible !important;             /* ::before 가 잘리지 않도록 (layout.css 의 overflow:hidden 해제) */
  isolation: isolate;                       /* ::before z-index 격리 */
}

/* ::before — 헤더 영역만 흰색(70% 투명) 으로 페이드 */
body.main-v9.v9-home #header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v9-header-transition);
  z-index: 0;
}

/* .mega-dropdown 의 border 제거 + 배경 70% 투명도로 통일 */
body.main-v9.v9-home .mega-dropdown {
  border: none !important;
  background: rgba(255, 255, 255, 0.7) !important;
}

/* 2026-06-05: GNB(nav .inner 48px) 와 메가메뉴 사이 8px 갭 제거.
 * layout.css 의 .mega-dropdown top:56px 은 기본 nav 높이(56px) 기준이라
 * v9(.nav .inner 48px)에서는 8px 떠 보임. top:100% 로 기준박스(.inner) 하단에
 * 정합 → nav 높이 변동에도 자동 추종. (데스크톱 메가메뉴 = ≥1025px 한정) */
@media all and (min-width: 1025px) {
  body.main-v9 .mega-dropdown { top: 100%; }
}

/* 메가메뉴 hover / active — 배경 완전 제거. 글자/border 색만 변화로 강조 (v9 한정)
 * 가능한 모든 hover/focus/active 셀렉터 + 모든 background 속성 무력화 */
html body.main-v9.v9-home .mega-dropdown a,
html body.main-v9.v9-home .mega-dropdown a:link,
html body.main-v9.v9-home .mega-dropdown a:visited,
html body.main-v9.v9-home .mega-dropdown a:hover,
html body.main-v9.v9-home .mega-dropdown a:focus,
html body.main-v9.v9-home .mega-dropdown a:active,
html body.main-v9.v9-home .mega-dropdown a.active,
html body.main-v9.v9-home .mega-dropdown-content a,
html body.main-v9.v9-home .mega-dropdown-content a:hover,
html body.main-v9.v9-home .mega-dropdown-content a:focus,
html body.main-v9.v9-home .mega-dropdown-content a.active,
html body.main-v9.v9-home .mega-dropdown-items a:hover,
html body.main-v9.v9-home .mega-dropdown-items a.active,
html body.main-v9.v9-home .mega-dropdown-group a:hover,
html body.main-v9.v9-home .mega-dropdown-group a.active {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
}
html body.main-v9.v9-home .mega-dropdown a:hover,
html body.main-v9.v9-home .mega-dropdown a.active {
  border-color: var(--accent-navy, #1e3e83) !important;
  color: var(--accent-navy, #1e3e83) !important;
}

/* layout.css:98 — column 모드 메가메뉴 ul hover 시 #f8fbfe → v9 에서 20% 흰색 */
html body.main-v9.v9-home #header .nav .gnb > li > ul {
  background: transparent !important;
  background-color: transparent !important;
}
html body.main-v9.v9-home #header .nav .gnb > li > ul:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  background-color: rgba(255, 255, 255, 0.2) !important;
}
body.main-v9.v9-home .mega-dropdown-group-label {
  background: rgba(245, 247, 250, 0.7) !important;
}

/* ─────────────────────────────────────────────────
 * 헤더 콘텐츠 opacity — 오버 X 시 80%, 오버 시 100%
 *   타겟: .info_head .inner / .head .inner / .nav .gnb (텍스트+아이콘 박스만)
 *   .mega-dropdown 은 제외 (별도 opacity 토글 충돌 방지)
 * ───────────────────────────────────────────────── */
body.main-v9.v9-home #header .info_head .inner,
body.main-v9.v9-home #header .head .inner,
body.main-v9.v9-home #header .nav .gnb {
  opacity: 0.8;
  transition: opacity var(--v9-header-transition);
}
body.main-v9.v9-home #header:hover .info_head .inner,
body.main-v9.v9-home #header:hover .head .inner,
body.main-v9.v9-home #header:hover .nav .gnb,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .info_head .inner,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .head .inner,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .nav .gnb {
  opacity: 1;
}

/* ─────────────────────────────────────────────────
 * 관리자 / 마이페이지 / 로그아웃 PNG 아이콘 색 — filter 로 톤 변환
 *   PNG img 는 color 속성으로 색 못 바꿈 → filter 사용
 *   오버 X (transparent 헤더): brightness(0) invert(1) = 흰색
 *   오버   (흰 헤더):            brightness(0) invert(0.2) ≈ 어두운 회색
 * ───────────────────────────────────────────────── */
body.main-v9.v9-home #header .header-util .tnb img,
body.main-v9.v9-home #header .header-util .bottom img {
  filter: brightness(0) invert(1);
  transition: filter var(--v9-header-transition);
}
body.main-v9.v9-home #header:hover .header-util .tnb img,
body.main-v9.v9-home #header:hover .header-util .bottom img,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .header-util .tnb img,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .header-util .bottom img {
  filter: brightness(0) invert(0.2);
}
/* 헤더 본문 내용은 ::before 위에 표시 */
body.main-v9.v9-home #header > * {
  position: relative;
  z-index: 1;
}

/* 자식 자체 배경 제거 — ::before 의 흰색만 보이도록 */
body.main-v9.v9-home #header .info_head,
body.main-v9.v9-home #header .head,
body.main-v9.v9-home #header .nav {
  background: transparent !important;
}
body.main-v9.v9-home #header .nav .mnu {
  background: transparent;
}

body.main-v9.v9-home #header a,
body.main-v9.v9-home #header .nav .gnb > li > a,
body.main-v9.v9-home #header .nav .mnu {
  transition: color var(--v9-header-transition),
              border-color var(--v9-header-transition);
}

/* gnb 호버 시 layout.css 의 두꺼운 underline (height:3px) 제거 */
body.main-v9.v9-home #header .nav .gnb > li > a::after,
body.main-v9.v9-home #header .nav .gnb > li:hover > a::after,
body.main-v9.v9-home #header .nav .gnb > li.active > a::after {
  background: transparent !important;
}

/* ─────────────────────────────────────────────────
 * 메가메뉴 트랜지션 — 헤더 색과 시각적으로 동일하게 (v9 한정)
 *   layout.css 는 max-height 0 ↔ 80vh + 0.3s transition.
 *   max-height 는 컨텐츠 실제 높이(~60px) 보다 크게 줄어드는 구간이 비어있어
 *   transition 의 대부분이 시각적으로 비어있는 시간 → 마지막에 "툭" 사라져 보임.
 *
 *   v9 한정으로 max-height 트랜지션 제거 + opacity 만 페이드 → 헤더 색과 균등 동기화.
 *   max-height 는 active 일 때만 80vh (없으면 0) — pointer-events 와 시각 모두 깔끔.
 * ───────────────────────────────────────────────── */
body.main-v9.v9-home .mega-dropdown {
  max-height: 80vh !important;        /* 항상 펼침 — opacity 로만 표시 토글 */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--v9-header-transition),
              visibility var(--v9-header-transition) !important;
}
body.main-v9.v9-home .mega-dropdown.active {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ── 초기 (투명) ── 헤더 + 모든 자체 배경 자식 transparent, 글자/아이콘 흰색 ──
 *   v9-scrolled 트리거 제거. 항상 적용 (오버 시 위쪽 흰색 트리거에서 색 원복) */
body.main-v9.v9-home #header,
body.main-v9.v9-home #header a,
body.main-v9.v9-home #header .nav .gnb > li > a,
body.main-v9.v9-home #header .info_head,
body.main-v9.v9-home #header .info_head .inner,
body.main-v9.v9-home #header .header-util,
body.main-v9.v9-home #header .header-util .btn-toggle,
body.main-v9.v9-home #header .header-util .tnb a {
  color: #fff;
}
body.main-v9.v9-home #header .info_head {
  background: transparent;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}
body.main-v9.v9-home #header .head {
  background: transparent;
}
body.main-v9.v9-home #header .nav {
  background: transparent;
  border-top-color: rgba(255, 255, 255, 0.15);
  border-bottom-color: rgba(255, 255, 255, 0.15);
}
body.main-v9.v9-home #header .nav .mnu {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
/* gnb 메뉴 하단 호버 underline 색 — 흰 헤더 위 라인 안 보이게 투명 */
body.main-v9.v9-home #header .nav .gnb > li > a::after {
  background: transparent;
}

/* ── 헤더 흰색 트리거 ──────────────────────────────────────────
 *   요구사항: 스크롤만으로는 헤더 배경 채우지 않음.
 *   오직 :hover (헤더 영역) 또는 메가메뉴 펼침 (.mega-dropdown.active) 시에만 흰 배경.
 * ──────────────────────────────────────────────────────────── */
body.main-v9.v9-home #header:hover::before,
body.main-v9.v9-home #header:has(.mega-dropdown.active)::before {
  opacity: 1;
}
body.main-v9.v9-home #header:hover,
body.main-v9.v9-home #header:has(.mega-dropdown.active) {
  border-bottom-color: var(--border-light, #e0e0e0);
}
body.main-v9.v9-home #header:hover .nav,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .nav {
  border-top-color: var(--border-light, #e0e0e0);
  border-bottom-color: var(--border-light, #e0e0e0);
}
body.main-v9.v9-home #header:hover .info_head,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .info_head {
  border-bottom-color: var(--border-light, #e0e0e0);
}

/* 흰 배경에 흰 글자 사라짐 방지 → 글자색 원복 */
body.main-v9.v9-home #header:hover,
body.main-v9.v9-home #header:hover a,
body.main-v9.v9-home #header:hover .nav .gnb > li > a,
body.main-v9.v9-home #header:hover .info_head,
body.main-v9.v9-home #header:hover .info_head .inner,
body.main-v9.v9-home #header:hover .header-util,
body.main-v9.v9-home #header:hover .header-util .btn-toggle,
body.main-v9.v9-home #header:hover .header-util .tnb a,
body.main-v9.v9-home #header:has(.mega-dropdown.active),
body.main-v9.v9-home #header:has(.mega-dropdown.active) a,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .nav .gnb > li > a,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .info_head,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .info_head .inner,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .header-util,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .header-util .btn-toggle,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .header-util .tnb a {
  color: var(--text-primary, #2c313e);
}
body.main-v9.v9-home #header:hover .nav .mnu,
body.main-v9.v9-home #header:has(.mega-dropdown.active) .nav .mnu {
  background: #fff;
  color: #000;
  border-color: var(--border-medium, #ccc);
}

/* ── 첫 섹션 이후 흰색 고정 (.v9-scrolled) ──────────────────────
 *   2026-06-02: 첫(히어로) 섹션 = 투명, 그 이후 섹션 = 흰색 헤더 고정.
 *   JS(main-v9.js)가 섹션 index>0 일 때 body.v9-scrolled 토글.
 *   효과는 위 :hover / .mega-dropdown.active 와 동일 — 동일 속성 미러링.
 * ──────────────────────────────────────────────────────────── */
body.main-v9.v9-home.v9-scrolled #header::before {
  opacity: 1;
}
body.main-v9.v9-home.v9-scrolled #header {
  border-bottom-color: var(--border-light, #e0e0e0);
}
body.main-v9.v9-home.v9-scrolled #header .nav {
  border-top-color: var(--border-light, #e0e0e0);
  border-bottom-color: var(--border-light, #e0e0e0);
}
body.main-v9.v9-home.v9-scrolled #header .info_head {
  border-bottom-color: var(--border-light, #e0e0e0);
}
body.main-v9.v9-home.v9-scrolled #header .info_head .inner,
body.main-v9.v9-home.v9-scrolled #header .head .inner,
body.main-v9.v9-home.v9-scrolled #header .nav .gnb {
  opacity: 1;
}
body.main-v9.v9-home.v9-scrolled #header,
body.main-v9.v9-home.v9-scrolled #header a,
body.main-v9.v9-home.v9-scrolled #header .nav .gnb > li > a,
body.main-v9.v9-home.v9-scrolled #header .info_head,
body.main-v9.v9-home.v9-scrolled #header .info_head .inner,
body.main-v9.v9-home.v9-scrolled #header .header-util,
body.main-v9.v9-home.v9-scrolled #header .header-util .btn-toggle,
body.main-v9.v9-home.v9-scrolled #header .header-util .tnb a {
  color: var(--text-primary, #2c313e);
}
body.main-v9.v9-home.v9-scrolled #header .nav .mnu {
  background: #fff;
  color: #000;
  border-color: var(--border-medium, #ccc);
}
body.main-v9.v9-home.v9-scrolled #header .header-util .tnb img,
body.main-v9.v9-home.v9-scrolled #header .header-util .bottom img {
  filter: brightness(0) invert(0.2);
}

/* ─────────────────────────────────────────────────
 * 0-2) 모바일 헤더 (≤1024px) — v9 데스크톱 헤더 override 누수 차단
 *   2026-06-05: 모바일 2버그 수정.
 *   (A) 햄버거(.mnu) 미표시: body.main-v9 .head .inner{display:flex} 때문에
 *       .pc_none 이 width:0 flex 아이템이 되어, 그 안의 absolute .mnu(right:0)가
 *       화면 왼쪽 밖(x≈-35px)으로 밀려 안 보였음.
 *       → flex 해제(display:block) → .pc_none 전체폭 블록 복원 → base 모바일
 *         규칙(layout.css #header .mnu{right:0})대로 우측에 정상 배치.
 *   (B) 로고 삐짐: body.main-v9 .head .logo{height:72px} 가 모바일 60px 헤더를
 *       초과해 상단 라인 밖으로 나갔음. → 로고 absolute 세로중앙 + img 높이 제한.
 *   둘 다 v9 헤더 override 가 미디어쿼리 없이 전 너비 적용된 탓. (v8 동일 패턴 참고)
 * ───────────────────────────────────────────────── */
@media (max-width: 1024px) {
  /* (A) 헤더 내부 레이아웃을 base 모바일(60px·비-flex)로 복원 */
  body.main-v9 #header .head .inner {
    height: 60px;
    display: block;
  }
  /* (B) 로고 — 60px 헤더 안에서 좌측·세로 중앙, 이미지 높이 캡 */
  body.main-v9 #header .head .logo {
    position: absolute;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    height: auto;
    display: block;
    line-height: 1;
  }
  body.main-v9 #header .head .logo img {
    max-height: 40px;
    width: auto;
    height: auto;
  }
  /* 메뉴 열림(navOn) — 투명 헤더에 흰 배경 깔아 햄버거/로고 가독성 확보.
   * 모바일 드로어(#nav)는 불투명 흰색(rgb 255,255,255)이므로 헤더 배경도
   * 불투명 #fff 로 맞춤(기본 ::before 는 rgba 0.7 글래스 — 데스크톱 전용).
   * (#header background 는 transparent !important 라 ::before 로 처리) */
  html.navOn body.main-v9.v9-home #header::before {
    opacity: 1;
    background: #fff;
  }
}

/* ─────────────────────────────────────────────────
 * 1) 풀페이지 섹션 (fullpage.js 대체 — JS Observer 와 한 쌍)
 * ───────────────────────────────────────────────── */
.v9-page .section {
  position: relative;
  height: 100vh;
  overflow: hidden;
}
.v9-page .section.fp-auto-height {
  height: auto;
  min-height: auto;
}

/* 태블릿/좁은 화면(≤1024px): 풀페이지 스냅 해제 — 일반 스크롤
 * 2026-06-02: 767→1024 확대. 좁은 폭에서 내용 reflow 로 100vh 초과 시
 *   overflow:hidden 이 잘라먹던 문제 해결. 내용 높이만큼 늘어나고 일반 스크롤.
 *   (JS main-v9.js 의 isNarrow 기준과 한 쌍으로 동작) */
@media (max-width: 1024px) {
  .v9-page .section {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }
}

/* ─────────────────────────────────────────────────
 * 2) 컨테이너 / 타이포 토큰
 * ───────────────────────────────────────────────── */
.v9-page .c {
  max-width: 1400px;
  margin: 0 auto;
  padding-left: 15px;
  padding-right: 15px;
}

.v9-page .h0, .v9-page .h1, .v9-page .h2, .v9-page .h3, .v9-page .h4, .v9-page .h5, .v9-page .h6,
.v9-page .h0n, .v9-page .h1n, .v9-page .h2n, .v9-page .h3n, .v9-page .h4n, .v9-page .h5n, .v9-page .h6n {
  line-height: 150%;
  margin: 0;
}
.v9-page .h0, .v9-page .h1, .v9-page .h2, .v9-page .h3, .v9-page .h4, .v9-page .h5, .v9-page .h6 {
  font-weight: bold;
}
.v9-page .h0n, .v9-page .h1n, .v9-page .h2n, .v9-page .h3n, .v9-page .h4n, .v9-page .h5n, .v9-page .h6n {
  font-weight: normal;
}
.v9-page .h0, .v9-page .h0n { font-size: 4rem; }
.v9-page .h1, .v9-page .h1n { font-size: 3.5rem; }
.v9-page .h2, .v9-page .h2n { font-size: 3rem; }
.v9-page .h3, .v9-page .h3n { font-size: 2.45rem; }
.v9-page .h4, .v9-page .h4n { font-size: 2rem; }
.v9-page .h5, .v9-page .h5n { font-size: 1.4rem; }
.v9-page .h6, .v9-page .h6n { font-size: 1.125rem; }

@media (max-width: 767px) {
  .v9-page .h3, .v9-page .h3n { font-size: 2rem; }
}

.v9-page .d-ele { }
.v9-page .m-ele { display: none; }
@media (max-width: 767px) {
  .v9-page .m-ele { display: inline-block; }
  .v9-page .d-ele { display: none; }
}

/* ─────────────────────────────────────────────────
 * 3) 메인 슬라이드 (.main-visual)
 *    - swiper 클래스명 유지 (JS 가 .swiper-slide-active 토글)
 *    - 슬라이드는 absolute 로 겹쳐두고 opacity 로 전환
 * ───────────────────────────────────────────────── */
.v9-page .main-visual,
.v9-page .main-visual .swiper-container {
  overflow: hidden;
  height: 100vh;
  position: relative;
}

.v9-page .main-visual .swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.v9-page .main-visual .swiper-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 1s ease;
  z-index: 0;
  overflow: hidden;
}
.v9-page .main-visual .swiper-slide.swiper-slide-active {
  opacity: 1;
  pointer-events: auto;
  z-index: 1;
}

.v9-page .main-visual .swiper-slide .img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #444 none center / cover no-repeat;
  transform: scale(1.2);
  transition: transform 5s ease-in-out;
}
.v9-page .main-visual .swiper-slide-active .img {
  transform: scale(1);
}
.v9-page .main-visual .swiper-slide .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
}

.v9-page .main-visual .swiper-slide .c {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
}

.v9-page .main-visual .swiper-slide .content {
  text-align: center;
  color: #fff;
  display: none;
}
.v9-page .main-visual .swiper-slide.swiper-slide-active .content { display: block; }

/* 슬라이드/통합 overlay 의 텍스트·버튼 — 첫 paint 시 hidden, GSAP fromTo 가 페이드인
 * (gsap autoAlpha 가 inline visibility:visible + opacity:1 로 덮어쓰면서 페이드) */
.v9-page .main-visual .content .subhead,
.v9-page .main-visual .content .head,
.v9-page .main-visual .content .desc,
.v9-page .main-visual .content .btn-area,
.v9-page .main-visual .v9-unified-overlay .content .subhead,
.v9-page .main-visual .v9-unified-overlay .content .head,
.v9-page .main-visual .v9-unified-overlay .content .desc,
.v9-page .main-visual .v9-unified-overlay .content .btn-area {
  opacity: 0;
  visibility: hidden;
}

.v9-page .main-visual .content .subhead {
  margin-bottom: 16px;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.85);
}
.v9-page .main-visual .content .head {
  font-size: 4.5rem;
  margin-bottom: 20px;
  font-weight: 700;
  line-height: 1.2;
}
.v9-page .main-visual .content .desc {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.6;
}
.v9-page .main-visual .content .btn-area {
  margin-top: 50px;
  transition-duration: 300ms;
}
.v9-page .main-visual .content .btn-area a {
  display: inline-block;
  min-width: 200px;
  border: 1px solid #fff;
  color: #fff;
  padding: 15px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.v9-page .main-visual .content .btn-area a:hover {
  background: var(--accent-navy, #1e3e83);
  border-color: var(--accent-navy, #1e3e83);
  color: #fff;
}

/* ─────────────────────────────────────────────────
 * 통합 모드 오버레이 (.v9-unified-overlay)
 *   슬라이드 위에 고정 — 슬라이드 배경 바뀌어도 텍스트 유지
 *   슬라이드 페이드와 별개로 한 번만 애니메이션 (main-v9.js)
 * ───────────────────────────────────────────────── */
.v9-page .main-visual .v9-unified-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v9-page .main-visual .v9-unified-overlay .c {
  position: relative;
  width: 100%;
}
.v9-page .main-visual .v9-unified-overlay .content {
  text-align: center;
  color: #fff;
  pointer-events: auto;
}
.v9-page .main-visual .v9-unified-overlay .content .subhead { margin-bottom: 16px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); }
.v9-page .main-visual .v9-unified-overlay .content .head { font-size: 4.5rem; margin-bottom: 20px; font-weight: 700; line-height: 1.2; }
.v9-page .main-visual .v9-unified-overlay .content .desc { font-size: 1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; }
.v9-page .main-visual .v9-unified-overlay .content .btn-area { margin-top: 50px; }
.v9-page .main-visual .v9-unified-overlay .content .btn-area a {
  display: inline-block;
  min-width: 200px;
  border: 1px solid #fff;
  color: #fff;
  padding: 15px;
  font-size: 0.875rem;
  text-decoration: none;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.v9-page .main-visual .v9-unified-overlay .content .btn-area a:hover {
  background: var(--accent-navy, #1e3e83);
  border-color: var(--accent-navy, #1e3e83);
  color: #fff;
}

@media (max-width: 767px) {
  .v9-page .main-visual .v9-unified-overlay .content .head { font-size: 2rem; }
  .v9-page .main-visual .v9-unified-overlay .content .subhead,
  .v9-page .main-visual .v9-unified-overlay .content .desc { font-size: 0.95rem; }
  .v9-page .main-visual .v9-unified-overlay .content { padding-left: 20px; padding-right: 20px; }
}

/* 좌우 화살표 — 마름모형 KCP 스타일 */
.v9-page .main-visual .nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  z-index: 2;
  cursor: pointer;
  width: 45px;
  height: 45px;
  border: 2px solid rgba(255, 255, 255, 0.6);
}
.v9-page .main-visual .prev {
  left: 130px;
  border-top: none;
  border-right: none;
}
.v9-page .main-visual .next {
  right: 130px;
  border-bottom: none;
  border-left: none;
}
.v9-page .main-visual .nav:hover { border-color: #fff; }

@media (max-width: 1200px) {
  .v9-page .main-visual .prev { left: 50px; }
  .v9-page .main-visual .next { right: 50px; }
}

@media (max-width: 767px) {
  .v9-page .main-visual .swiper-slide .c { top: 45%; }
  .v9-page .main-visual .content .head { font-size: 2rem; }
  .v9-page .main-visual .content .subhead,
  .v9-page .main-visual .content .desc { font-size: 0.95rem; }
  .v9-page .main-visual .content { padding-left: 20px; padding-right: 20px; }
  .v9-page .main-visual .nav { width: 30px; height: 30px; }
  .v9-page .main-visual .prev { left: 20px; }
  .v9-page .main-visual .next { right: 20px; }
}

/* ─────────────────────────────────────────────────
 * 4) 우측 퀵메뉴 (.quick-menu)
 * ───────────────────────────────────────────────── */
.v9-page .quick-menu {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  right: 0;
  width: 100px;
  z-index: 9;
}
.v9-page .quick-menu .tiles { display: flex; flex-direction: column; }
.v9-page .quick-menu .tile {
  margin-bottom: 4px;
  text-align: center;
}
/* 2026-06-02: 단일 박스. 평상시 우측 24px 를 화면 밖에 숨겨두고(우측에 더 있는 박스),
 *   호버 시 박스+글자를 통째로 24px 좌측 이동(transform) → 완전 싱크 + 우측 갭/새 배경 없음.
 *   padding-right 에 +24px 보정 → 콘텐츠는 보이는 영역 가운데 + 텍스트 폭 80px 유지(줄바꿈 불변). */
.v9-page .quick-menu .tile .a {
  position: relative;
  display: block;
  width: calc(100% + 24px);
  margin-right: -24px;
  box-sizing: border-box;
  padding: 10px 34px 10px 10px;
  text-decoration: none;
  color: #fff;
  background-color: rgba(255, 255, 255, 0.8);
  transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
}
/* 호버 — 색 반전: 배경 = 글자색(파랑), 글자·아이콘 = 화이트.
 * 배경은 타일 인라인(white 0.5)이라 !important 로 덮고 라벨 색 변수 재사용. */
.v9-page .quick-menu .tile .a:hover {
  transform: translateX(-24px);
  box-shadow: -3px 0 6px rgba(0, 0, 0, 0.18);
  background-color: var(--v9-side-label-color, #0d6e9c) !important;
}
.v9-page .quick-menu .tile .a .image {
  width: 35px;
  margin: 5px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v9-page .quick-menu .tile .a .image .img {
  width: 35px;
  height: 35px;
  background: none no-repeat center / contain;
}
/* lucide inline SVG — 색/두께 CSS 변수 제어 */
.v9-page .quick-menu .tile .a .image .v9-side-icon--svg svg {
  width: 28px;
  height: 28px;
  stroke: var(--v9-side-icon-color, #fff) !important;
  stroke-width: var(--v9-side-icon-stroke, 2) !important;
  fill: none !important;
  transition: stroke 0.25s ease;
}
.v9-page .quick-menu .tile .a .content {
  margin-top: 4px;
  text-align: center;
}
.v9-page .quick-menu .tile .a .content .head {
  line-height: 1.2;
  font-size: var(--v9-side-label-size, 0.85rem);
  font-weight: var(--v9-side-label-weight, 500);
  color: var(--v9-side-label-color, #fff);
  transition: color 0.25s ease;
}
/* 2026-06-02: 호버 시 글자·아이콘 화이트로 (박스가 나올 때 배경에 묻히지 않게) */
.v9-page .quick-menu .tile .a:hover .content .head {
  color: #fff;
}
.v9-page .quick-menu .tile .a:hover .image .v9-side-icon--svg svg {
  stroke: #fff !important;
}

@media (max-width: 1200px) {
  .v9-page .quick-menu { display: none; }
}

/* ─────────────────────────────────────────────────
 * 5) 스크롤 인디케이터 (#main-mouse-scroll)
 * ───────────────────────────────────────────────── */
.v9-page #main-mouse-scroll {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 30px;
  display: block;
  width: 20px;
  height: 40px;
  z-index: 3;
  cursor: pointer;
  animation: v9-mouse-scroll 1.5s infinite ease-in-out;
  opacity: 0.7;
}
.v9-page #main-mouse-scroll div {
  position: relative;
  width: 100%;
  height: 100%;
  border: 2px solid rgba(255, 255, 255, 0.8);
  border-radius: 12px;
}
.v9-page #main-mouse-scroll div::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  width: 2px;
  height: 8px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  transform: translateX(-50%);
  animation: v9-mouse-dot 1.5s infinite;
}
.v9-page #main-mouse-scroll span {
  position: absolute;
  left: 50%;
  bottom: -22px;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  color: rgba(255, 255, 255, 0.8);
  width: 120px;
  transform: translateX(-50%);
  text-align: center;
  white-space: nowrap;
}

@keyframes v9-mouse-scroll {
  0%   { bottom: 30px; }
  50%  { bottom: 38px; opacity: 1; }
  100% { bottom: 30px; opacity: 0.7; }
}
@keyframes v9-mouse-dot {
  0%   { transform: translate(-50%, 0); opacity: 1; }
  100% { transform: translate(-50%, 12px); opacity: 0; }
}

@media (max-width: 1200px) {
  .v9-page #main-mouse-scroll { display: none; }
}

/* ─────────────────────────────────────────────────
 * 5-1) Section 2: .fp-4fullimg (카피본 마크업/스타일 그대로 발췌, .v9-page 스코프)
 *      4분할 풀이미지 카드. 호버 시 카드 너비 확장 + 원 확장 + 오버레이 제거 + more 노출.
 * ───────────────────────────────────────────────── */
.v9-page .fp-4fullimg {
  display: flex;
  overflow: hidden;
}

/* 각 카드 — 25% 너비, 100% 높이 */
.v9-page .fp-4fullimg .a {
  position: relative;
  flex: 1 1 25%;
  width: 25%;
  height: 100%;
  padding: 50px;
  color: #fff;
  text-decoration: none;
  transition: flex 0.8s ease, width 0.8s ease;
  overflow: hidden;
}

/* 배경 이미지 별도 레이어 — 호버 시 scale 1.12 로 확대 (cover 유지하면서 줌인) */
.v9-page .fp-4fullimg .a .v9-fp-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  transform: scale(1);
  transition: transform 1.2s ease;
  z-index: 0;
}
.v9-page .fp-4fullimg .a:hover .v9-fp-bg {
  transform: scale(1.12);
}

/* 어두운 오버레이 — 호버 시 사라짐 */
.v9-page .fp-4fullimg .a::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  transition: background 0.5s ease;
  z-index: 1;
}
.v9-page .fp-4fullimg .a:hover::after {
  background: rgba(0, 0, 0, 0);
}

/* 카드 안 콘텐츠 */
.v9-page .fp-4fullimg .a .content {
  position: relative;
  text-align: center;
  padding: 110px 50px 0;
  z-index: 2;
}

/* 가운데 원 (배경 원) — content::before. 컬러는 카드별 --v9-circle-color 변수 */
.v9-page .fp-4fullimg .a .content::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  border-radius: 100%;
  background: var(--v9-circle-color, rgba(255, 255, 255, 0.18));
  opacity: 0.9;
  transition: width 0.5s ease, height 0.5s ease, top 0.5s ease, opacity 0.5s ease;
  z-index: 0;
}

/* 가운데 아이콘 — .v9-fp-icon
 *   PNG/JPG: background-image (filter 로 흰색)
 *   lucide SVG: .v9-fp-icon--svg 안 inline SVG (CSS stroke 제어) */
.v9-page .fp-4fullimg .a .content .v9-fp-icon {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  width: 80px;
  height: 80px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 46px 46px;
  transition: transform 0.5s ease, width 0.5s ease, height 0.5s ease;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
/* background-image 모드 (PNG/JPG) — 흰색 filter */
.v9-page .fp-4fullimg .a .content .v9-fp-icon:not(.v9-fp-icon--svg) {
  filter: brightness(0) invert(1);
}
/* inline SVG 모드 (lucide) — stroke 두께 CSS 변수로 제어 */
.v9-page .fp-4fullimg .a .content .v9-fp-icon.v9-fp-icon--svg svg {
  width: 46px;
  height: 46px;
  stroke: #fff !important;
  stroke-width: var(--v9-icon-stroke, 2) !important;
  fill: none !important;
}
.v9-page .fp-4fullimg .a:hover .content .v9-fp-icon {
  transform: translateX(-50%) scale(1.15);
}

.v9-page .fp-4fullimg .a .content > div,
.v9-page .fp-4fullimg .a .content > a { position: relative; z-index: 2; }

/* head 위 가로 짧은 선 */
.v9-page .fp-4fullimg .a .content .head {
  padding-top: 25px;
  line-height: 1.2;
  font-size: var(--v9-label-size, 1.7rem);
  font-weight: var(--v9-label-weight, 700);
}
.v9-page .fp-4fullimg .a .content .head::before {
  content: "";
  position: absolute;
  left: 50%;
  margin-left: -10px;
  top: 0;
  width: 20px;
  height: 2px;
  background: #fff;
}
.v9-page .fp-4fullimg .a .content .desc {
  margin-top: 10px;
  font-size: var(--v9-subtitle-size, 1rem);
  font-weight: var(--v9-subtitle-weight, 400);
  color: rgba(255, 255, 255, 0.85);
}

/* more — 기본 숨김, 호버 시 표시 (PC 풀스크린 모드에서만). 호버 시 컬러 채움 */
.v9-page .fp-4fullimg .a .content .more {
  display: none;
  margin: 60px auto 0;
  border: 1px solid #fff;
  padding: 10px;
  width: 120px;
  font-size: 0.875rem;
  color: #fff;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.v9-page .fp-4fullimg .a .content .more:hover {
  background: var(--accent-navy, #1e3e83);
  border-color: var(--accent-navy, #1e3e83);
  color: #fff;
}

/* PC 풀스크린 — 카드 너비 확장 + 원 확장 + more 노출
 * .content top 보정: GNB(--header-height) 만큼 위가 잘리므로 보이는 영역의 중앙으로 이동 */
@media (min-width: 1200px) and (min-height: 750px) {
  .v9-page .fp-4fullimg .a { padding: 0; }
  .v9-page .fp-4fullimg .a .content {
    top: calc(35% + var(--header-height, 158px) / 2);
    padding: 110px 50px 0;
  }
  .v9-page .fp-4fullimg .a:hover {
    flex: 1 1 45%;
    width: 45%;
  }
  .v9-page .fp-4fullimg .a:hover .content::before {
    top: -30px;
    width: 400px;
    height: 400px;
    opacity: 0.4;
  }
  .v9-page .fp-4fullimg .a:hover .content .more { display: block; }
}

/* ─────────────────────────────────────────────────
 * 모바일/태블릿 (1199px 이하) — 카드 안 콘텐츠 가운데 정렬
 *   - .a 자체를 flex center 로
 *   - .v9-fp-icon position absolute → relative (자연 흐름)
 *   - ::before 확장 원 비활성 (호버 효과 X, 정적 배치)
 *   - more 버튼 항상 표시
 * ───────────────────────────────────────────────── */
@media (max-width: 1199px) {
  .v9-page .fp-4fullimg {
    flex-wrap: wrap;
    height: 100vh;
    align-content: stretch;
  }
  .v9-page .fp-4fullimg .a {
    flex: 1 1 50%;
    width: 50%;
    height: 50%;
    padding: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .v9-page .fp-4fullimg .a .content {
    position: relative;
    padding: 0;
    top: auto !important;
    width: 100%;
    text-align: center;
  }
  /* 호버 확장 원 비활성 — 모바일에서는 호버 인터랙션 없으므로 정적 배경만 */
  .v9-page .fp-4fullimg .a .content::before { display: none; }
  /* 아이콘 — absolute 해제, 자연 흐름 + 가운데 마진 */
  .v9-page .fp-4fullimg .a .content .v9-fp-icon {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    width: 56px;
    height: 56px;
    background-size: 32px 32px;
    margin: 0 auto 14px;
  }
  .v9-page .fp-4fullimg .a:hover .content .v9-fp-icon { transform: none; }
  .v9-page .fp-4fullimg .a .content .v9-fp-icon.v9-fp-icon--svg svg {
    width: 32px; height: 32px;
  }
  /* head 위 짧은 선도 가운데 정렬 유지 */
  .v9-page .fp-4fullimg .a .content .head {
    padding-top: 18px;
    font-size: 1.4rem;
  }
  .v9-page .fp-4fullimg .a .content .desc {
    margin-top: 8px;
    font-size: 0.95rem;
  }
  .v9-page .fp-4fullimg .a .content .more {
    display: inline-block !important;
    margin: 20px auto 0;
    padding: 8px 18px;
    width: auto;
    font-size: 0.85rem;
  }
  /* 카드 호버 시 폭 확장 비활성 (모바일은 hover 무의미) */
  .v9-page .fp-4fullimg .a:hover {
    flex: 1 1 50%;
    width: 50%;
  }
}

/* 모바일 — 1열 세로 균등 분할 */
@media (max-width: 640px) {
  .v9-page .fp-4fullimg {
    flex-direction: column;
  }
  .v9-page .fp-4fullimg .a {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    padding: 16px;
  }
  .v9-page .fp-4fullimg .a:hover {
    flex: 1 1 0;
    width: 100%;
  }
  .v9-page .fp-4fullimg .a .content .head { font-size: 1.2rem; padding-top: 14px; }
  .v9-page .fp-4fullimg .a .content .desc { font-size: 0.88rem; margin-top: 6px; }
  .v9-page .fp-4fullimg .a .content .v9-fp-icon {
    width: 48px; height: 48px; background-size: 28px 28px; margin-bottom: 10px;
  }
  .v9-page .fp-4fullimg .a .content .v9-fp-icon.v9-fp-icon--svg svg {
    width: 28px; height: 28px;
  }
  .v9-page .fp-4fullimg .a .content .more {
    margin-top: 14px;
    padding: 6px 14px;
    font-size: 0.8rem;
  }
}

/* 빈 상태 placeholder */
.v9-page .fp-4fullimg .v9-fp-placeholder {
  margin: auto;
  text-align: center;
  padding: 60px 32px;
  max-width: 480px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.v9-page .fp-4fullimg .v9-fp-placeholder h3 { margin: 0 0 8px; font-size: 1.5rem; color: var(--text-primary, #333); }
.v9-page .fp-4fullimg .v9-fp-placeholder p { margin: 0; color: var(--text-light, #888); font-size: 0.95rem; }

/* ─────────────────────────────────────────────────
 * 5-2) Section 3: fp-circle-bg (게시판 + 학술지/투고 박스 + 3 카드 타일)
 *      카피본 default.css 발췌 + .v9-page 스코프
 * ───────────────────────────────────────────────── */
.v9-page .fp-circle-bg { position: relative; }
.v9-page .fp-circle-bg.sec.padding {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: var(--header-height, 158px);
  padding-bottom: 40px;
}
/* 캘린더 섹션만 .c 가 가로 + 세로 stretch (캘린더 그리드가 가용 영역 채우게) */
.v9-page .v9-calendar-section.fp-circle-bg.sec.padding {
  align-items: stretch;
  padding-top: calc(var(--header-height, 158px) + 16px);
  padding-bottom: 32px;
}
.v9-page .v9-calendar-section .c {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-height: 0;
}
.v9-page .v9-calendar-section .v9-section-title { margin: 0 0 4px; flex: 0 0 auto; }
.v9-page .v9-calendar-section .v9-calendar-pc { flex: 1 1 auto; min-height: 0; }
.v9-page .v9-calendar-section .v9-events-more { flex: 0 0 auto; margin-top: 0; }
.v9-page .fp-circle-bg .bg {
  position: absolute;
  width: 1400px;
  left: 50%;
  transform: translateX(-50%);
  top: 0;
  bottom: 0;
  z-index: 0;
}
.v9-page .fp-circle-bg .bg div { position: absolute; border-radius: 100%; transition: top 0.6s ease; }
.v9-page .fp-circle-bg .bg .circle1 { left:-100px; width:150px; height:150px; background:#ffd700; top:20%; opacity:.2; }
.v9-page .fp-circle-bg .bg .circle2 { right:-100px; width:250px; height:250px; background:linear-gradient(#ffa50f 50%, transparent 50%); top:20%; }
.v9-page .fp-circle-bg .bg .circle3 { left:20%; width:100px; height:100px; background:#f77100; top:50%; opacity:.5; }
.v9-page .fp-circle-bg .bg .circle4 { left:50%; width:50px; height:50px; background:#bfff00; top:100%; }
.v9-page .fp-circle-bg .bg .circle5 { left:70%; width:30px; height:30px; background:#666; top:80%; }
.v9-page .fp-circle-bg .bg .circle6 { left:35%; width:20px; height:20px; background:#50bcdf; top:60%; }
.v9-page .fp-circle-bg .bg .circle7 { right:30%; width:200px; height:200px; background:linear-gradient(45deg, #eee 25%, transparent 0, transparent 50%, #eee 0, #eee 75%, transparent 0); top:60%; }

.v9-page .fp-circle-bg .c {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1400px;
  padding: 0 40px;
}

/* sec1 — 좌(공지) + 우(학술지/투고) */
.v9-page .fp-circle-bg .sec1 { display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.v9-page .fp-circle-bg .sec1 > div { width: calc(50% - 10px); }

.v9-page .fp-circle-bg .sec1 .left { background: #f8f8f8; padding: 18px 24px; border-radius: 8px; }
.v9-page .fp-circle-bg .sec1 .left .head { margin-bottom: 10px; font-size: 1.4rem; font-weight: 700; }
.v9-page .fp-circle-bg .sec1 .board-list a {
  position: relative; display: flex; width: 100%;
  padding: 6px 0 6px 12px; border-bottom: 1px solid #ddd;
  text-decoration: none; color: #333; transition: border-color 0.2s ease;
  font-size: 15px; line-height: 1.4;
}
.v9-page .fp-circle-bg .sec1 .board-list a::before {
  content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 3px; height: 3px; border-radius: 99px; background: #aaa;
}
.v9-page .fp-circle-bg .sec1 .board-list a:hover { border-color: #333; }
.v9-page .fp-circle-bg .sec1 .board-list a .subject { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.v9-page .fp-circle-bg .sec1 .board-list a .date { width: 90px; font-size: 15px; color: #aaa; text-align: right; }

.v9-page .fp-circle-bg .sec1 .right { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 20px; }
.v9-page .fp-circle-bg .sec1 .right ul {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  width: calc(50% - 10px); padding: 20px 30px; background: #555; color: #fff;
  list-style: none; margin: 0; border-radius: 8px;
}
/* 우측 박스 배경 — v8 의 bg-big.svg (한글 자음 패턴) 재사용
 * SVG 자체가 opacity 처리된 자음 면이라 단색 배경 위에 얹으면 색 위에 살짝 자음 비침 */
.v9-page .fp-circle-bg .sec1 .right ul {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  position: relative;
}
.v9-page .fp-circle-bg .sec1 .right ul > li { position: relative; z-index: 1; }
.v9-page .fp-circle-bg .sec1 .right ul:nth-child(1) { background-color: #a0744f; }
.v9-page .fp-circle-bg .sec1 .right ul:nth-child(2) { background-color: #555; }
.v9-page .fp-circle-bg .sec1 .right ul .head { font-size: 1.4rem; font-weight: 500; line-height: 1; margin-bottom: 10px; }
.v9-page .fp-circle-bg .sec1 .right ul .desc { margin-bottom: 20px; font-size: 0.95rem; opacity: 0.85; }
.v9-page .fp-circle-bg .sec1 .right ul .btn { display: flex; gap: 6px; }
.v9-page .fp-circle-bg .sec1 .right ul .btn a {
  display: flex; align-items: center; color: #fff; border: 1px solid #fff;
  padding: 6px 15px; font-size: 0.875rem; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.v9-page .fp-circle-bg .sec1 .right ul .btn a:hover { background: #fff; color: #111; }

/* sec2 — 하단 3 카드 타일 (16:9 이미지 + 3 컬럼) */
.v9-page .fp-circle-bg .sec2 { margin-top: 40px; }
.v9-page .fp-circle-bg .sec2 .tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.v9-page .fp-circle-bg .sec2 .tile { margin: 0; }
.v9-page .fp-circle-bg .sec2 .tile .a {
  display: block; background: #fff; border-radius: 8px; overflow: hidden;
  text-decoration: none; color: #333;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v9-page .fp-circle-bg .sec2 .tile .a:hover { transform: translateY(-3px); box-shadow: 0 8px 20px rgba(0,0,0,0.08); }
.v9-page .fp-circle-bg .sec2 .tile .image .img {
  position: relative; padding-bottom: 56.25%; /* 16:9 */
  background: none center / cover no-repeat #ddd;
}
.v9-page .fp-circle-bg .sec2 .tile .content { padding: 16px 20px; text-align: left; }
.v9-page .fp-circle-bg .sec2 .tile .content .head { font-size: 1.15rem; font-weight: 600; display: flex; align-items: center; gap: 6px; margin: 0; }

/* 반응형 — 좁아지면 2 컬럼 → 1 컬럼 */
@media (max-width: 1024px) {
  .v9-page .fp-circle-bg .sec1 > div { width: 100%; }
  .v9-page .fp-circle-bg .sec2 .tiles { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (max-width: 640px) {
  .v9-page .fp-circle-bg .sec2 .tiles { grid-template-columns: 1fr; gap: 14px; }
}

/* ─────────────────────────────────────────────────
 * 5-3) Section 4: 일정 (iframe)
 * ───────────────────────────────────────────────── */
.v9-page .v9-section-title {
  text-align: center;
  font-size: 2rem;
  font-weight: 700;
  margin: 0 0 24px;
  color: #222;
}
/* 배경 이미지 있을 때 어두운 오버레이 + 흰 글자 */
.v9-page .v9-calendar-section .v9-calendar-overlay,
.v9-page .v9-board-section .v9-board-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 0;
}
/* 2026-06-01: 섹션3(게시판) 어두운 오버레이 제거 — 카드 자체 컬러로 충분 */
.v9-page .v9-board-section .v9-board-overlay {
  display: none;
}
.v9-page .v9-calendar-section[style*="background"] .v9-section-title {
  color: #fff;
}

/* v9 캘린더 SSOT — 셀/헤더/버튼 공통 토큰 */
.v9-page .v9-calendar-section {
  --v9cal-cell-pad: 6px;
  --v9cal-day-fs: 0.85rem;
  --v9cal-event-fs: 0.72rem;
  --v9cal-event-gap: 2px;
  --v9cal-monthbar-pad: 8px 12px;
  --v9cal-head-pad: 8px 6px;
  /* 가용 높이에서 monthbar(40) + head(34) + section title(72) + more(60) + section padding 빼고 6주 등분 */
  --v9cal-row-h: calc((100vh - var(--header-height, 158px) - 240px) / 6);
}

/* PC 월별 캘린더 (768px 이상) / 모바일 리스트 (767px 이하) 토글 */
.v9-page .v9-calendar-pc { display: none; }
.v9-page .v9-calendar-mobile { display: block; }
@media (min-width: 768px) {
  .v9-page .v9-calendar-pc {
    display: flex;
    flex-direction: column;
    max-width: 1100px;
    width: 100%;
    margin: 0 auto;
  }
  .v9-page .v9-calendar-mobile { display: none; }
}

/* 캘린더 month bar — 그리드 상단의 단일 행 (좌측 nav + 가운데 년월 + 우측 nav + 오늘) */
.v9-page .v9-cal-monthbar {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--v9cal-monthbar-pad);
  background: #f8fafc;
  border-bottom: 1px solid var(--border-light, #eee);
  flex: 0 0 auto;
}
.v9-page .v9-cal-monthbar .v9-cal-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-primary, #222);
  min-width: 130px;
  text-align: center;
}
.v9-page .v9-cal-btn {
  background: #fff;
  border: 1px solid var(--border-light, #e0e0e0);
  color: var(--text-primary, #222);
  padding: 4px 10px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  line-height: 1.2;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.v9-page .v9-cal-btn:hover { background: #f1f5f9; border-color: #cbd5e1; }
.v9-page .v9-cal-btn.v9-cal-today { font-size: 0.75rem; padding: 4px 10px; }

/* 그리드 — flex column 으로 monthbar/head/주(1fr×6) 분배 → 동적 높이 */
.v9-page .v9-cal-grid {
  background: rgba(255, 255, 255, 0.96);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  min-height: 520px;
}
.v9-page .v9-cal-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--border-light, #eee);
}
.v9-page .v9-cal-row:first-child { border-top: none; }
.v9-page .v9-cal-head { background: #f8fafc; flex: 0 0 auto; }
/* 주 행 — 동적 높이 (vh 기반) */
.v9-page .v9-cal-row:not(.v9-cal-monthbar):not(.v9-cal-head) {
  flex: 1 1 auto;
  min-height: var(--v9cal-row-h);
}
.v9-page .v9-cal-cell-head {
  padding: var(--v9cal-head-pad);
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light, #888);
  border-right: 1px solid var(--border-light, #eee);
}
.v9-page .v9-cal-cell-head:last-child { border-right: none; }
/* 일/토 — 파스텔 톤 */
.v9-page .v9-cal-cell-head[data-dow="0"] { color: #f472b6; }
.v9-page .v9-cal-cell-head[data-dow="6"] { color: #7dd3fc; }

.v9-page .v9-cal-cell {
  position: relative;
  padding: var(--v9cal-cell-pad);
  border-right: 1px solid var(--border-light, #eee);
  background: #fff;
  overflow: hidden;
}
.v9-page .v9-cal-cell:last-child { border-right: none; }
.v9-page .v9-cal-cell.is-other { background: #fafafa; }
.v9-page .v9-cal-cell.is-past  { background: #fafbfc; }
/* 오늘 — 파스텔 옐로 */
.v9-page .v9-cal-cell.is-today { background: #fef9c3; }
.v9-page .v9-cal-cell.is-today .v9-cal-day {
  color: #92400e;
  background: #fde68a;
  border-radius: 99px;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
}
.v9-page .v9-cal-day {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-primary, #333);
  margin-bottom: 4px;
}
.v9-page .v9-cal-cell.is-other .v9-cal-day { color: #d1d5db; }
.v9-page .v9-cal-cell.is-sun:not(.is-other) .v9-cal-day { color: #f472b6; }
.v9-page .v9-cal-cell.is-sat:not(.is-other) .v9-cal-day { color: #60a5fa; }

/* 이벤트 chip — 파스텔 배경 + 진한 글자 (가독성 유지) */
.v9-page .v9-cal-events {
  display: flex;
  flex-direction: column;
  gap: var(--v9cal-event-gap);
}
.v9-page .v9-cal-event {
  display: block;
  padding: 2px 6px;
  font-size: var(--v9cal-event-fs);
  border-radius: 3px;
  background: #e0e7ff;     /* default (schedule): pastel indigo */
  color: #4338ca !important;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.15s ease;
}
.v9-page a.v9-cal-event:hover { opacity: 0.75; }
.v9-page .v9-cal-event[data-type="event"]    { background: #ffe4e6; color: #be123c !important; }
.v9-page .v9-cal-event[data-type="lecture"]  { background: #dbeafe; color: #1d4ed8 !important; }
.v9-page .v9-cal-event[data-type="opening"]  { background: #d1fae5; color: #047857 !important; }
.v9-page .v9-cal-event[data-type="memorial"] { background: #f3e8ff; color: #7e22ce !important; }
.v9-page .v9-cal-event[data-type="trip"]     { background: #e2e8f0; color: #475569 !important; }
.v9-page .v9-cal-more {
  display: block;
  padding: 1px 6px;
  font-size: 0.7rem;
  color: var(--text-light, #888);
}

/* events 리스트 */
.v9-page .v9-events-list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 900px;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.v9-page .v9-event-item {
  border-bottom: 1px solid var(--border-light, #eee);
}
.v9-page .v9-event-item:last-child { border-bottom: none; }
.v9-page .v9-event-item.is-past { opacity: 0.55; }
/* item 자체는 list-item, 내부 a/div 가 row */
.v9-page .v9-event-item-link {
  display: flex;
  align-items: center;
  gap: 24px;
  padding: 18px 28px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s ease;
}
.v9-page a.v9-event-item-link:hover { background: #f8fafc; }
.v9-page .v9-event-arrow {
  margin-left: auto;
  color: var(--text-light, #888);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.v9-page .v9-event-date {
  flex: 0 0 110px;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--accent-navy, #1e3e83);
  letter-spacing: -0.02em;
}
.v9-page .v9-event-body {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.v9-page .v9-event-type {
  flex: 0 0 auto;
  padding: 3px 10px;
  font-size: 0.78rem;
  font-weight: 500;
  color: #fff;
  background: var(--accent-navy, #1e3e83);
  border-radius: 99px;
}
.v9-page .v9-event-type[data-type="event"] { background: #d97706; }
.v9-page .v9-event-type[data-type="lecture"] { background: #2563eb; }
.v9-page .v9-event-type[data-type="opening"] { background: #16a34a; }
.v9-page .v9-event-type[data-type="memorial"] { background: #9333ea; }
.v9-page .v9-event-type[data-type="trip"] { background: #475569; }
.v9-page .v9-event-title {
  font-size: 1.05rem;
  color: var(--text-primary, #222);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.v9-page .v9-events-empty {
  text-align: center;
  color: rgba(255, 255, 255, 0.9);
  padding: 40px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 12px;
  max-width: 600px;
  margin: 0 auto;
}
.v9-page .v9-events-more {
  text-align: center;
  margin-top: 24px;
}
.v9-page .v9-events-more-link {
  display: inline-block;
  padding: 10px 24px;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 99px;
  color: #fff;
  text-decoration: none;
  font-size: 0.95rem;
  transition: background 0.25s, color 0.25s;
}
.v9-page .v9-events-more-link:hover {
  background: #fff;
  color: var(--accent-navy, #1e3e83);
}
/* 배경 없을 때(원형 데코) — 흰 배경에 어울리게 색상 보정 */
.v9-page .v9-calendar-section:not([style*="background"]) .v9-events-more-link {
  border-color: var(--accent-navy, #1e3e83);
  color: var(--accent-navy, #1e3e83);
}
.v9-page .v9-calendar-section:not([style*="background"]) .v9-events-more-link:hover {
  background: var(--accent-navy, #1e3e83);
  color: #fff;
}
.v9-page .v9-calendar-section:not([style*="background"]) .v9-events-empty {
  color: var(--text-light, #888);
  background: var(--bg-light, #f7f8fa);
}

@media (max-width: 640px) {
  .v9-page .v9-event-item { flex-direction: column; align-items: flex-start; gap: 8px; padding: 14px 18px; }
  .v9-page .v9-event-date { flex: none; font-size: 0.95rem; }
  .v9-page .v9-event-title { white-space: normal; }
}

/* ─────────────────────────────────────────────────
 * 5-4) Section 5: fp-company — Since/Count + ABOUT + img-btn2
 * ───────────────────────────────────────────────── */
.v9-page .fp-company {
  background: #333 bottom center / cover no-repeat fixed;
  position: relative;
  color: #fff;
  display: flex;
  flex-direction: column;
}
.v9-page .fp-company::after {
  content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.5); z-index: 0;
  pointer-events: none;
}
/* 가운데 텍스트 영역 — GNB 와 하단 박스 사이를 채우고 그 안에서 세로/가로 가운데 정렬 */
.v9-page .fp-company > .c {
  position: relative;
  z-index: 2;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--header-height, 158px) 20px 40px;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.v9-page .fp-company .header { color: #fff; text-align: center; }

/* Since / Count 박스 — 가운데 정렬, 위쪽 baseline, span(라벨) 위 + h1(숫자) 아래 */
.v9-page .fp-company .header .num {
  display: inline-block;
  vertical-align: top;
  margin: 0 30px;
  text-align: center;
  line-height: 1;
}
.v9-page .fp-company .header .num span {
  display: block;
  font-size: 1rem;
  letter-spacing: 0.05em;
  color: #ffa50f;
  margin-bottom: 10px;
}
.v9-page .fp-company .header .num h1 {
  display: block;
  font-size: 4rem;
  line-height: 1;
  margin: 0;
  color: #fff;
  font-weight: 700;
}

/* 박스 다음 제목/설명 */
.v9-page .fp-company .header .head {
  color: #fff;
  margin: 40px auto 15px;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.3;
}
.v9-page .fp-company .header .desc {
  color: #ccc;
  font-size: 1.15rem;
  line-height: 1.5;
  max-width: 900px;
  margin: 0 auto;
}
.v9-page .fp-company .content { margin-top: 40px; }
.v9-page .fp-company .content .btn-area {
  position: relative; margin: 0 auto; width: 200px;
}
.v9-page .fp-company .content .btn-area a {
  display: block; border: 2px solid rgba(255,255,255,0.6); color: rgba(255,255,255,0.85);
  padding: 18px; text-decoration: none; transition: background 0.2s, color 0.2s;
}
.v9-page .fp-company .content .btn-area a:hover { background: #fff; color: #111; }

/* img-btn2 — 하단 좌우 박스 (화면 바닥 고정) */
.v9-page .img-btn2 {
  position: relative;
  z-index: 2;
  display: flex; flex-wrap: wrap;
  background: rgba(0,0,0,0.5);
  color: #fff;
  margin-top: 0;
  flex-shrink: 0;
}
.v9-page .img-btn2 .bg { padding: 50px; text-align: center; }
.v9-page .img-btn2 .left2 { width: 50%; }
.v9-page .img-btn2 .right2 { width: 25%; }
/* 2026-06-05: 박스가 1개뿐이면 화면 전체폭 → text-align:center 로 화면 중앙 정렬
 *   (2개 이상일 때만 좌 50% / 우 25% 분할 유지) */
.v9-page .img-btn2 .bg:only-child { width: 100%; }
.v9-page .img-btn2 .h4n { font-size: 1.5rem; font-weight: 500; margin-bottom: 16px; }
.v9-page .img-btn2 .btn {
  display: inline-block; border: 1px solid #fff; border-radius: 99px;
  padding: 10px 24px; margin: 4px; color: #fff !important;
  text-decoration: none; transition: background 0.2s, color 0.2s;
  /* 2026-06-05: 라벨 길이와 무관하게 버튼 너비 통일 */
  min-width: 200px; max-width: 100%; box-sizing: border-box; text-align: center;
}
.v9-page .img-btn2 .btn:hover { background: #ffa50f; border-color: #ffa50f; }

@media (max-width: 1199px) {
  .v9-page .img-btn2 .left2, .v9-page .img-btn2 .right2 { width: 100%; }
}

/* ─────────────────────────────────────────────────
 * 5-5) Section 6: 스폰서 슬라이드 (자동 높이)
 * ───────────────────────────────────────────────── */
.v9-page .v9-sponsors {
  height: auto !important;
  min-height: auto !important;
  padding: 30px 0;
  background: #fff;
}
/* 사이트 표준 #rel/.relatedSwiper — v9 스코프 안 기본 스타일 */
.v9-page #rel { width: 100%; }
.v9-page #rel .inner { max-width: 1400px; margin: 0 auto; padding: 0 40px; }
.v9-page #rel .area { position: relative; }
.v9-page #rel .cont {
  position: absolute; top: 50%; right: 0; transform: translateY(-50%);
  z-index: 5; display: flex; gap: 4px;
}
.v9-page #rel .cont button {
  width: 32px; height: 32px;
  background: #f5f7fa;
  border: 1px solid var(--border-light, #e0e0e0);
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-primary, #333);
}
.v9-page #rel .cont button:hover { background: #e5eaf0; }
.v9-page #rel .relatedSwiper { padding-right: 110px; }
.v9-page #rel .relatedSwiper .swiper-slide {
  height: 60px;
  display: flex; align-items: center; justify-content: center;
}
.v9-page #rel .relatedSwiper .swiper-slide a {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
}
.v9-page #rel .relatedSwiper .swiper-slide img {
  max-height: 60px; max-width: 100%;
  object-fit: contain;
}

/* ─────────────────────────────────────────────────
 * 6) GSAP reveal — will-change 만, 초기 상태는 JS 가 인라인으로 처리
 * ───────────────────────────────────────────────── */
.v9-page [data-ani-name],
.v9-page .tile,
.v9-page .board-list a {
  will-change: opacity, transform;
}
/* 이전 캐시된 main-v9.js 가 board-list a 에 autoAlpha 0 박았을 수 있어 강제 visible */
.v9-page .board-list a {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* ─────────────────────────────────────────────────
 * 7) reduced motion
 * ───────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .v9-page *,
  .v9-page *::before,
  .v9-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

/* ─────────────────────────────────────────────────
 * 2026-06-01: 섹션 3 v4 스타일 (.v9-v4board)
 * v4 의 .board-boxes-v4 / .conference-box / .board-skin-alt 구조를
 * .v9-page 스코프에 한정해 이식
 * ───────────────────────────────────────────────── */
.v9-page .v9-v4board { width: 100%; }
.v9-page .v9-v4board .board-boxes-v4 {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}
.v9-page .v9-v4board .board-boxes-v4.board-row-top    { margin-bottom: 32px; }
.v9-page .v9-v4board .board-boxes-v4.board-row-bottom { margin-bottom: 0; }

.v9-page .v9-v4board .board-box-v4 {
  flex: 0 0 calc(50% - 12px);
  min-width: 0;
  background: #fff;
  padding: 20px;
  border-radius: 16px;
}

/* 학술대회 박스 */
.v9-page .v9-v4board .conference-box {
  background: #447DC0;
  position: relative;
  overflow: hidden;
}
.v9-page .v9-v4board .conference-box::after {
  content: '';
  position: absolute; right: 20px; bottom: -20px;
  width: 160px; height: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
  opacity: 0.08; pointer-events: none; z-index: 0;
}
.v9-page .v9-v4board .conference-box .board-box-header {
  margin-bottom: 16px; padding-bottom: 12px;
  border-bottom: 2px solid rgba(255,255,255,0.3);
  position: relative; z-index: 1;
  display: flex; justify-content: space-between; align-items: center;
}
.v9-page .v9-v4board .conference-box .board-box-header h3 { color: #fff; font-size: 1.5rem; font-weight: 600; margin: 0; }
.v9-page .v9-v4board .conference-box .board-box-header .more-link { color: rgba(255,255,255,0.7); font-size: 1.25rem; text-decoration: none; line-height: 1; }
.v9-page .v9-v4board .conference-box .board-box-header .more-link:hover { color: #fff; }
.v9-page .v9-v4board .conference-box .board-box-content {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 180px;
}

.v9-page .v9-v4board .conference-slider { position: relative; display: flex; align-items: center; }
.v9-page .v9-v4board .conferenceSwiper { width: 100%; }
.v9-page .v9-v4board .conferenceSwiper .swiper-slide { display: flex; align-items: center; }
.v9-page .v9-v4board .conference-item { width: 100%; }
.v9-page .v9-v4board .conf-title { font-size: 1.125rem; font-weight: 600; color: #fff; margin-bottom: 16px; line-height: 1.4; }
.v9-page .v9-v4board .conf-details { display: flex; flex-direction: column; gap: 8px; }
.v9-page .v9-v4board .conf-row { display: flex; align-items: baseline; gap: 12px; font-size: 1rem; color: rgba(255,255,255,0.95); }
.v9-page .v9-v4board .conf-label { flex-shrink: 0; width: 40px; font-weight: 500; color: rgba(255,255,255,0.75); }
.v9-page .v9-v4board .conf-value { flex: 1; min-width: 0; }
.v9-page .v9-v4board .conf-btn-wrap { margin-top: 16px; }
.v9-page .v9-v4board .conf-btn {
  display: inline-block; padding: 8px 20px;
  background: rgba(255,255,255,0.2); border: 1px solid rgba(255,255,255,0.5);
  color: #fff; font-size: 0.9375rem; font-weight: 500; text-decoration: none;
  border-radius: 4px; transition: all 0.2s;
}
.v9-page .v9-v4board .conf-btn:hover { background: rgba(255,255,255,0.3); border-color: rgba(255,255,255,0.8); }
.v9-page .v9-v4board .conference-nav-bottom {
  display: flex; justify-content: center; align-items: center;
  margin-top: 16px; padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.3);
}
.v9-page .v9-v4board .conf-pagination { display: flex; gap: 8px; }
.v9-page .v9-v4board .conf-pagination .swiper-pagination-bullet {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.2); border-radius: 4px;
  font-size: 1rem; font-weight: 500; color: rgba(255,255,255,0.7);
  cursor: pointer; opacity: 1; transition: all 0.2s;
}
.v9-page .v9-v4board .conf-pagination .swiper-pagination-bullet:hover { background: rgba(255,255,255,0.3); }
.v9-page .v9-v4board .conf-pagination .swiper-pagination-bullet-active { background: rgba(255,255,255,0.9); color: #447DC0; }

/* board-skin-alt (상단 우측) */
.v9-page .v9-v4board .board-skin-alt {
  background: #03367D;
  position: relative; overflow: hidden;
}
.v9-page .v9-v4board .board-skin-alt::after {
  content: '';
  position: absolute; right: 20px; bottom: -20px;
  width: 160px; height: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'%3E%3C/path%3E%3Cpolyline points='14 2 14 8 20 8'%3E%3C/polyline%3E%3Cline x1='16' y1='13' x2='8' y2='13'%3E%3C/line%3E%3Cline x1='16' y1='17' x2='8' y2='17'%3E%3C/line%3E%3Cpolyline points='10 9 9 9 8 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-size: contain;
  opacity: 0.08; pointer-events: none; z-index: 0;
}
.v9-page .v9-v4board .board-skin-alt .board-box-header,
.v9-page .v9-v4board .board-skin-alt .board-box-content { position: relative; z-index: 1; }
.v9-page .v9-v4board .board-skin-alt .board-box-header { border-bottom-color: rgba(255,255,255,0.3); }
.v9-page .v9-v4board .board-skin-alt .board-box-header h3,
.v9-page .v9-v4board .board-skin-alt .board-tabs .tab-btn.active { color: #fff; }
.v9-page .v9-v4board .board-skin-alt .board-tabs .tab-btn { color: rgba(255,255,255,0.5); }
.v9-page .v9-v4board .board-skin-alt .board-tabs .tab-btn:hover { color: rgba(255,255,255,0.8); }
.v9-page .v9-v4board .board-skin-alt .board-box-header .more-link { color: rgba(255,255,255,0.7); }
.v9-page .v9-v4board .board-skin-alt .board-box-header .more-link:hover { color: #fff; }
.v9-page .v9-v4board .board-skin-alt .board-box-content li.down_noti { padding: 8px 0; border-bottom-color: rgba(255,255,255,0.15); }
.v9-page .v9-v4board .board-skin-alt .board-box-content li.down_noti:last-child { border-bottom: none; }
.v9-page .v9-v4board .board-skin-alt .board-box-content .sub_txt strong { font-size: 1rem; color: #fff; }
.v9-page .v9-v4board .board-skin-alt .board-box-content li.down_noti a:hover .sub_txt strong { color: #a0cfff; }
.v9-page .v9-v4board .board-skin-alt .board-box-content .date { color: rgba(255,255,255,0.6); }
.v9-page .v9-v4board .board-skin-alt .board-box-content .board-state { color: rgba(255,255,255,0.6); }

/* 공통 헤더/리스트 */
.v9-page .v9-v4board .board-box-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0 0 12px 0;
  border-bottom: 2px solid #1a5a7a;
  margin-bottom: 8px;
}
.v9-page .v9-v4board .board-box-header h3 { color: #333; font-size: 1.5rem; font-weight: 600; margin: 0; }
.v9-page .v9-v4board .board-box-header .more-link { font-size: 1.25rem; color: #9ca3af; text-decoration: none; line-height: 1; transition: color 0.2s; }
.v9-page .v9-v4board .board-box-header .more-link:hover { color: #1a5a7a; }
.v9-page .v9-v4board .board-box-content { padding: 0; }
.v9-page .v9-v4board .board-box-content ul { list-style: none; margin: 0; padding: 0; }
.v9-page .v9-v4board .board-box-content li { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.v9-page .v9-v4board .board-box-content li:last-child { border-bottom: none; }
.v9-page .v9-v4board .board-box-content li a { display: flex; justify-content: space-between; align-items: center; text-decoration: none; color: #333; }
.v9-page .v9-v4board .board-box-content li a:hover { color: #1a5a7a; }
.v9-page .v9-v4board .board-box-content .board-state { color: #9ca3af; text-align: center; padding: 20px 0; }

.v9-page .v9-v4board .board-box-content li.down_noti { padding: 10px 0; border-bottom: 1px solid #f3f4f6; }
.v9-page .v9-v4board .board-box-content li.down_noti:last-child { border-bottom: none; }
.v9-page .v9-v4board .board-box-content li.down_noti a { display: flex; justify-content: space-between; align-items: center; gap: 16px; text-decoration: none; color: #333; }
.v9-page .v9-v4board .board-box-content li.down_noti a:hover .sub_txt strong { color: #1a5a7a; }
.v9-page .v9-v4board .board-box-content .sub_txt { flex: 1; min-width: 0; order: 1; }
.v9-page .v9-v4board .board-box-content .sub_txt strong {
  display: block; font-size: 1rem; font-weight: 400; color: #333;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color 0.2s;
}
.v9-page .v9-v4board .board-box-content .sub_txt p { display: none; }
.v9-page .v9-v4board .board-box-content .date { flex-shrink: 0; font-size: 1rem; color: #9ca3af; order: 2; }

/* 탭 */
.v9-page .v9-v4board .board-box-header.board-tabs {
  padding: 0 0 12px 0;
  border-bottom: 2px solid #1a5a7a;
  margin-bottom: 8px;
}
.v9-page .v9-v4board .board-tabs .tab-buttons { display: flex; gap: 16px; }
.v9-page .v9-v4board .board-tabs .tab-btn {
  padding: 0; background: transparent; border: none;
  font-size: 1.5rem; font-weight: 600; color: #9ca3af;
  cursor: pointer; transition: color 0.2s;
}
.v9-page .v9-v4board .board-tabs .tab-btn:hover { color: #6b7280; }
.v9-page .v9-v4board .board-tabs .tab-btn.active { color: #333; font-weight: 600; }
.v9-page .v9-v4board .board-tabs .tab-btn h3 { margin: 0; font-size: 1.5rem; font-weight: 600; color: inherit; }
.v9-page .v9-v4board .tab-panel { display: none; }
.v9-page .v9-v4board .tab-panel.active { display: block; }

/* 2026-06-01: 활동사진 카드 (좌상, board-skin-alt 위 사진 swiper 1-up + 헤더 좌우 네비)
   2026-06-01: 우측 #5EBEED 의 동일 hue 진한 톤(#2D95C9) — 같은 청록 패밀리, 두 톤 진함 */
.v9-page .v9-v4board .v9-photo-card {
  display: flex;
  flex-direction: column;
  background: #2D95C9;
}
.v9-page .v9-v4board .v9-photo-card .board-box-header { flex-shrink: 0; }
.v9-page .v9-v4board .v9-photo-card .board-box-content {
  display: flex;
  align-items: stretch;
  min-height: 0;
  flex: 1;
  padding: 0;
}
.v9-page .v9-v4board .v9-photo-card .photosV9Swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
  border-radius: 6px;
}
.v9-page .v9-v4board .v9-photo-card .photosV9Swiper .swiper-wrapper {
  height: 100%;
  align-items: stretch;
}
.v9-page .v9-v4board .v9-photo-card .photosV9Swiper .swiper-slide {
  height: auto;
  display: flex;
}
.v9-page .v9-v4board .v9-photo-slide {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-color: rgba(255, 255, 255, 0.08);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
  overflow: hidden;
}

/* 2026-06-01: 발간물 카드 (한 번에 1개 + 좌우 이동, v4 발간물 스타일 다크 변형)
   height 체이닝: v9-pub-card(flex col) → board-box-content(flex 1) → swiper(100%)
   → wrapper(100% + align stretch) → slide(auto, stretch 로 늘어남) → item(100%) → cover(100% + 2/3) */
.v9-page .v9-v4board .v9-pub-card {
  display: flex;
  flex-direction: column;
  background: #5EBEED;
}
/* 배경 로고 SVG (원본 색 #73C7EE 그대로) */
.v9-page .v9-v4board .v9-pub-card::after {
  content: '';
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 55%;
  height: 55%;
  background-image: url('/images/v9/logosvg.svg');
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
  background-color: transparent;
  -webkit-mask-image: none;
          mask-image: none;
  opacity: 1;
  pointer-events: none;
  z-index: 0;
}
.v9-page .v9-v4board .v9-pub-card .board-box-header {
  flex-shrink: 0;
}
.v9-page .v9-v4board .v9-pub-card .board-box-content {
  display: flex;
  align-items: stretch;
  min-height: 0;
  flex: 1;
}
.v9-page .v9-v4board .v9-pub-card .publicationsV9Swiper {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.v9-page .v9-v4board .v9-pub-card .publicationsV9Swiper .swiper-wrapper {
  height: 100%;
  align-items: stretch;
}
.v9-page .v9-v4board .v9-pub-card .publicationsV9Swiper .swiper-slide {
  height: auto;
  display: flex;
}
.v9-page .v9-v4board .v9-pub-item {
  display: flex;
  gap: 22px;
  align-items: stretch;
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 200px;
}
.v9-page .v9-v4board .v9-pub-cover {
  height: 100%;
  width: auto;
  aspect-ratio: 2 / 3;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  background-color: rgba(255, 255, 255, 0.08);
  border-radius: 2px;
  display: block;
}
.v9-page .v9-v4board .v9-pub-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6px 0;
}
.v9-page .v9-v4board .v9-pub-text {
  display: flex;
  flex-direction: column;
}
.v9-page .v9-v4board .v9-pub-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 10px 0;
  line-height: 1.35;
  word-break: keep-all;
}
.v9-page .v9-v4board .v9-pub-sub {
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.72);
  margin: 0 0 14px 0;
  line-height: 1.5;
  word-break: keep-all;
}
.v9-page .v9-v4board .v9-pub-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.v9-page .v9-v4board .v9-pub-btn {
  display: inline-block;
  padding: 9px 16px;
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  text-align: center;
  border-radius: 3px;
  background: transparent;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.v9-page .v9-v4board .v9-pub-btn:hover {
  background: #fff;
  color: #03367D;
  border-color: #fff;
}

/* 헤더 우측 네비 + 더보기 묶음 */
.v9-page .v9-v4board .v9-pub-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.v9-page .v9-v4board .v9-pub-nav {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  color: #fff;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.v9-page .v9-v4board .v9-pub-nav:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.8);
}
.v9-page .v9-v4board .v9-pub-nav.swiper-button-disabled {
  opacity: 0.35;
  cursor: default;
}

/* 좁은 영역 — 텍스트 크기만 살짝 축소 (책 표지는 영역 높이에 자동 비례) */
@media (max-width: 1280px) {
  .v9-page .v9-v4board .v9-pub-title { font-size: 1.125rem; }
}

/* 더 이상 사용 안 함: 구 저널 카드 (journalBox/submitBox) ─ 클래스만 남기고 비활성 */
.v9-page .v9-v4board .v9-journal-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 18px;
  padding: 28px;
}
.v9-page .v9-v4board .v9-journal-card .v9-jb-block {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.v9-page .v9-v4board .v9-journal-card .v9-jb-title {
  margin: 0;
  font-size: 1.375rem;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.01em;
}
.v9-page .v9-v4board .v9-journal-card .v9-jb-desc {
  margin: 0;
  font-size: 0.9375rem;
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.5;
}
.v9-page .v9-v4board .v9-journal-card .v9-jb-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}
.v9-page .v9-v4board .v9-journal-card .v9-jb-btn {
  display: inline-flex;
  align-items: center;
  padding: 9px 18px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: background 0.2s, border-color 0.2s;
}
.v9-page .v9-v4board .v9-journal-card .v9-jb-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.85);
}
.v9-page .v9-v4board .v9-journal-card .v9-jb-divider {
  height: 1px;
  background: rgba(255, 255, 255, 0.22);
  margin: 4px 0;
}

/* 반응형 */
@media (max-width: 1024px) {
  .v9-page .v9-v4board .board-boxes-v4 { flex-direction: column; }
  .v9-page .v9-v4board .board-box-v4 { flex: 1 1 auto; }
  .v9-page .v9-v4board .v9-journal-card { padding: 22px; }
}

/* 2026-06-01: 활동사진 모달 (배경 블러 + 이미지 1장 크게) */
.v9-photo-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
}
.v9-photo-modal.is-open { display: flex; }
.v9-photo-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  cursor: zoom-out;
}
.v9-photo-modal__panel {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: 90vh;
  pointer-events: none;
}
.v9-photo-modal__img {
  max-width: 92vw;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 4px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);
  background: #111;
  pointer-events: auto;
}
.v9-photo-modal__close {
  position: absolute;
  top: -44px;
  right: -4px;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  font-size: 24px;
  line-height: 1;
  border-radius: 50%;
  cursor: pointer;
  pointer-events: auto;
  transition: background 0.15s;
}
.v9-photo-modal__close:hover { background: rgba(255, 255, 255, 0.32); }
body.v9-photo-modal-open { overflow: hidden; }
@media (max-width: 640px) {
  .v9-photo-modal__close { top: -40px; right: 0; }
}