/*
 * 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; }
/* 2026-06-23: 헤더는 첫 섹션(#main-slide)에만 표시되므로, 그 외 섹션은 헤더 높이 보정 제거
 *   (섹션 padding-top / content 위치 / 캘린더 row 높이의 var(--header-height) → 0) → 내용이 진짜 중앙에 */
body.main-v9.v9-home .section:not(#main-slide) { --header-height: 0px; }
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 — 헤더 영역만 흰색(92.5% 불투명) 으로 페이드 (2026-06-22: 0.7→0.925, 롤오버 배경 더 불투명) */
body.main-v9.v9-home #header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.925);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--v9-header-transition);
  z-index: 0;
}

/* .mega-dropdown 의 border 제거 + 배경 92.5% 불투명도로 통일 (2026-06-22: 0.7→0.925) */
body.main-v9.v9-home .mega-dropdown {
  border: none !important;
  background: rgba(255, 255, 255, 0.925) !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);
}

/* ── 스크롤 방향 따라 헤더 전체 표시/숨김 (2026-06-22) ──────────────
 *   메인(v9-home)에서 아래로 내려가면 헤더 전체(로고+유틸+GNB)를 위로
 *   슬라이드아웃, 위로 올라가면 다시 표시. 첫(히어로) 섹션에서는 항상 표시.
 *   토글: main-v9.js applyHeaderTheme() 가 body.v9-header-hidden 부여.
 *   데스크톱(≥1025px) 한정 — 모바일 헤더는 항상 표시.
 *   #header 는 fixed 오버레이 + #wrap{padding-top:0} 이라 본문 점프 없음.
 * ──────────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  body.main-v9.v9-home #header {
    transition: transform var(--v9-header-transition),
                opacity var(--v9-header-transition),
                border-color var(--v9-header-transition);
    will-change: transform;
  }
  /* 2026-06-30: 스크롤 시 헤더 전체 숨김(translateY(-100%)) → '로고 + 밑선'만 남김.
     - rest(오버 X): 흰 배경(::before)·GNB 메뉴·유틸 전부 숨김 → 투명 + 로고 + 밑선만
     - 헤더에 마우스 올리면: 흰 배경 + 메뉴 + 유틸 나옴 */
  body.main-v9.v9-home.v9-header-hidden #header {
    transform: none;
    opacity: 1;
    pointer-events: auto;
    /* rest: 흰 로고가 보이도록 약한 회색(어두운 반투명) 배경 */
    background: rgba(0, 0, 0, 0.3) !important;
    /* rest: 밑선(#e0e0e0) 제거 — 약한 회색 배경 위에서 너무 강함 */
    border-bottom-color: transparent;
    transition: background var(--v9-header-transition), border-color var(--v9-header-transition);
  }
  /* rest: 흰 ::before 배경은 끔 (회색은 #header 가 담당). .v9-scrolled 의 ::before opacity:1 override */
  body.main-v9.v9-home.v9-header-hidden #header::before { opacity: 0; }
  /* 호버: 회색 제거 → 흰 ::before 배경이 깔끔히 보이게 + 밑선 원복 */
  body.main-v9.v9-home.v9-header-hidden #header:hover {
    background: transparent !important;
    border-bottom-color: var(--border-light, #e0e0e0);
  }
  /* rest: 메뉴는 높이까지 접어(max-height:0) 밑선이 로고 바로 밑에 오게 */
  body.main-v9.v9-home.v9-header-hidden #header .nav {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    /* rest: 접힌 nav 의 위/아래 라인도 제거 (로고 밑 밑선 원천 차단) */
    border-top-color: transparent;
    border-bottom-color: transparent;
    transition: opacity var(--v9-header-transition), visibility var(--v9-header-transition), max-height var(--v9-header-transition);
  }
  /* rest: 유틸 숨김 (로고는 유지) */
  body.main-v9.v9-home.v9-header-hidden #header .head .header-util {
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--v9-header-transition), visibility var(--v9-header-transition);
  }
  /* 호버: 흰 배경 진하게 + 메뉴 펼침 + 유틸 */
  body.main-v9.v9-home.v9-header-hidden #header:hover::before { opacity: 1; }
  body.main-v9.v9-home.v9-header-hidden #header:hover .nav {
    opacity: 1;
    visibility: visible;
    max-height: none;       /* 펼침 시 높이 제한 해제 */
    overflow: visible;      /* 메가 드롭다운(absolute)이 클립되지 않게 */
    /* 호버: nav 위/아래 라인 원복 */
    border-top-color: var(--border-light, #e0e0e0);
    border-bottom-color: var(--border-light, #e0e0e0);
  }
  body.main-v9.v9-home.v9-header-hidden #header:hover .head .header-util {
    opacity: 1;
    visibility: visible;
  }
}

/* ─────────────────────────────────────────────────
 * 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;
}

/* 2026-07-01: 히어로 '시작하기' 버튼 hover 색을 갈색으로 통일(섹션3 버튼과 동일 #8A735C).
 *   .main-visual 내 --accent-navy 사용처는 btn-area hover 2곳뿐 → 스코프 override 로 그 버튼만 교체. */
.v9-page .main-visual { --accent-navy: #8A735C; }

.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;
}
/* 인라인 SVG 아이콘 색/두께 CSS 변수 제어.
   2026-07-01: lucide(선형) 전용에서 → 업로드 Material(면형)도 지원.
   SVG 는 서버(readSvgIconTinted)에서 fill/stroke 를 currentColor 로 정규화 →
   여기서 color 만 지정하면 선·면 아이콘 모두 착색됨. (fill:none 강제 제거) */
.v9-page .quick-menu .tile .a .image .v9-side-icon--svg svg {
  width: 28px;
  height: 28px;
  color: var(--v9-side-icon-color, #fff);
  stroke-width: var(--v9-side-icon-stroke, 2);
  transition: color 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 {
  color: #fff;
}

/* 사이드 퀵메뉴 — 맨 위(첫 섹션)에서만 표시, 스크롤 내리면(v9-scrolled) 숨김 (2026-06-22)
 *   .quick-menu 의 transform: translateY(-50%) 보존 위해 opacity/visibility 로만 토글. */
body.main-v9.v9-home .quick-menu {
  transition: opacity var(--v9-header-transition),
              visibility var(--v9-header-transition);
}
/* 2026-07-01: 임시 — 스크롤 내려도 퀵메뉴 계속 표시(숨김 해제). 사라지는 너비(아래 max-width) 재테스트 후 재설정 예정 */
body.main-v9.v9-home.v9-scrolled .quick-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

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

/* ─────────────────────────────────────────────────
 * 맨 위로(back-to-top) — 마지막 섹션 도달 시 표시 (2026-07-01)
 *   원형 버튼 + 위 화살표. main-v9.js 가 .is-visible 토글 + 클릭 처리.
 * ───────────────────────────────────────────────── */
.v9-page .v9-to-top {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 20;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  /* 평상시 숨김 — 클릭/상호작용 차단. .is-visible 에서만 노출 */
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background-color 0.2s ease;
}
.v9-page .v9-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  pointer-events: auto;
}
.v9-page .v9-to-top:hover { background: #8A735C; }
.v9-page .v9-to-top svg { display: block; }
/* 2026-07-01: 모바일 — 더 작게 + 코너에 바짝(우16/하16) → 본문·푸터 글자와 겹침 최소화 */
@media (max-width: 767px) {
  .v9-page .v9-to-top { width: 44px; height: 44px; right: 16px; bottom: 16px; }
  .v9-page .v9-to-top svg { width: 20px; height: 20px; }
}

/* ─────────────────────────────────────────────────
 * 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;
  border-radius: 999px; /* 2026-06-30: 둥근(pill) 버튼 — 원형 아이콘 테마와 통일 */
  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: center;   /* 2026-06-24: 캘린더를 섹션 세로 가운데 정렬 (stretch → center) */
  padding-top: 24px;
  padding-bottom: 24px;
}
.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; opacity: 0.85; } /* 2026-06-30: 타이틀 알파 0.85 */
.v9-page .v9-calendar-section .v9-calendar-pc { flex: 0 0 auto; min-height: 0; } /* 2026-06-24: 자기 높이(그리드 clamp) → 섹션 가운데 정렬 가능 */
.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주 등분 */
  /* 2026-06-24: row 높이 = clamp(최소, 화면비례, 최대). 화면 높이에 따라 비율로 줄되 64~108px 범위 유지 */
  --v9cal-row-h: clamp(64px, (100vh - var(--header-height, 158px) - 320px) / 6, 108px);
}

/* 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: transparent; /* 2026-06-23: 그리드 배경 비치게 (색 누적 방지) */
  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 {
  --border-light: var(--cal-line-color, #e0e0e0); /* 2026-06-23: 캘린더 격자 라인 색/알파 어드민 연동 (그리드 하위 모든 border 일괄) */
  background: var(--cal-box-bg, rgba(255, 255, 255, 0.96)); /* 2026-06-23: 어드민 캘린더 창 배경색 (미설정 시 흰 0.96) */
  border-radius: 12px;
  padding: 8px; /* 2026-06-23: 격자 전체를 박스 가장자리에서 8px 안쪽으로 (가로·세로선 여백) */
  overflow: hidden;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  /* 2026-06-24: 그리드 높이 = clamp(최소 520, 화면비례, 최대 760). 비율로 줄되 범위 유지 → 섹션 가운데 정렬 */
  height: clamp(520px, calc(100vh - var(--header-height, 158px) - 200px), 760px);
}
.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: transparent; flex: 0 0 auto; } /* 2026-06-23: 그리드 배경 비치게 (색 누적 방지) */
/* 주 행 — 동적 높이 (vh 기반) */
.v9-page .v9-cal-row:not(.v9-cal-monthbar):not(.v9-cal-head) {
  flex: 1 1 auto;
  min-height: 48px; /* 2026-06-24: 셀 최소 높이만. 실제 높이는 그리드 height(clamp) 안에서 6주 등분 */
}
/* 2026-06-24: 달력 맨 밑(마지막 주 아래) 가로선 — row 는 border-top 방식이라 마지막 줄 하단 선 별도 추가 */
.v9-page .v9-cal-row:not(.v9-cal-monthbar):not(.v9-cal-head):last-child {
  border-bottom: 1px solid var(--border-light, #eee);
}
.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: #3b82f6; } /* 2026-06-30: 토요일 잘 안 보여서 진한 블루로 */

/* 2026-06-30: 캘린더 헤더 재구성 (사용자 요청)
   - 월 네비(‹연도› 오늘): 배경 없음(투명 버튼)
   - 요일 행: 라운드 테두리 박스로 분리 → 하단 날짜 달력과 구분 */
.v9-page .v9-cal-monthbar { border-bottom: none; } /* 2026-06-30: 연도 밑 밑줄 제거 */
.v9-page .v9-cal-monthbar .v9-cal-btn {
  background: transparent;
  border-color: #b0b0b0;  /* 2026-06-30: 오늘 버튼도 좌우 버튼과 같은 톤 */
  border-radius: 8px;
  color: #333;
}
.v9-page .v9-cal-monthbar .v9-cal-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  border-color: #888;
}
/* 좌우 이동 버튼 — SVG 셰브론, 잘 보이게 (네모 아이콘 버튼 + 진한 보더/아이콘) */
.v9-page .v9-cal-monthbar .v9-cal-nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid #b0b0b0;
  border-radius: 8px;
  color: #333;
}
.v9-page .v9-cal-monthbar .v9-cal-nav svg { display: block; }
.v9-page .v9-cal-monthbar .v9-cal-nav:hover { background: rgba(0, 0, 0, 0.06); border-color: #888; }
/* 오늘 버튼 — 좌우 버튼과 높이(32px) 맞춤 (텍스트라 너비는 auto) */
.v9-page .v9-cal-monthbar .v9-cal-today {
  height: 32px;
  padding: 0 12px;
  font-size: 0.8rem;
  display: inline-flex;
  align-items: center;
}
/* 요일 행 = 라운드 테두리 박스 (날짜 그리드와 분리) */
.v9-page .v9-cal-head {
  background: rgba(0, 0, 0, 0.08); /* 2026-06-30: 헤더 띠 — 어두운 알파(반투명, 셀보다 살짝 어둡게 구분) */
  border: none;          /* 테두리 라인은 없게 */
  border-radius: 8px;    /* 라운드 유지 (배경 fill 라운드) */
  margin-bottom: 10px;   /* 하단 달력과 간격 */
  overflow: hidden;
}
.v9-page .v9-cal-head .v9-cal-cell-head { border-right: none; } /* 내부 칸막이 제거 → 깔끔한 띠 */
.v9-page .v9-cal-cell-head { color: #4b4b4b; }

.v9-page .v9-cal-cell {
  position: relative;
  padding: var(--v9cal-cell-pad);
  border-right: 1px solid var(--border-light, #eee);
  background: transparent; /* 2026-06-23: 그리드 배경(--cal-box-bg)이 비치게 — 색 2겹 누적 방지 */
  overflow: hidden;
}
.v9-page .v9-cal-cell:last-child { border-right: none; }
/* 2026-06-30: 날짜 없는(다른 달) 칸 알파로 움푹. is-past 와 겹쳐도(1일 이전 셀) 알파 유지되게 결합 선택자 */
.v9-page .v9-cal-cell.is-other,
.v9-page .v9-cal-cell.is-other.is-past { background: rgba(0, 0, 0, 0.06); }
.v9-page .v9-cal-cell.is-past  { background: transparent; } /* 2026-06-23: 그리드 배경 비치게 (색 누적 방지) */
/* 오늘 — 파스텔 옐로 */
.v9-page .v9-cal-cell.is-today { background: transparent; } /* 2026-06-23: 그리드 배경 비치게 (오늘 강조는 날짜 동그라미로) */
.v9-page .v9-cal-cell.is-today .v9-cal-day {
  color: #92400e;
  background: #fde68a;
  border-radius: 99px;
  width: 30px;  /* 2026-06-30: 오늘 원 조금 더 크게 (24→30) */
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
}
.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: rgba(143, 131, 98, 0.7); font-weight: 400; } /* 2026-06-30: 다른 달 날짜 — 중간 베이지 + 얇게 + 반투명 */
.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: #3b82f6; } /* 2026-06-30: 토요일 진한 블루 */

/* 이벤트 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; }
/* 2026-06-30: 일정칩 — 진한 베이지톤 + 라운드 + 진한 글자 (대비 강화) */
.v9-page .v9-cal-event,
.v9-page .v9-cal-event[data-type] {
  background: #e7dabd;
  border: 1px solid #d2c094;
  border-radius: 8px;
  color: #463a24 !important;
  font-weight: 600;
}
.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;
}
/* 2026-06-24: 모바일 일정 리스트 여백 정리 — 외부 좌우 여백 + 내부 padding/gap 축소 + 날짜폭(110→auto) 축소 → 제목 공간 확보 */
@media (max-width: 767px) {
  .v9-page .v9-calendar-section > .c { padding-left: 12px; padding-right: 12px; } /* 좌우 40→12: 외부 여백 과다 제거 */
  .v9-page .v9-events-list { margin: 0; }
  /* 2026-06-24: 세로 스택 — 날짜 위(작게) + 제목 아래 전체폭. 가로 분할 비효율 해소 + 640 경계/이중패딩 제거 */
  .v9-page .v9-event-item-link { flex-direction: column; align-items: flex-start; gap: 4px; padding: 14px 16px; }
  .v9-page .v9-event-date { flex: none; font-size: 0.85rem; }
  .v9-page .v9-event-body { width: 100%; }
  .v9-page .v9-event-title { white-space: normal; }
}
.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);
}

/* 2026-06-24: 기존 @media 640 의 .v9-event-item 세로전환+padding 제거 — 767 세로스택으로 통합(640 경계/이중패딩 제거) */

/* ─────────────────────────────────────────────────
 * 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;
  justify-content: center; /* 2026-06-24: 학술지 박스만 남기고 섹션 세로 가운데 */
}
.v9-page .fp-company::after {
  content: ""; position: absolute; inset: 0; background: transparent; z-index: 0; /* 2026-07-01: 섹션 전체 어둠 제거 — 버튼 밴드(.img-btn2)만 어둡게. 위아래 배경 그대로 노출 */
  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;
}
/* 2026-06-24: company 섹션 — 헤더(Since/Count/소개/ABOUT) 숨김, 학술지 박스(img-btn2)만 중앙 표시. 데이터/어드민은 보존 */
.v9-page .fp-company > .c { display: none; }
.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;
  align-items: center; /* 2026-07-01: 밴드가 커져도 박스는 세로 가운데 */
  min-height: 34vh; /* 2026-07-01: 어두운 밴드 높이 = 화면 1/3 */
  background: rgba(0,0,0,0.75); /* 2026-07-01: 버튼이 나오는 가로 밴드만 어둡게 (섹션 전체 오버레이 제거함). 위아래는 배경 그대로 */
  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; }
/* 2026-06-24: 버튼 + swiper 를 flex 로 나란히 (영역 분리). padding-left:160px(layout 라벨 공간) 제거 */
.v9-page #rel .area { position: relative; padding-left: 0; display: flex; align-items: center; gap: 12px; }
/* 2026-06-24: 버튼을 flow 안 flex item 으로 (absolute 해제) → swiper 와 영역 분리, 슬라이드가 버튼 밑 통과 안 함. layout.css absolute override */
.v9-page #rel .area .cont {
  position: static; transform: none; flex: 0 0 auto;
  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 { flex: 1 1 auto; min-width: 0; } /* 2026-06-24: 버튼 옆 나머지 영역만 차지(별도 영역). min-width:0 으로 flex 안 overflow 정상 */
.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;
}
/* 2026-06-24: 모바일 — 과한 좌우/우측 패딩 축소 + 네비 버튼 숨김(터치 스와이프) → 슬라이드 영역 확보 */
@media (max-width: 768px) {
  .v9-page #rel .inner { padding: 0 16px; }
  .v9-page #rel .area { gap: 0; }
  .v9-page #rel .area .cont { display: none; } /* 버튼 숨김 → swiper(flex:1)가 전체 너비 */
}

/* ─────────────────────────────────────────────────
 * 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 스코프에 한정해 이식
 * ───────────────────────────────────────────────── */
/* 2026-07-01: 섹션3 버튼 컬러(더보기 원버튼 · 발간물 좌우화살표 등 accent-navy 사용처) 갈색으로 교체.
 *   전역 --accent-navy(#1e3e83)는 유지하고 v4board 스코프에서만 override → 히어로/일정 등 타 섹션 무영향. */
.v9-page .v9-v4board { --accent-navy: #8A735C; }
.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; /* 공통 폴백 — 실제 색은 .v9-photo-card / .v9-pub-card 가 override */
  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; }
/* 2026-06-30: 더보기 = 채워진 원 + 화살표 아이콘 (기존 흐린 "→" 텍스트 대체)
   - 텍스트 "→" 는 font-size:0 으로 숨기고 ::before 에 SVG(mask) 화살표 렌더
   - 전 스킨 공통 구조 + 스킨별 색 분기 */
.v9-page .v9-v4board .board-box-header .more-link,
.v9-page .v9-v4board .conference-box .board-box-header .more-link,
.v9-page .v9-v4board .board-skin-alt .board-box-header .more-link {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  width: 30px; height: 30px; padding: 0;
  border-radius: 50%;
  font-size: 0; line-height: 0; text-decoration: none;
  transition: background 0.2s, color 0.2s;
}
.v9-page .v9-v4board .board-box-header .more-link::before,
.v9-page .v9-v4board .conference-box .board-box-header .more-link::before,
.v9-page .v9-v4board .board-skin-alt .board-box-header .more-link::before {
  content: ""; width: 15px; height: 15px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'/%3E%3Cpolyline points='12 5 19 12 12 19'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* 기본(밝은) 스킨: 네이비 원 + 흰 화살표 */
.v9-page .v9-v4board .board-box-header .more-link { background: var(--accent-navy, #1e3e83); color: #fff; }
.v9-page .v9-v4board .board-box-header .more-link:hover { background: #fff; color: var(--accent-navy, #1e3e83); box-shadow: inset 0 0 0 2px var(--accent-navy, #1e3e83); }
/* 2026-07-01: conference/alt 스킨도 기본과 동일(네이비 원 + 흰 화살표)로 통일.
   (board-skin-alt 카드 배경이 밝은 경우가 많아 흰 원은 안 보임 — 발간물 #f4ebe3 사례)
   기존 5-class 규칙(1949/2010)의 회색 텍스트 화살표를 덮기 위해 이 selector 유지. */
.v9-page .v9-v4board .conference-box .board-box-header .more-link,
.v9-page .v9-v4board .board-skin-alt .board-box-header .more-link { background: var(--accent-navy, #1e3e83); color: #fff; }
.v9-page .v9-v4board .conference-box .board-box-header .more-link:hover,
.v9-page .v9-v4board .board-skin-alt .board-box-header .more-link:hover { background: #fff; color: var(--accent-navy, #1e3e83); box-shadow: inset 0 0 0 2px var(--accent-navy, #1e3e83); }
.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: var(--v9-card-bg, #2D95C9); /* 2026-06-22: 어드민 카드 배경색 (미설정 시 #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;
  position: relative; /* 2026-06-22: 좌우 네비 버튼(absolute) 기준 */
}
.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: var(--v9-card-bg, #5EBEED); /* 2026-06-22: 어드민 카드 배경색 (미설정 시 #5EBEED) */
}
/* 배경 로고 SVG (원본 색 #73C7EE 그대로) */
/* 2026-06-23: 발간물 배경 SVG — 어드민 관리. 없으면 미표시 / 색 지정 시 단색(mask) / 비우면 원본 */
.v9-page .v9-v4board .v9-pub-card::after { display: none; }
.v9-page .v9-v4board .v9-pub-card.has-pub-svg::after {
  content: '';
  display: block;
  position: absolute;
  right: 16px;
  bottom: 16px;
  width: 55%;
  height: 55%;
  opacity: var(--pub-svg-opacity, 1);
  pointer-events: none;
  z-index: 0;
  background-image: var(--pub-svg-url);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: right bottom;
}
/* 색 지정 시: SVG 를 마스크로 단색 칠 (다색 로고는 단색 실루엣이 됨) */
.v9-page .v9-v4board .v9-pub-card.has-pub-svg.pub-svg-tinted::after {
  background-image: none;
  background-color: var(--pub-svg-color, #ffffff);
  -webkit-mask-image: var(--pub-svg-url);
          mask-image: var(--pub-svg-url);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: right bottom;
          mask-position: right bottom;
}
.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;
  position: relative; /* 2026-06-22: 좌우 네비 버튼(absolute) 기준 */
}
.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);                              /* fallback */
  border-color: color-mix(in srgb, var(--v9-card-fg, #fff) 55%, transparent);
  color: var(--v9-card-fg, #fff);   /* 2026-06-22: 버튼 라인/글자 = 카드 글자색 */
  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;                 /* fallback */
  background: var(--v9-card-fg, #fff);
  color: var(--v9-card-bg, #5EBEED);  /* 2026-06-22: hover 반전 — 글자색 배경 + 카드 배경색 글자 */
  border-color: var(--v9-card-fg, #fff);
}

/* 2026-06-22: 카드 글자색 어드민 설정 (제목 + 발간물 슬라이드 텍스트). 미설정 시 #fff
 *   board-skin-alt 의 #fff 보다 구체적인 셀렉터로 override. 부제는 opacity 0.72 위계 유지. */
.v9-page .v9-v4board .v9-photo-card .board-box-header h3 { color: var(--v9-card-fg, #fff); }
.v9-page .v9-v4board .v9-pub-card .board-box-header h3,
.v9-page .v9-v4board .v9-pub-card .v9-pub-title { color: var(--v9-card-fg, #fff); }
.v9-page .v9-v4board .v9-pub-card .v9-pub-sub { color: var(--v9-card-fg, #fff); opacity: 0.72; }
/* 2026-06-23: 제목 밑 구분선 = 하단 게시판 라인과 동일 (board-box-header 의 2px solid #1a5a7a) */
.v9-page .v9-v4board .v9-photo-card .board-box-header,
.v9-page .v9-v4board .v9-pub-card .board-box-header {
  border-bottom-color: #1a5a7a;
}

/* 헤더 우측 네비 + 더보기 묶음 */
.v9-page .v9-v4board .v9-pub-header-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.v9-page .v9-v4board .v9-pub-nav {
  position: absolute;            /* 2026-06-22: 헤더 → 슬라이드 좌우 세로중앙 이동 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--accent-navy, #1e3e83);  /* 2026-07-01: 게시판 더보기 버튼과 통일 — 진한 네이비 원 */
  border: none;
  font-size: 1.125rem;
  line-height: 1;
  border-radius: 8px;                       /* 2026-07-01: 링크 아님 → 라운드 사각형 (게시판 더보기는 원형) */
  cursor: pointer;
  opacity: 0;                               /* 2026-06-23: 평소 숨김 — 카드 hover 시 표시 (모바일은 hover 없어 항상 숨김) */
  transition: opacity 0.2s, background 0.15s, box-shadow 0.15s, color 0.15s;
  box-shadow: none;
}
/* 2026-07-01: 화살표 = 흰색 (진한 네이비 원 위) — 게시판 더보기 버튼과 동일 */
.v9-page .v9-v4board .v9-photo-card .v9-pub-nav,
.v9-page .v9-v4board .v9-pub-card .v9-pub-nav { color: #fff; }
.v9-page .v9-v4board .v9-photo-prev,
.v9-page .v9-v4board .v9-pub-prev { left: 8px; }
.v9-page .v9-v4board .v9-photo-next,
.v9-page .v9-v4board .v9-pub-next { right: 8px; }
/* 2026-07-01: 호버 색 반전 — 흰 원 + 네이비 화살표 + 네이비 링 (게시판 더보기와 동일) */
.v9-page .v9-v4board .v9-pub-nav:hover { background: #fff; color: var(--accent-navy, #1e3e83); box-shadow: inset 0 0 0 2px var(--accent-navy, #1e3e83); }
/* 2026-06-23: 카드 오버(또는 키보드 focus) 시에만 좌우 버튼 표시. 모바일(hover 없음)은 항상 숨김 */
.v9-page .v9-v4board .v9-photo-card:hover .v9-pub-nav,
.v9-page .v9-v4board .v9-photo-card:has(:focus-visible) .v9-pub-nav,
.v9-page .v9-v4board .v9-pub-card:hover .v9-pub-nav,
.v9-page .v9-v4board .v9-pub-card:has(:focus-visible) .v9-pub-nav { opacity: 1; }
.v9-page .v9-v4board .v9-pub-nav.swiper-button-disabled { cursor: default; }
.v9-page .v9-v4board .v9-photo-card:hover .v9-pub-nav.swiper-button-disabled,
.v9-page .v9-v4board .v9-photo-card:has(:focus-visible) .v9-pub-nav.swiper-button-disabled,
.v9-page .v9-v4board .v9-pub-card:hover .v9-pub-nav.swiper-button-disabled,
.v9-page .v9-v4board .v9-pub-card:has(:focus-visible) .v9-pub-nav.swiper-button-disabled { opacity: 0.35; }

/* 좁은 영역 — 텍스트 크기만 살짝 축소 (책 표지는 영역 높이에 자동 비례) */
@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; }
}