/**
 * 메인페이지 버전8 전용 스타일
 * 2026-04-29: v1(index.ejs) 기반으로 복제 — 초기에는 v1 기본 스타일을 그대로 상속
 *
 * 사용 방법
 *  - body.main-v8 셀렉터를 prefix로 사용하여 v8 전용 스타일을 분리
 *  - head-seo.ejs가 mainVersion='v8'일 때 자동 로드
 *  - /v8 직접 접속 시 app.js 라우트에서 res.locals.mainVersion='v8' 강제
 */

/* v8 전용 스타일은 이 아래에 작성 */

/* 2026-08-24 칸반147: 헤더 높이 확정 — head 80px(:1004 .head .inner) + nav 50px(:1035 .nav) = 130px.
   design-system.css 의 기본값은 158px 이라, 첫 페인트는 158px 로 그려진 뒤 site.js 가 실측 130px 로
   덮어써 본문이 28px 위로 튀었다. CSS 에서 먼저 확정해 첫 페인트부터 맞춘다.
   (site.js 재계산 분기에서도 v8 을 제외한다 — v7·v9 와 같은 패턴)
   모바일(≤1024)은 layout.css 가 #wrap 패딩을 고정값으로 주므로 이 변수와 무관. */
body.main-v8 { --header-height: 130px; }

/* 2026-05-12: 페이지 배경 #f5f5f5, 푸터 흰색 */
body.main-v8 {
    background: #f5f5f5;
}
body.main-v8 #footer {
    background: #ffffff;
    /* 2026-05-12: spec — 로고와 배너 60 / 카피라이트와 하단 60 */
    padding-top: 60px;
    padding-bottom: 60px;
}
/* 2026-05-12: 푸터/롤링배너 콘텐츠 너비 1720px (base 1400 → 오버라이드) */
body.main-v8 #footer .inner,
body.main-v8 #rel .inner {
    max-width: 1720px;
}

/* 2026-05-12: 푸터 로고 — main-config.json footer.logo.src 설정 시 표시
   로고-푸터내용 간격 30 */
body.main-v8 #footer .foot_logo {
    margin-bottom: 30px;
}
/* 푸터 내용(infoHtml)과 카피라이트 사이 20 */
body.main-v8 #footer .copy .copyright {
    margin-top: 20px;
}
body.main-v8 #footer .foot_logo img {
    max-height: 48px;
    width: auto;
    display: block;
}

/* 2026-05-12: 푸터 정책 링크 — 우측 하단으로 이동 (이용약관/개인정보취급방침/협회소개/찾아오시는길) */
body.main-v8 #footer .inner {
    position: relative;
}
body.main-v8 #footer .foot_sub_link {
    position: absolute;
    bottom: 0;
    right: 0;
    margin: 0;
    padding: 0;
    border-bottom: none;
}
/* 2026-05-12: 태블릿 이하 — 정책 링크는 푸터 최하단(카피라이트 아래)에 배치 */
@media (max-width: 1024px) {
    body.main-v8 #footer .inner {
        display: flex;
        flex-direction: column;
    }
    body.main-v8 #footer .foot_logo { order: 1; }
    body.main-v8 #footer .copy { order: 2; }
    body.main-v8 #footer .foot_sub_link {
        order: 3;
        position: static;
        margin-top: 24px;
    }
    body.main-v8 #footer .foot_sub_link ul {
        justify-content: flex-start;
    }
}

/* 2026-05-12: 롤링배너 영역 — 깔끔한 둥근 prev/next 버튼, play 버튼 숨김 */
body.main-v8 #rel {
    background: #ffffff;
}
/* 2026-07-31 칸반067: 배너 슬라이드 폭 고정.
   공용 swiper-custom.css 의 `#rel .swiper-slide { width: auto !important }` 가 Swiper 인라인 width 를
   무력화해 트랙 계산이 어긋나던 문제 → slidesPerView:'auto' + 아래 고정 폭 조합으로 해결.
   (index-v8.ejs 의 relSlotWidth 값과 반드시 일치해야 함) */
body.main-v8 #rel .relatedSwiper .swiper-slide {
    width: 220px !important;
}
@media (max-width: 1023px) {
    body.main-v8 #rel .relatedSwiper .swiper-slide {
        width: 180px !important;
    }
}
/* 모바일은 배너 영역 자체가 좁으므로(제목·컨트롤과 한 줄) 폭 고정 없이 로고 원본 비율 유지 */
@media (max-width: 767px) {
    body.main-v8 #rel .relatedSwiper .swiper-slide {
        width: auto !important;
    }
}
/* 배너가 한 화면에 다 들어오면 Swiper 미초기화(rel-static) — 중앙 정렬 고정 배치 */
body.main-v8 #rel .relatedSwiper.rel-static .swiper-wrapper {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    transform: none !important;
}
body.main-v8 #rel .relatedSwiper.rel-static .swiper-slide {
    flex: 0 0 auto;
    margin-right: 0 !important;
}
/* 2026-05-12: 배너 카드 통일 — 박스 보더 투명, 카드 살짝 더 작게 */
body.main-v8 #rel .relatedSwiper .swiper-slide {
    border: 1px solid transparent;
    border-radius: 8px;
    height: 52px;
    box-sizing: border-box;
    background: #fff;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.main-v8 #rel .relatedSwiper .swiper-slide a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 8px 20px;
    box-sizing: border-box;
}
body.main-v8 #rel .relatedSwiper .swiper-slide img {
    /* 카드 내부에 여백을 충분히 두고 이미지 비율 유지 표시 */
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
}
body.main-v8 #rel .area {
    height: 84px;
    padding-left: 0;
    gap: 20px;
}
/* "함께하는 기관" 타이틀 — absolute 해제, 인라인 */
body.main-v8 #rel .area h3 {
    position: static;
    font-size: 18px !important;
    font-weight: 600;
    color: #2c313e;
    white-space: nowrap;
    flex-shrink: 0;
}
/* 컨트롤 버튼 그룹 — absolute 해제, 인라인 */
body.main-v8 #rel .area .cont {
    position: static;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
/* play(일시정지) 버튼은 숨김 */
body.main-v8 #rel .area .cont .play {
    display: none;
}
/* prev/next 버튼 — 36px 원형, 흰색 */
body.main-v8 #rel .area .cont button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    color: #4b5563;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
body.main-v8 #rel .area .cont button:hover {
    background: #f9fafb;
    color: #1f2937;
    border-color: #d1d5db;
}
body.main-v8 #rel .area .cont button .material-symbols-outlined {
    font-size: 22px;
}

/* 2026-04-29: 상단 그라데이션 배경 레이어 — 페이지 최상단 0~620px에 풀블리드로 깔리고
   그 위에 GNB(#header), 히어로(.title_zone), 비주얼/카드 영역(.vis_zone)이 올라간다.
   #wrap은 이미 layout.css에서 position: relative로 선언되어 있으므로 ::before가 #wrap 좌표계 기준 절대배치. */
/* 2026-08-01 칸반068: 디자이너 시안 — 배경은 콘텐츠 하단까지 덮는 게 아니라
   게시판 카드 중간에서 끝나고 카드가 그 경계를 넘어 걸치는 디자인.
   시안엔 검색창이 없어 배경 높이를 그대로 쓸 수 없으므로 "카드 대비 비율"을 이식:
     PC = 두 번째 게시판 카드 상단 + 21%  → 603
     태블릿/모바일 = 첫 게시판 카드 상단 + 67% → 988 / 847 */
body.main-v8 #wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 603px;
    background-color: transparent;
    background-image: url('/images/main-v8/bg-big.svg');
    background-repeat: no-repeat;
    background-position: top center;
    background-size: cover;
    z-index: 0;
    pointer-events: none;
}

/* 콘텐츠를 그라데이션 레이어 위로 올림 — .contents는 static이라 position 부여 필요 */
body.main-v8 .contents {
    position: relative;
    z-index: 1;
}

/* 2026-05-13: 서브 페이지에서는 그라데이션 배경 숨김 + 헤더 흰색 고정 + 로고 자연색
   2026-08-13 칸반114: 판정 기준을 "서브페이지 목록"에서 "메인이 아님"으로 뒤집었다.
   .contents.subpage 로 서브를 열거하면 그 클래스를 안 쓰는 페이지(약관·결제결과 등)가 빠져
   메인 배경이 본문을 덮었다. .v8-info-row 는 index-v8.ejs 에만 있는 메인 고유 요소라,
   그것이 없으면 서브로 본다 → 새 페이지가 생겨도 자동으로 걸린다.
   메인은 투명 헤더 + 그라데이션이지만 서브는 일반 흰색 헤더로 전환 */
body.main-v8:not(:has(.v8-info-row)) {
    background: #ffffff;   /* body 배경 — 메인은 #f5f5f5(회색)이지만 서브는 흰색 */
}
body.main-v8:not(:has(.v8-info-row)) #wrap::before {
    display: none;
}
body.main-v8:not(:has(.v8-info-row)) #header {
    background: #ffffff !important;
}
body.main-v8:not(:has(.v8-info-row)) #header .head .logo img {
    filter: none;
}
body.main-v8:not(:has(.v8-info-row)) #header .nav .gnb > li > a {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    color: var(--gnb-text, #2c313e) !important;
}
/* 2026-08-24 칸반145: 서브(흰 헤더)에서 선택된 1차 메뉴가 흰 글자로 사라지던 문제.
   아래 1070줄대 `body.main-v8 ... li.active > a{color:#fff}` 는 메인(투명 헤더+파란 그라데이션)용인데
   위 `li > a` 규칙과 특이도가 같아(0,1,4,3) 뒤에 오는 흰색이 이겼다.
   여기는 `.active` 한 개를 더 가져 특이도가 높으므로 순서와 무관하게 서브에서만 이긴다.
   색은 navOn(흰 헤더) 상태와 동일한 #1F7AB8, 학회가 GNB 선택색/강조색을 지정하면 그 값을 따른다. */
body.main-v8:not(:has(.v8-info-row)) #header .nav .gnb > li.active > a {
    color: var(--gnb-text-active, var(--site-accent, #1F7AB8)) !important;
}
/* 2026-07-03: 서브페이지=흰헤더 → 구분선(상단+밑선) #E5E5E5 (메인 히어로용 #7EB1CB 가리게) */
body.main-v8:not(:has(.v8-info-row)) #header .nav { border-top-color: #E5E5E5; }
body.main-v8:not(:has(.v8-info-row)) #header .nav::after { background: #E5E5E5; }

/* 헤더는 layout.css에서 이미 position:absolute(PC) / fixed(모바일) + z-index:200 이라
   추가 위치 변경 없이 그라데이션(::before z-index:0) 위에 자동 배치됨.
   배경만 투명 처리하여 그라데이션이 GNB 뒤로 보이도록 — v8 한정. */
body.main-v8 #header {
    background: transparent !important;
    box-shadow: none !important;
    /* 2026-07-03: layout.css #header{transition:0.3s} 제거 — hover 시 헤더 배경 transparent→white 페이드 중
       히어로가 비쳐 중간색이 나오고 구분선이 깜빡이던 문제. v8은 즉시 전환. */
    transition: none !important;
}

/* 2026-04-29: v8 비주얼 영역 — swiper 820×620 고정, 우측 카드 영역 20px gap.
   .vis_zone(=.flex_zone50)은 기본 gap:48px / align-items:center인데, v8에서는 gap:20 + stretch로 덮어씀.
   #visual은 .grid_vus 클래스를 가지지만, id 셀렉터(0,1,0)가 .grid_vus(0,1,0)와 동일 특이도라
   :not(#visual)로 우측 카드 영역만 명확히 분리. */
body.main-v8 .vis_zone {
    gap: 20px !important;
    align-items: stretch;
    margin-top: 60px;   /* 2026-04-29: 히어로 영역 상단과 60px 여백 — swiper와 우측 카드 모두 적용 */
}
body.main-v8 .vis_zone > #visual {
    flex: 0 0 820px;
    width: 820px;
    height: 620px;
    position: relative;
    z-index: 1;        /* 2026-04-29: swiper는 z:1, 우측 카드(z:2)보다 아래 */
}
body.main-v8 .vis_zone > #visual .area,
body.main-v8 .vis_zone > #visual .swiper,
body.main-v8 .vis_zone > #visual .swiper-wrapper,
body.main-v8 .vis_zone > #visual .swiper-slide {
    height: 100% !important;   /* swiper-custom.css의 #visual .swiper{height:325px} 덮어쓰기 안전망 */
}
/* swiper-custom.css의 #visual .area{padding-bottom:19px}가 컨테이너 높이를 부풀려 이미지 영역을 깎으므로 v8에선 패딩 제거 + border-box */
body.main-v8 .vis_zone > #visual .area {
    padding: 0;
    box-sizing: border-box;
}
/* v8: 스와이퍼 하단 컨트롤(play/prev/next/counter) 숨김 — 높이 정합성 위해 제거 */
body.main-v8 .vis_zone > #visual .cont {
    display: none;
}
body.main-v8 .vis_zone > #visual .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
body.main-v8 .vis_zone > .grid_vus:not(#visual) {
    flex: 1 1 auto;
    min-width: 0;
}

/* 1280px 이하 — 820 + 20 + 우측 영역이 안 들어가는 좁은 데스크탑은 swiper를 비율 유지로 축소 */
@media (max-width: 1280px) and (min-width: 1025px) {
    body.main-v8 .vis_zone > #visual {
        flex: 0 0 60%;
        width: 60%;
        height: auto;
        aspect-ratio: 820 / 620;
    }
}
/* 1024px 이하 — flex_zone50의 column 모드(layout.css:775)가 활성화되어 자동 stack.
   2026-05-14: 디자이너 시안 — 히어로 영역 904×560 고정 (max-width로 캡 + 비율 유지) */
@media (max-width: 1024px) {
    body.main-v8 .vis_zone > #visual {
        flex: 1 1 100%;
        width: 100%;
        max-width: 904px;
        height: auto;
        aspect-ratio: 904 / 560;
        margin-left: auto;
        margin-right: auto;
    }
    body.main-v8 .vis_zone > .grid_vus:not(#visual) {
        flex: 1 1 100%;
    }
}

/* 2026-04-29: v8 페이지 전체 — AOS(스크롤 모션) 비활성화. 위치 이동 없이 즉시 표시.
   data-aos="fade-up" 등 모든 AOS 속성을 무력화 → opacity 1 + transform none + transition 없음.
   기존 마크업/JS 안 건드리고 CSS만으로 v8 한정 비활성. */
body.main-v8 [data-aos] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* 2026-04-29: v8 카드 라운드 통일 — 모든 카드 요소 border-radius 20px */
body.main-v8 .qucik_box,
body.main-v8 .vis_zone > #visual,
body.main-v8 .vis_zone > #visual .area,
body.main-v8 .vis_zone > #visual .swiper,
body.main-v8 .vis_zone > .grid_vus:not(#visual),
body.main-v8 .card,
body.main-v8 .notice_zone,
body.main-v8 .gerrelly,
body.main-v8 .info-card {
    border-radius: 20px;
}
/* swiper 영역은 라운드 클리핑 위해 overflow hidden — 슬라이드 이미지가 모서리 따라 잘림 */
body.main-v8 .vis_zone > #visual,
body.main-v8 .vis_zone > #visual .area,
body.main-v8 .vis_zone > #visual .swiper {
    overflow: hidden;
}

/* 2026-04-29: v8 히어로 텍스트 오버레이 — swiper 위 absolute 배치.
   폰트 크기/굵기는 v1 기본 클래스(text-h2 / text-display)에서 처리되므로 여기선 위치만 담당.
   색상/그림자 등은 어드민 설정값(inline-style)이 우선, 없으면 아래 기본값. */
body.main-v8 .vis_zone > #visual .area {
    position: relative;
}
body.main-v8 .v8-hero-text {
    position: absolute;
    z-index: 5;
    left: 60px;
    top: 70px;
    right: 60px;
    color: #fff;
    pointer-events: none;
}
/* 텍스트 마진만 — 크기는 text-h2 / text-display 클래스가 처리. 라인 간격 10px. */
body.main-v8 .v8-hero-text > * + * {
    margin-top: 10px;
}
/* 첫 번째 텍스트만 5px 위로 올림 (라인 시각 정렬 보정) */
body.main-v8 .v8-hero-text > *:first-child {
    margin-top: -5px;
}
/* 2026-05-13: 모바일 전용 br — 기본 숨김 (모바일에서만 보이도록 미디어쿼리에서 활성화) */
body.main-v8 .v8-hero-text br.mobile-br {
    display: none;
}

@media (max-width: 1280px) {
    body.main-v8 .v8-hero-text { left: 40px; top: 60px; right: 40px; }
}
/* 2026-05-14: 태블릿 — 히어로 텍스트 가운데 정렬 */
@media (max-width: 1024px) {
    body.main-v8 .v8-hero-text {
        text-align: center;
    }
    body.main-v8 .v8-hero-text > * {
        text-align: center;
    }
}
@media (max-width: 640px) {
    body.main-v8 .v8-hero-text { left: 24px; top: 32px; right: 24px; }
}

/* 2026-04-29: v8 .title_zone 전체 숨김 — 히어로 텍스트는 swiper 오버레이로,
   검색창은 .vis_zone 우측(.v8-aside)으로 이동했으므로 .title_zone 자체가 불필요. */
body.main-v8 .title_zone {
    display: none;
}

/* 2026-04-29: v8 우측 영역(.v8-aside) — 검색창 + 게시판 2개 세로 스택.
   swiper(z:1) 보다 위에 stacking 되도록 명시적 z-index. */
body.main-v8 .v8-aside {
    display: flex;
    flex-direction: column;
    gap: 16px;
    height: 620px;
    position: relative;
    z-index: 2;
}
body.main-v8 .v8-quick-row,
body.main-v8 .qucik_box {
    position: relative;
    z-index: 2;
}
body.main-v8 .v8-aside__search {
    display: flex;
    align-items: center;
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    flex-shrink: 0;
}
body.main-v8 .v8-aside__search input {
    flex: 1;
    height: 60px;
    border: 0;
    outline: 0;
    padding: 0 20px;
    font-size: 16px;
    background: transparent;
}
body.main-v8 .v8-aside__search button {
    height: 60px;
    width: 60px;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
body.main-v8 .v8-aside__search button img {
    width: 24px;
    height: 24px;
    opacity: 0.7;
    transition: opacity 0.2s;
}
body.main-v8 .v8-aside__search button:hover img { opacity: 1; }

/* 게시판 2개 — 세로 2행 스택. 우측 컬럼 높이를 위아래로 균등 분할. */
body.main-v8 .v8-aside__boards {
    display: flex;
    flex-direction: column;
    gap: 16px;
    flex: 1;
    min-height: 0;
}
body.main-v8 .v8-board {
    flex: 1 1 0;
    min-height: 0;
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
}
body.main-v8 .v8-board__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #eef0f3;
}
body.main-v8 .v8-board__head h3 {
    font-size: 18px;
    font-weight: 700;
    color: #2c313e;
    margin: 0;
}
body.main-v8 .v8-board__more {
    width: 28px;
    height: 28px;
    background: url('/images/main-v8/icon-plus-circle-dark.svg') no-repeat center / 28px 28px;
    display: block;
    text-decoration: none;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    transition: opacity 0.2s;
}
body.main-v8 .v8-board__more:hover {
    opacity: 0.7;
}
body.main-v8 .v8-board__list {
    list-style: none;
    margin: 0;
    padding: 0;
    flex: 1;
    overflow: hidden;
}
body.main-v8 .v8-board__list li {
    border-bottom: 1px solid #f3f4f6;
}
body.main-v8 .v8-board__list li:last-child {
    border-bottom: 0;
}
body.main-v8 .v8-board__list a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 0;
    color: #2c313e;
    text-decoration: none;
    font-size: 14px;
    transition: color 0.2s;
}
body.main-v8 .v8-board__list a:hover {
    color: #4f46e5;
}
/* 2026-05-13: 디자이너 시안 — 게시글 제목 세미볼드 (크기는 원래 14px 유지) */
body.main-v8 .v8-board__title {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
}
body.main-v8 .v8-board__date {
    flex-shrink: 0;
    color: #9ca3af;
    font-size: 12px;
}

/* 2026-05-07: v8 보드 — accent 변형 (공지사항 등). 헤더만 그라데이션 채움. */
body.main-v8 .v8-board.v8-board--accent {
    padding: 0;
    overflow: hidden;
}
body.main-v8 .v8-board.v8-board--accent .v8-board__head {
    background: linear-gradient(165deg, #51A7F7 0%, #4B84FA 100%);
    padding: 18px 24px;
    margin-bottom: 0;
    border-bottom: none;
    border-radius: 20px 20px 0 0;
}
body.main-v8 .v8-board.v8-board--accent .v8-board__head h3 {
    color: #fff;
}
body.main-v8 .v8-board.v8-board--accent .v8-board__more {
    background: url('/images/main-v8/icon-plus-circle.svg') no-repeat center / 28px 28px;
    border: none;
}
body.main-v8 .v8-board.v8-board--accent .v8-board__more:hover {
    opacity: 0.7;
}
body.main-v8 .v8-board.v8-board--accent .v8-board__list {
    padding: 8px 24px 16px;
}
/* teal 변형 — 학술자료. 헤더 그라데이션만 오버라이드 */
body.main-v8 .v8-board.v8-board--accent.v8-board--teal .v8-board__head {
    background: linear-gradient(157deg, #0BD4CA 0%, #12A9D3 100%);
}

/* 1024px 이하 — 우측 영역 height auto, 보드 2개를 양옆 나란히(가로 row)
   2026-05-14: 디자이너 시안 — 합치면 904×268, 각 보드 440×268, gap 24
   - 각 보드 width: 440px 고정 (flex shrink 0로 줄어드는 것도 차단)
   - 합친 영역(.v8-aside__boards)은 boards가 결정한 폭을 그대로 가짐 (904 = 440×2 + 24)
   - 검색창도 904로 통일 */
@media (max-width: 1024px) {
    /* 2026-05-14: 히어로↔검색창 24 (.vis_zone gap), 검색창↔보드 24 (.v8-aside gap)
       헤더 실선↔히어로 = vis_zone margin-top 50 (보드↔퀵버튼 50과 통일) */
    body.main-v8 .vis_zone {
        gap: 24px !important;
        margin-top: 50px;
    }
    body.main-v8 .v8-aside {
        height: auto;
        gap: 24px;
    }
    body.main-v8 .v8-aside__search {
        max-width: 904px;
        margin-left: auto;
        margin-right: auto;
        width: 100%;
    }
    body.main-v8 .v8-aside__boards {
        flex-direction: row;
        flex-wrap: wrap;           /* 2026-07-31 칸반067: 폭 부족(904 미만) 시 1열로 자동 전환 */
        gap: 24px;
        justify-content: center;   /* parent가 904보다 넓으면 가운데 정렬 */
    }
    body.main-v8 .v8-board {
        flex: 1 1 440px;           /* 2열이 안 들어가면 줄바꿈 후 전체 폭 사용 */
        width: auto;
        max-width: 440px;
        min-width: 0;
        min-height: 268px;
        height: auto;
    }
}

/* 2026-07-31 칸반067: 960px 미만이면 메인 게시판 목록을 1열로 고정
   (2열 = 440 × 2 + 24 = 904 라 그 이하 폭에서 카드가 눌리거나 넘침) */
@media (max-width: 959px) {
    body.main-v8 .v8-aside__boards {
        flex-direction: column;
        flex-wrap: nowrap;
    }
    body.main-v8 .v8-board {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
    }
}

/* 540px 이하 — 너무 좁으면 다시 세로 스택
   2026-05-14: 태블릿(≤1024) 룰의 width:440 고정이 모바일에서도 적용되는 것 차단
   2026-05-14: 모바일에서 보드/검색창/우측 영역이 절반 폭만 차지하던 문제 수정
   — width:auto + 부모 flex가 합쳐져 콘텐츠 폭으로 줄어들던 현상 차단. 명시적 100% 강제. */
@media (max-width: 540px) {
    body.main-v8 .v8-aside {
        width: 100%;
    }
    body.main-v8 .v8-aside__search {
        width: 100%;
        max-width: 100%;
    }
    body.main-v8 .v8-aside__boards {
        flex-direction: column;
        width: 100%;
    }
    body.main-v8 .v8-board {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        /* 2026-05-14: 디자이너 시안 — 모바일(390 기준) 보드 카드 342 fill × 216
           @1024 룰의 min-height:268 / height:auto 덮어쓰기 */
        height: 216px;
        min-height: 216px;
    }
}

/* 2026-05-07: v8 퀵 피처 카드 (히어로 다음 행) — 4개 가로 배치, 파스텔 배경 + 좌상단 아이콘 */
body.main-v8 .v8-quick-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 32px;
    position: relative;
    z-index: 2;
}
body.main-v8 .quick-feature {
    position: relative;
    display: block;
    height: 400px;
    border-radius: 20px;
    box-sizing: border-box;
    color: #1f2937;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
body.main-v8 .quick-feature:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}
/* 아이콘 — 카드 우상단 절대 배치 (top:46.54 / right:34) */
body.main-v8 .quick-feature__icon {
    position: absolute;
    top: 46.54px;
    right: 34px;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
}
body.main-v8 .quick-feature__icon img {
    width: 28px;
    height: 28px;
}
/* 일러스트(PNG/JPG) 아이콘 — 박스/배경/보더 모두 제거, 이미지 자연 크기 그대로 */
body.main-v8 .quick-feature__icon--illustration {
    width: auto;
    height: auto;
    border-radius: 0;
    background: transparent;
    display: block;
    padding: 0;
}
body.main-v8 .quick-feature__icon--illustration img {
    width: 127px;
    height: 120px;
    display: block;
}
/* 텍스트 영역 — 카드 하단 절대 배치 (bottom:44 / left,right:34) */
body.main-v8 .quick-feature__content {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 44px;
}
body.main-v8 .quick-feature__subtitle {
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    margin-bottom: 6px;
    color: #1F7AB8;
}
body.main-v8 .quick-feature__title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 30px;
    font-weight: 700;
    color: #111827;
    margin-bottom: 14px;
}
body.main-v8 .quick-feature__title .material-symbols-outlined {
    font-size: 22px;
    transition: transform 0.2s ease;
}
body.main-v8 .quick-feature:hover .quick-feature__title .material-symbols-outlined {
    transform: translateX(4px);
}
body.main-v8 .quick-feature__desc {
    font-size: 15px;
    line-height: 1.55;
    color: #4b5563;
    opacity: 0.5;  /* 2026-05-12: 퀵 피처 설명 투명도 50% */
    margin: 0;
}

/* 4가지 파스텔 배경 + 강조색 */
/* 첫 번째 카드: fill #E7F0FA / 1px inside stroke #CEDDEE */
body.main-v8 .quick-feature.feature-blue {
    background: #E7F0FA;
    border: 1px solid #CEDDEE;
}
body.main-v8 .quick-feature.feature-blue .quick-feature__icon:not(.quick-feature__icon--illustration) {
    background: #c9def9;
    color: #1d4ed8;
}
/* 두 번째 카드 (건강 정보): fill #E8F8F5 / 1px inside stroke #CEE4E0 */
body.main-v8 .quick-feature.feature-yellow {
    background: #E8F8F5;
    border: 1px solid #CEE4E0;
}
body.main-v8 .quick-feature.feature-yellow .quick-feature__icon:not(.quick-feature__icon--illustration) {
    background: #c5e8df;
    color: #047857;
}
/* 세 번째 카드 (학술 대회): fill #FFF4CC / 1px inside stroke #EBE1BB */
body.main-v8 .quick-feature.feature-pink {
    background: #FFF4CC;
    border: 1px solid #EBE1BB;
}
body.main-v8 .quick-feature.feature-pink .quick-feature__icon:not(.quick-feature__icon--illustration) {
    background: #f4e29a;
    color: #92590e;
}
/* 네 번째 카드 (사업 안내): fill #FDECEC / 1px inside stroke #F4DFDF */
body.main-v8 .quick-feature.feature-green {
    background: #FDECEC;
    border: 1px solid #F4DFDF;
}
body.main-v8 .quick-feature.feature-green .quick-feature__icon:not(.quick-feature__icon--illustration) {
    background: #f6cccc;
    color: #b91c1c;
}

@media (max-width: 1024px) {
    /* 2026-05-14: vis_zone(보드 포함)의 layout.css 기본 margin-bottom:64 제거 →
       퀵피처와의 갭은 quick-features margin-top 50만 적용 (64+50=114 되던 것 해결) */
    body.main-v8 .vis_zone {
        margin-bottom: 0;
    }
    /* 2026-05-14: 햄버거 메뉴 패널 — 태블릿 헤더(90px) 바로 아래부터 시작
       (layout.css 기본 top:60px라 90px 헤더를 가리던 문제. 모바일 ≤767은 뒤쪽 블록에서 70px로 override) */
    body.main-v8 #nav {
        top: 90px;
        height: calc(100% - 90px);
    }
    /* 2026-05-14: 디자이너 시안 — 컨테이너 904 폭, 2×2 그리드, gap 24로 각 카드 정확히 440×260
       위 보드와의 거리는 margin-top 50.
       폰트 사이즈 — 상단 파란 서브타이틀 15 / 메인 타이틀(검정) 28 / 설명 16 */
    body.main-v8 .v8-quick-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 24px;
        max-width: 904px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 50px;
    }
    body.main-v8 .quick-feature {
        height: 260px;
    }
    /* 2026-05-14: 태블릿 — 퀵피처 아이콘 우 30 / 상 40 (디자이너 시안) */
    body.main-v8 .quick-feature__icon {
        top: 40px;
        right: 30px;
    }
    /* 2026-05-14: 텍스트 단락 — 디자이너 시안 절대 좌표
       카드 y 좌표: subtitle 112 / title 147 / desc 189~226 (bottom 34)
       각 요소를 독립 absolute 배치해서 line-height 영향 없이 정확한 y 위치 보장
       (content는 좌 30 / 상 112 / 하 34, 자식들은 content 기준 상대 좌표) */
    body.main-v8 .quick-feature__content {
        left: 30px;
        right: 30px;
        top: 112px;
        bottom: 34px;
        height: auto;
    }
    body.main-v8 .quick-feature__subtitle {
        position: absolute;
        top: 0;        /* 카드 y 112 */
        left: 0;
        right: 0;
        margin: 0;
        font-size: 15px;
        line-height: 1;
    }
    body.main-v8 .quick-feature__title {
        position: absolute;
        top: 35px;     /* 카드 y 147 = 112 + 35 */
        left: 0;
        right: 0;
        margin: 0;
        font-size: 26px;
        line-height: 1;
    }
    body.main-v8 .quick-feature__desc {
        position: absolute;
        top: 77px;     /* 카드 y 189 = 112 + 77 */
        left: 0;
        right: 0;
        bottom: 0;     /* 카드 y 226 = card bottom - 34 */
        margin: 0;
        font-size: 16px;
        line-height: 1.4;
    }
}
@media (max-width: 540px) {
    body.main-v8 .v8-quick-features {
        grid-template-columns: 1fr;
    }
}

/* 모바일(<=767) — 히어로 342×500 비율 + 텍스트 가운데 정렬 + 텍스트 사이즈 축소 */
@media (max-width: 767px) {
    body.main-v8 .vis_zone > #visual {
        width: 100%;
        max-width: 100%;
        height: auto;
        aspect-ratio: 342 / 500;
    }
    body.main-v8 .v8-hero-text {
        left: 0;
        right: 0;
        top: 40px;
        text-align: center;
        padding: 0 24px;
    }
    body.main-v8 .v8-hero-text > * {
        text-align: center;
    }
    /* 인라인 스타일(어드민 fontSize) 모바일에서 덮어쓰기 */
    body.main-v8 .v8-hero-text > .text-h2:first-child {
        font-size: 14px !important;
    }
    body.main-v8 .v8-hero-text > .text-display {
        font-size: 42px !important;
    }
    body.main-v8 .v8-hero-text > .text-h2:last-child {
        font-size: 16px !important;
    }
    /* 모바일 전용 줄바꿈 표시 (!important로 default hidden 덮어쓰기) */
    body.main-v8 .v8-hero-text br.mobile-br {
        display: inline !important;
    }
}

/* 모바일(<=767) — 퀵 피처 카드 컴팩트(342×178), 아이콘 작게, 텍스트 압축
   2026-05-14: 디자이너 시안 — 카드 342 fill × 178 고정.
   서브타이틀/타이틀/설명글을 각각 카드 기준 절대 배치 (.quick-feature는 position:relative):
     - 서브타이틀: 좌우 20 / 상 52 / 하 114
     - 타이틀:     좌우 20 / 상 78 / 하 78
     - 설명글:     좌우 20 / 상 110 / 하 24
   .quick-feature__content는 position:static으로 두어 위치 컨텍스트를 만들지 않음 → 자식들이 카드 기준으로 배치됨. */
@media (max-width: 767px) {
    body.main-v8 .quick-feature {
        height: 178px;
        padding: 0;
    }
    /* 아이콘 — 작게(80×75) 우상단에 위치 */
    body.main-v8 .quick-feature__icon--illustration img {
        width: 80px;
        height: 75px;
    }
    body.main-v8 .quick-feature__icon {
        top: 20px;
        right: 20px;
    }
    /* content 래퍼는 위치 컨텍스트 해제 — 자식들이 카드(.quick-feature) 기준 절대 배치되도록 */
    body.main-v8 .quick-feature__content {
        position: static;
    }
    body.main-v8 .quick-feature__subtitle {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 52px;
        bottom: 114px;
        margin: 0;
        font-size: 12px;
    }
    body.main-v8 .quick-feature__title {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 78px;
        bottom: 78px;
        margin: 0;
        font-size: 22px;
    }
    body.main-v8 .quick-feature__desc {
        position: absolute;
        left: 20px;
        right: 20px;
        top: 110px;
        bottom: 24px;
        margin: 0;
        font-size: 13px;
        line-height: 1.45;
    }
}

/* 2026-05-08: v8 홈 — Tailwind .pt-16(64px)을 제거. 히어로가 상단 160px(헤더 100 + 마진 60)에 정확히 위치 */
body.main-v8 .contents.pt-16 {
    padding-top: 0 !important;
}

/* 2026-05-07: v8에서 숨길 섹션들 — 협회소식/발간물(notice_zone), 활동사진/학술행사(vis_zone.reverse) */
body.main-v8 .notice_zone,
body.main-v8 .vis_zone.reverse {
    display: none !important;
}

/* 2026-05-11: v8 GNB two-row layout
   - 1행: 로고(좌) + pill(우) — 56px
   - 구분선
   - 2행: GNB 메뉴 중앙 — 50px
   - 구분선
   - 히어로 */
body.main-v8 #header {
    overflow: visible;
}
body.main-v8 #header .info_head { display: none !important; }
body.main-v8 #header .head .header-util { display: none !important; }

/* 1행: 로고 + pill */
body.main-v8 #header .head {
    background: transparent;
    border: none;
}
body.main-v8 #header .head .inner {
    height: 80px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
body.main-v8 #header .head .logo {
    position: relative;
    left: auto;
    top: auto;
    transform: none;
    margin: 0;
    z-index: 5;
    order: -1;
}
body.main-v8 #header .head .logo img {
    filter: brightness(0) invert(1);
    max-height: 46px;
    width: auto;
    height: auto;
    display: block;
}
body.main-v8 #header .head .pc_none {
    order: 10;
}

/* 1행-2행 사이 구분선 */
body.main-v8 #header .nav {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    height: 50px;
    background: transparent;
    border: none;
    border-top: 1px solid #7EB1CB;  /* 2026-07-03: 메인(히어로 위) 라인색. 흰헤더(hover/navOn/서브)선 #E5E5E5 로 override. 트랜지션 제거로 전환 즉시=깜빡임 없음 */
    box-sizing: border-box;
}
/* 2행 하단 구분선 — GNB와 히어로 사이 */
body.main-v8 #header .nav::after {
    content: "";
    position: absolute;
    /* 2026-07-03: nav 는 height:50px + border-top:1px(border-box) 라 콘텐츠(gnb/a/인디케이터/드롭다운)는 y=51 평면,
       밑선만 nav 박스 바닥 y=50 이라 파란 활성 인디케이터·메가/컬럼과 1px 어긋나 보였음.
       밑선을 콘텐츠 평면으로 1px 내려(y=51) 전부 정렬. (nav 높이 미변경 → 헤더높이 영향 0) */
    bottom: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: #7EB1CB;  /* 2026-07-03: 메인(히어로 위) 밑선색. 흰헤더(hover/navOn/서브)선 #E5E5E5 */
}
/* 2026-08-24 칸반146: GNB 바 배경 — 메인(히어로 위)과 서브(흰 헤더)를 각각 어드민에서 지정한다.
   위 기본 규칙은 두 상태를 함께 덮으므로, 상태별로 한 겹 더 얹어 서로 섞이지 않게 한다.
   폴백은 둘 다 transparent = 지금 화면 그대로. */
body.main-v8:has(.v8-info-row) #header .nav {
    background: var(--gnb-hero-bar-bg, transparent);
}
body.main-v8:not(:has(.v8-info-row)) #header .nav {
    background: var(--gnb-bar-bg, transparent);
}
body.main-v8 #header .nav .inner {
    height: 50px;
    max-width: 1400px;
    width: 100%;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.main-v8 #header .nav .gnb {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 0;
}
body.main-v8 #header .nav .gnb > li {
    flex: 1;
    min-width: 0;
    max-width: 200px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
body.main-v8 #header .nav .gnb > li > a {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    color: var(--gnb-hero-text, #fff) !important;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    padding: 0;
    font-weight: 600;
    font-size: 16px !important;
    letter-spacing: -0.02em;
    white-space: nowrap;
}
body.main-v8 #header .nav .gnb > li > a::after {
    display: none;
}
body.main-v8 #header .nav .gnb > li:hover > a,
body.main-v8 #header .nav .gnb > li.active > a {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    color: var(--gnb-hero-text-active, var(--gnb-hero-text, #fff)) !important;
}
body.main-v8 #header .nav .gnb > li ~ li:before {
    display: none;
}

/* 로그인/회원가입 pill — 1행 우측 */
body.main-v8 .v8-auth-pill {
    height: 44px;
    border-radius: 22px;
    background: linear-gradient(165deg, #51A7F7 0%, #4B84FA 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 28px;
    color: #fff;
    z-index: 10;
    box-shadow: none;
    white-space: nowrap;
    margin-left: 24px;
    position: relative;
}
body.main-v8 .v8-auth-pill a {
    color: #fff;
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    padding: 0 8px;
    transition: opacity 0.15s;
}
body.main-v8 .v8-auth-pill a:hover {
    opacity: 0.85;
}
body.main-v8 .v8-auth-pill .v8-auth-pill__divider {
    width: 1px;
    height: 14px;
    background: rgba(255, 255, 255, 0.5);
    margin: 0 4px;
}

/* 2026-06-18: v8 pill 내 한/영 토글 — 파란 pill 위 가독 색상(흰색 계열) */
body.main-v8 .v8-auth-pill .v8-lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
body.main-v8 .v8-auth-pill .v8-lang-switch a {
    padding: 0;
    font-size: 14px;
    font-weight: 600;
}
body.main-v8 .v8-auth-pill .v8-lang-switch .lang-active {
    color: #fff;
    font-weight: 700;
}
body.main-v8 .v8-auth-pill .v8-lang-switch .lang-inactive {
    color: rgba(255, 255, 255, 0.6);
}
body.main-v8 .v8-auth-pill .v8-lang-switch .lang-inactive:hover {
    color: #fff;
    opacity: 1;
}
body.main-v8 .v8-auth-pill .v8-lang-switch .lang-divider {
    color: rgba(255, 255, 255, 0.5);
    font-size: 11px;
    user-select: none;
}

/* 드롭다운 — navOn 시 흰색 배경, 선택 컬럼 하이라이트 */
html.navOn body.main-v8 #header {
    border-bottom: none;
}
html.navOn body.main-v8 #header .nav {
    /* 2026-08-24 칸반146: 메가 펼침 = 흰 헤더 상태 → 서브와 같은 'GNB 바 배경' 설정을 따른다 */
    background: var(--gnb-bar-bg, #fff);
    border-top-color: #E5E5E5;  /* 2026-07-03: navOn=흰헤더 → 구분선 #E5E5E5 */
}
html.navOn body.main-v8 #header .nav::after { background: #E5E5E5; }
/* 드롭다운 영역 전체를 흰색 배경으로 */
body.main-v8 #header .nav .gnb > li > ul {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    background: var(--gnb-mega-bg, #fff);
}

/* 2026-05-12: GNB 호버 시 헤더 전체(1행+2행) 흰색 + 로고 자연색 변환 + 메뉴 텍스트 다크
   2026-05-13: @media (hover: hover)로 감싸서 마우스 환경에서만 적용. 터치 환경에선 :hover가 sticky 되어 햄버거 닫은 뒤에도 흰색 유지되는 문제 방지 */
@media (hover: hover) {
    body.main-v8 #header:hover {
        background: #ffffff !important;
    }
    body.main-v8 #header:hover .head .logo img {
        filter: none;
    }
    /* 2026-07-03: hover=헤더 흰색 → 구분선 #E5E5E5 (헤더 transition 제거로 즉시 전환, 깜빡임 없음) */
    body.main-v8 #header:hover .nav { border-top-color: #E5E5E5; }
    body.main-v8 #header:hover .nav::after { background: #E5E5E5; }
    body.main-v8 #header:hover .nav .gnb > li > a {
        /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
        color: var(--gnb-text, #2c313e) !important;
    }
    /* 2026-05-13: 부모 메뉴 hover 시에도 텍스트 색상 안 바꿈 (선택된 메뉴는 서브메뉴 아이템만 색 변경) */
}
/* navOn 시 메뉴 텍스트를 검정으로 전환 */
html.navOn body.main-v8 #header .nav .gnb > li > a {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    color: var(--gnb-text, #333) !important;
}
/* hover된 메뉴 컬럼 — 흰색 위에 #1F7AB8 5% 혼합 = #F4F8FB
   2026-05-13: 높이를 navOn 헤더(520) - head(80) - nav(50) = 390px로 늘려 dropdown 영역 하단까지 채움
   (기본 layout.css의 height:340px가 중간에 끊어보이는 문제 해결) */
html.navOn body.main-v8 #header .nav .gnb > li:hover > ul {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    background: var(--gnb-mega-hover-bg, #F4F8FB);
}
body.main-v8 #header .nav .gnb > li > ul {
    height: 390px;
}
/* 2026-05-13: hover/active 부모 메뉴 — 텍스트 #1F7AB8 + 하단 3px 블루 라인 (디자이너 시안) */
html.navOn body.main-v8 #header .nav .gnb > li:hover > a,
html.navOn body.main-v8 #header .nav .gnb > li.active > a {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    color: var(--gnb-text-active, var(--site-accent, #1F7AB8)) !important;
}
html.navOn body.main-v8 #header .nav .gnb > li:hover > a::after,
html.navOn body.main-v8 #header .nav .gnb > li.active > a::after {
    display: block;
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    background: var(--gnb-active-bar, var(--site-accent, #1F7AB8));
    content: "";
}
/* 서브메뉴 아이템 — 기본 검정, hover 시 #1F7AB8 */
body.main-v8 #header .nav .gnb > li > ul > li > a {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    color: var(--gnb-sub-text, #424242);
}
body.main-v8 #header .nav .gnb > li > ul > li:hover > a {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    color: var(--gnb-sub-accent, var(--site-accent, #1F7AB8));
}
body.main-v8 #header .nav .gnb > li > ul > li > a::after {
    /* 2026-08-24 칸반146: 어드민 GNB 색 설정을 받는다. 폴백 = 기존 하드코딩값(미설정 학회 화면 불변) */
    background: var(--gnb-sub-accent, var(--site-accent, #1F7AB8));
}

/* 1024px 이하 — 태블릿/모바일 (디자이너 spec: 1024 × 90) */
@media (max-width: 1024px) {
    body.main-v8 #header {
        height: 90px;
        border-bottom: 1px solid rgba(255, 255, 255, 0.3);  /* 2026-05-14: 디자이너 시안 — #fff 30% 실선 */
    }
    body.main-v8 #header .head .inner {
        height: 90px;
        display: flex;
        align-items: center;
    }
    body.main-v8 #header .nav { display: none; }
    body.main-v8 .v8-auth-pill { display: none; }
    /* 로고 — 태블릿 spec: 176×44 (원본 SVG 176×46 비율 거의 일치) */
    body.main-v8 #header .head .logo img {
        max-width: 176px;
        max-height: 44px;
        width: auto;
        height: auto;
    }
    /* 햄버거 메뉴 버튼 — 54×54 그라데이션 원형 아이콘 */
    body.main-v8 #header .head .mnu {
        width: 54px;
        height: 54px;
        background: url('/images/main-v8/hamburger-menu.svg') no-repeat center / 54px 54px;
        border: none;
        padding: 0;
    }
    body.main-v8 #header .head .mnu svg {
        display: none;
    }

    /* 모바일 햄버거 메뉴 열렸을 때 — 메뉴 정렬/스타일 */
    html.navOn body.main-v8 #nav {
        background: #fff;
    }
    html.navOn body.main-v8 #nav .inner {
        padding: 0;
        max-width: 100%;
    }
    html.navOn body.main-v8 #nav .gnb {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
    }
    html.navOn body.main-v8 #nav .gnb > li {
        border-bottom: 1px solid #eee;
        display: block;
        width: 100%;
        max-width: 100%;
    }
    /* 로그인/회원가입 단일 pill — 시안 SVG와 동일 (가로 그라데이션 pill, 가운데 흰색 divider, 좌우 24 gutter) */
    html.navOn body.main-v8 #nav .gnb > li.mobile-auth-pill {
        order: -1;
        border-bottom: none;
        margin: 16px 24px;
        height: 44px;
        border-radius: 22px;
        background: linear-gradient(165deg, #51A7F7 0%, #4B84FA 100%);
        display: flex;
        align-items: stretch;
        overflow: hidden;
        width: auto;
        max-width: none;
    }
    html.navOn body.main-v8 #nav .gnb > li.mobile-auth-pill > a {
        flex: 1 1 0;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        color: #fff !important;
        font-size: 15px !important;
        font-weight: 600;
        text-decoration: none;
        background: transparent !important;
        height: auto !important;
        min-height: 0 !important;   /* 메인 메뉴 70px min-height가 pill 내부 <a>에 상속되는 것 차단 */
    }
    /* 두 번째 이후 <a>에 왼쪽 divider (시안의 중앙 수직 라인) */
    html.navOn body.main-v8 #nav .gnb > li.mobile-auth-pill > a + a {
        border-left: 1px solid rgba(255, 255, 255, 0.5);
    }
    /* layout.css의 모바일 메뉴 화살표 ::before(icons_diff2.png)가 pill 내부 <a>에 붙는 것 제거 */
    html.navOn body.main-v8 #nav .gnb > li.mobile-auth-pill > a::before {
        content: none;
        display: none;
    }
    /* 언어 토글은 메뉴 맨 하단 그대로 유지 (order 0 = 기본) */
    html.navOn body.main-v8 #nav .gnb > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 24px;
        min-height: 70px;
        font-size: 16px !important;
        font-weight: 500;
        color: #222 !important;
        line-height: 1.4 !important;
        height: auto !important;
        text-align: left;
        text-decoration: none;
        position: relative;
    }
    html.navOn body.main-v8 #nav .gnb > li > a::after {
        display: none;  /* 데스크탑 hover bar 안 보이게 */
    }
    /* 화살표 아이콘 — 디자이너 시안: 18×18 chevron, 우측 34, 상하 26 (70 - 18 - 26 = 26)
       서브메뉴 있는 항목에만 표시. layout.css의 icons_diff2.png ::before 덮어쓰기 */
    html.navOn body.main-v8 #nav .gnb > li:not(.mobile-auth-pill):not(.mobile-lang-switch) > a::before {
        content: "";
        display: block;
        position: absolute;
        right: 34px;
        top: 26px;
        width: 18px;
        height: 18px;
        background: url('/images/main-v8/chevron-down.svg') no-repeat center / 18px 18px;
        transform: none;   /* layout.css의 translateY(-50%) 제거 */
        color: transparent;
    }
    /* 서브메뉴 없는 항목(submenu <ul>이 없음)은 화살표 숨김 */
    html.navOn body.main-v8 #nav .gnb > li:not(.mobile-auth-pill):not(.mobile-lang-switch):not(:has(> ul)) > a::before {
        display: none;
    }
    /* active 상태(서브메뉴 펼쳐짐) — 화살표 위 방향으로 교체.
       원래 down 룰과 동일 specificity 유지하면서 .active 추가해서 더 specific하게 만들어야 background 덮어씀 */
    html.navOn body.main-v8 #nav .gnb > li:not(.mobile-auth-pill):not(.mobile-lang-switch).active > a::before {
        background-image: url('/images/main-v8/chevron-up.svg');
    }
    /* 서브메뉴 — 들여쓰기 + 배경 #F4F8FB (#1F7AB8 5% 틴트가 흰 배경 위에 얹힌 색) */
    html.navOn body.main-v8 #nav .gnb > li > ul {
        margin: 0;
        padding: 0 0 8px;
        list-style: none;
        background: #F4F8FB;
    }
    html.navOn body.main-v8 #nav .gnb > li > ul > li > a {
        display: block;
        padding: 12px 24px 12px 40px;
        font-size: 14px;
        color: #555;
        text-decoration: none;
    }
    /* 서브메뉴 아이템 hover/active(클릭) 시 브랜드 블루 #1F7AB8 */
    html.navOn body.main-v8 #nav .gnb > li > ul > li > a:hover,
    html.navOn body.main-v8 #nav .gnb > li > ul > li.active > a {
        color: #1F7AB8;
    }
}

/* 2026-05-07 v8 info row: 학술지 / 월간지 / 기부·후원 / CTA — 1400 fill x 520 hug, 3열 × 2행 grid */
body.main-v8 .v8-info-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 2026-07-31 칸반064: 3열 우측에 교육센터/기부·후원 2단 → 3행 구조로 변경
       190 + 20 + 190 = 400 (= 월간지 높이), + 20 + 120(CTA) = 540 (= 학술지 높이) */
    /* 2026-08-12 칸반100: 교육/기부 설명글이 좁은 폭에서 3줄이 되면 190 고정 높이에 잘리던 문제
       → 최소 190, 내용이 넘치면 행이 늘어나도록 minmax */
    grid-template-rows: minmax(190px, auto) minmax(190px, auto) 120px;
    gap: 20px;
    margin-top: 32px;
    margin-bottom: 60px;
    /* 2026-05-12: container-wrapper는 1441px+에서 padding 0 → info-row가 자연스럽게 1400px
       1열 = (1400 - 40) / 3 = 453.33 → 학술지 본문(385) 좌우 34.17 자동 매칭 */
}
body.main-v8 .v8-info-card {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    border: 1px solid #E2E2E2;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    overflow: hidden;
    position: relative;
}
body.main-v8 .v8-info-card--journal {
    grid-column: 1;
    grid-row: 1 / span 3;
}
/* 월간지 — 협회소개(feature-blue) 색상 */
body.main-v8 .v8-info-card--monthly {
    grid-column: 2; grid-row: 1 / span 2;
    background: #E7F0FA;
    border-color: #CEDDEE;
}
/* 2026-07-31 칸반064: 교육 센터 — 민트(기존 기부·후원 색상 승계) */
body.main-v8 .v8-info-card--education {
    grid-column: 3; grid-row: 1;
    background: #E8F8F5;
    border-color: #CEE4E0;
}
/* 기부후원 — 2026-07-31 칸반064: 베이지로 변경(시안 #F8F1E6) */
body.main-v8 .v8-info-card--donation {
    grid-column: 3; grid-row: 2;
    background: #F8F1E6;
    border-color: #EADFCC;
}
body.main-v8 .v8-info-card--cta {
    grid-column: 2 / span 2;
    grid-row: 3;
    flex-direction: row;
    align-items: center;
    justify-content: space-around;
    padding: 24px 32px;
    gap: 0;
}

/* 카드 헤더 (제목 + +버튼) */
body.main-v8 .v8-info-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}
body.main-v8 .v8-info-card__head h3 {
    font-size: 30px !important;
    font-weight: 700 !important;
    color: #2c313e;
    margin: 0;
}
body.main-v8 .v8-info-card__plus {
    width: 59px;
    height: 59px;
    background: url('/images/main-v8/icon-plus-blue.svg') no-repeat center / 59px 59px;
    display: block;
    text-decoration: none;
    font-size: 0;
    color: transparent;
    overflow: hidden;
    flex-shrink: 0;
    transition: transform 0.2s;
}
body.main-v8 .v8-info-card__plus:hover {
    transform: scale(1.05);
}

/* 학술지 본문 — 표지(192×260) + 좌우 화살표, 영역 385×260 (2026-05-12)
   카드 상단에서 95px 위치 (헤더와 시각적 균형 맞춤). 하단 텍스트와는 자연스럽게 간격 형성.
   prev/next 버튼은 journal-body 좌·우 edge에 (space-between), cover는 중앙 (양옆 96.5씩) */
/* 2026-08-01 칸반068: width:385 고정 + translateX(-50%) 라 카드가 좁아지면(1025~1440 구간)
   화살표가 카드 밖으로 빠지던 문제 → 좌우 34 유동 + 최대 폭 제한.
   화살표~표지 간격도 60 → 38 로 축소 */
body.main-v8 .v8-info-card--journal .v8-journal-body {
    position: absolute;
    top: 95px;
    left: 34px;
    right: 34px;
    transform: none;
    width: auto;
    max-width: 340px;
    height: 260px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 0;
}
body.main-v8 .v8-journal-cover {
    width: 192px;
    height: 260px;
    /* 2026-08-01 칸반068: 좁은 폭에서 화살표와 겹치지 않도록 축소 허용 */
    flex: 0 1 192px;
    min-width: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}
body.main-v8 .v8-journal-cover img {
    width: 100%;
    max-width: 192px;
    height: 260px;
    object-fit: cover;  /* 2026-05-12: spec 크기에 정확히 맞춤. 비율 다른 표지는 가장자리 살짝 크롭 */
    object-position: center;
    border-radius: 4px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.10);
}

/* 2026-07-31 칸반063: 권호 슬라이더 — 활성 슬라이드만 노출 (전 권호 서버렌더, 표시만 토글) */
body.main-v8 .v8-journal-cover .v8-journal-slide { display: none; }
body.main-v8 .v8-journal-cover .v8-journal-slide.is-active { display: block; }
/* 권호 1개면 nav 는 자리만 유지하고 숨김 (표지 중앙정렬 유지) */
body.main-v8 .v8-journal-nav--off {
    visibility: hidden;
    pointer-events: none;
}

/* 학술지 카드 info-list — 카드 하단 34 / 좌우 34 절대배치, 가로선 제거 */
body.main-v8 .v8-info-card--journal .v8-info-list {
    position: absolute;
    left: 34px;
    right: 34px;
    bottom: 34px;
    border-top: none;
    padding: 0;
    margin: 0;
}
/* 2026-07-31 칸반063: 권호별 info-list 는 활성 1개만 노출 */
body.main-v8 .v8-info-card--journal .v8-journal-info { display: none; }
body.main-v8 .v8-info-card--journal .v8-journal-info.is-active { display: block; }
/* 2026-05-12: 흰색 prev/next 버튼 (롤링배너와 동일 톤) */
body.main-v8 .v8-journal-nav {
    width: 36px;
    height: 36px;
    flex: 0 0 36px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    cursor: pointer;
    color: #4b5563;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
}
body.main-v8 .v8-journal-nav:hover {
    background: #f9fafb;
    color: #1f2937;
    border-color: #d1d5db;
}

/* 카드 하단 정보 리스트 (학술지 / 월간지 공용) */
body.main-v8 .v8-info-list {
    list-style: none;
    margin: 0;
    padding: 16px 0 0;
    border-top: 1px solid #f3f4f6;
}
body.main-v8 .v8-info-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 14px;
}
body.main-v8 .v8-info-list__icon {
    font-size: 18px;
    color: #1F7AB8;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}
/* PNG/SVG img 형태 아이콘 — 20x20 표시, material-symbols 폰트는 자체 font-size로 표시 */
body.main-v8 img.v8-info-list__icon {
    display: inline-block;
}
body.main-v8 .v8-info-list__label {
    color: #000000;
    font-weight: 600;
    font-size: 18px;
}
body.main-v8 .v8-info-list__value {
    color: #000000;
    font-weight: 500;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-left: auto;
}
/* 2026-05-12: 월간지 값(더 행복한 건강생활, 2026년 4월호) 폰트 17px */
body.main-v8 .v8-info-card--monthly .v8-info-list__value-row .v8-info-list__value {
    font-size: 17px;
}
/* 2026-05-12: 학술지 값(대한보건연구, 1738-3897, 제51권 2호) 폰트 18px */
body.main-v8 .v8-info-card--journal .v8-info-list__value {
    font-size: 18px;
}

/* 2026-05-12: 카드별 텍스트 톤 차등 — 라벨+값 모두 동일 색상
   - 학술지 1·2행 (학술지명·ISSN 전체) → #444
   - 월간지 모든 행 (월간지명·최신권호 라벨+값 전체) → #111 */
body.main-v8 .v8-info-card--journal .v8-info-list li:nth-child(-n+2) .v8-info-list__label,
body.main-v8 .v8-info-card--journal .v8-info-list li:nth-child(-n+2) .v8-info-list__value {
    color: #444444;
}
body.main-v8 .v8-info-card--monthly .v8-info-list__label,
body.main-v8 .v8-info-card--monthly .v8-info-list__value {
    color: #111111;
}
/* 2026-05-12: 월간지 값(더 행복한 건강생활, 2026년 4월호) 투명도 50% */
body.main-v8 .v8-info-card--monthly .v8-info-list__value-row .v8-info-list__value {
    opacity: 0.5;
}
body.main-v8 .v8-info-list__value:hover {
    opacity: 0.85;
}

/* 월간지 본문 — 좌측 표지 + 우측 정보 (높이 340 압축형) */
body.main-v8 .v8-info-card--monthly .v8-info-list {
    border-top: none;
    padding-top: 0;
}
body.main-v8 .v8-monthly-body {
    flex: 1;
    display: flex;
    gap: 20px;
    align-items: center;
    overflow: hidden;
}
body.main-v8 .v8-monthly-cover {
    flex: 0 0 146px;
    width: 146px;
    height: 198px;
}
body.main-v8 .v8-monthly-cover img {
    width: 146px;
    height: 198px;
    object-fit: cover;  /* 2026-05-12: spec 크기에 정확히 맞춤. 비율 다른 표지는 가장자리 살짝 크롭 */
    object-position: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    border-radius: 4px;
    display: block;
}
body.main-v8 .v8-monthly-body .v8-info-list {
    flex: 1;
    min-width: 0;
}
body.main-v8 .v8-monthly-body .v8-info-list li {
    padding: 4px 0;
    justify-content: flex-end;  /* 2026-05-12: 월간지 info 우측 정렬 */
}
body.main-v8 .v8-monthly-body .v8-info-list__value-row {
    margin-left: 0;
    margin-bottom: 6px;
    justify-content: flex-end;
    text-align: right;
}
body.main-v8 .v8-monthly-body .v8-info-list__value-row .v8-info-list__value {
    margin-left: auto;
}

/* 교육 센터 / 기부·후원 카드 — 좌측 텍스트 + 우측 일러스트
   2026-07-31 칸반064: 카드 높이 340 → 190 (2단 분할). 패딩 34, 일러스트 축소 */
/* 2026-07-31 칸반064: 디자이너 시안 — 좌우 34.
   상하는 제목(45) + 간격(17) + 설명 2줄(54) = 116 을 190 카드 안에서 상하 대칭 배치 → 37 */
/* 2026-08-12 칸반100: 우측 일러스트(40%)만큼 본문 영역을 padding 으로 비워 둔다.
   설명글에 고정 max-width 를 주는 방식은 카드 폭이 줄면 그림과 겹쳐서(실측 1100px 에서 103px) 폐기. */
body.main-v8 .v8-info-card--education,
body.main-v8 .v8-info-card--donation {
    padding: 37px 34px;
    padding-right: calc(40% + 12px);
}
body.main-v8 .v8-info-card--education .v8-info-card__head h3,
body.main-v8 .v8-info-card--donation .v8-info-card__head h3 {
    line-height: 1.2;
}
/* 제목 글자 하단 ~ 설명 글자 상단 33px (line-height 여백 16 보정 → margin 17) */
body.main-v8 .v8-info-card--education .v8-info-card__head,
body.main-v8 .v8-info-card--donation .v8-info-card__head {
    margin-bottom: 17px;
}
/* 카드 전체 링크(a) — 텍스트 색/밑줄 상속 차단 */
body.main-v8 a.v8-info-card {
    color: inherit;
    text-decoration: none;
}
body.main-v8 .v8-donation-desc {
    font-size: 17px;
    line-height: 1.6;
    color: #111111;
    opacity: 0.5;  /* 2026-05-12: 기부·후원 설명 투명도 50% */
    margin: 0;
    /* 2026-08-12 칸반100: max-width 220px 제거 — 폭은 카드 padding-right 가 정한다(그림 영역 침범 방지) */
    max-width: none;
}
/* 2026-05-12: 기부·후원 일러스트 — 287×209, 우측 0 / 하단 14 위치 (데스크탑 원본)
   2026-07-31 칸반064: 시안 높이 — 교육 센터 147 / 기부·후원 151, 폭은 원본 비율 유지, 우측 정렬·수직 중앙 */
body.main-v8 .v8-donation-illust {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    bottom: auto;
    right: 0;
    /* 2026-08-12 칸반100: 폭을 카드 비율로 묶는다. width:auto + height 고정이면 업로드 이미지의
       원본 비율이 폭을 정해(교육 303×225 → 198px) 본문 영역을 침범했다. */
    width: 40%;
    max-width: 198px;
    height: 147px;
    pointer-events: none;
}
body.main-v8 .v8-donation-illust img {
    /* contain — 어떤 비율의 업로드 이미지도 박스 밖으로 나가지 않게, 우측 정렬 유지 */
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: right center;
    display: block;
}
body.main-v8 .v8-info-card--donation .v8-donation-illust {
    height: 151px;
}

/* CTA 카드 — 2개 항목 가로 배치 (각 380 x 100 hug, 2026-05-12) */
body.main-v8 .v8-cta-item {
    /* 2026-08-01 칸반068: 380px 고정이라 카드가 좁아지면(1100px 뷰포트 등) 두 번째 항목이
       카드 밖으로 나가던 문제 → 최대 380 유지하되 축소 허용 */
    flex: 0 1 380px;
    width: auto;
    max-width: 380px;
    min-width: 0;
    height: 100px;
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
    color: inherit;
    padding: 0;
    border-radius: 12px;
    transition: background 0.2s;
    box-sizing: border-box;
}
body.main-v8 .v8-cta-item:hover {
    background: #f9fafb;
}
body.main-v8 .v8-cta-icon {
    width: 111px;
    height: 100px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}
body.main-v8 .v8-cta-icon img {
    width: 111px;
    height: 100px;
    object-fit: contain;
}
body.main-v8 .v8-cta-icon .material-symbols-outlined {
    font-size: 32px;
    color: #1F7AB8;
}
body.main-v8 .v8-cta-text {
    flex: 1;
    min-width: 0;
}
body.main-v8 .v8-cta-title {
    font-size: 24px;
    font-weight: 700;
    color: #000000;
    margin-bottom: 8px;
}
body.main-v8 .v8-cta-link {
    font-size: 15px;
    color: #666666;
    display: flex;
    align-items: center;
    gap: 4px;
}
body.main-v8 .v8-cta-link .material-symbols-outlined {
    font-size: 16px;
}

/* 반응형 — 1024px 이하: 3열 그리드 (학술지 288 / 월간지 284 / 기부 284), CTA는 월간지+기부 아래 spanning
   2026-05-14: 디자이너 시안 — 컨테이너 904 × 428 hug
     col 1 (288): 학술지 288 × 428 fill (좌, 2행 span)
     col 2 (284): 월간지 284 × 280 (우상)
     col 3 (284): 기부·후원 284 × 280 (우상)
     col 2~3 span (592): 온라인 논문 + 회원가입 = CTA 592 × 124 (우하)
   합산: 288 + 24 + 284 + 24 + 284 = 904 (가로), 280 + 24 + 124 = 428 (세로)
   2026-07-31 칸반064: 디자이너 시안 재구성 — 2열(442 + 20 + 442 = 904)
     row 1 (333): 학술지 904 × 333 (전체폭)
     row 2~3    : 월간지 442 × 366 (2행 span) | 교육센터 442 × 173 / 기부·후원 442 × 173
     row 4 (129): CTA 904 × 129 (전체폭)
   세로 합산: 333 + 20 + 173 + 20 + 173 + 20 + 129 = 868 */
@media (max-width: 1024px) {
    /* 2026-08-01 칸반068: 폭 고정(904/442) 이 뷰포트보다 넓으면 가로 스크롤이 생기던 문제
       → 열은 1fr 유동, 카드 width 는 auto(그리드가 결정). 최대 폭만 904 로 제한 */
    body.main-v8 .v8-info-row {
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        /* 2026-08-12 칸반100: 교육/기부 행은 설명글이 늘어나면 같이 늘어나야 함 */
        grid-template-rows: 333px minmax(173px, auto) minmax(173px, auto) 129px;
        gap: 20px;
        width: 100%;
        max-width: 904px;
        margin-left: auto;
        margin-right: auto;
        margin-top: 24px;   /* 2026-05-14: 퀵버튼 4개 카드와의 갭 24 */
    }
    body.main-v8 .v8-info-card--journal {
        grid-column: 1 / span 2;
        grid-row: 1;
        width: auto;
        height: 333px;
        min-height: 0;
    }
    body.main-v8 .v8-info-card--monthly {
        grid-column: 1;
        grid-row: 2 / span 2;
        width: auto;
        height: 366px;
        min-height: 0;
    }
    body.main-v8 .v8-info-card--education {
        grid-column: 2;
        grid-row: 2;
        width: auto;
        height: 173px;
        min-height: 0;
    }
    body.main-v8 .v8-info-card--donation {
        grid-column: 2;
        grid-row: 3;
        width: auto;
        height: 173px;
        min-height: 0;
    }
    body.main-v8 .v8-info-card--cta {
        grid-column: 1 / span 2;
        grid-row: 4;
        width: auto;
        height: 129px;
    }

    /* 학술지 본문 — 표지(147) + 좌·우 화살표(28×28) + 표지에서 좌우 12.5 거리 → body 너비 228
       (28 + 12.5 + 147 + 12.5 + 28 = 228, justify-content:space-between으로 균등 분배 시 gap 정확히 12.5) */
    /* 2026-07-31 칸반064: 시안 실측 — 표지 147×203, 카드 좌 116 / 상 96("학술지" 제목 아래).
       body = 화살표(28) + 여백 54 + 표지(147) + 여백 54 + 화살표(28) = 311, 하단 여백 34 (96+203+34=333) */
    /* 2026-08-01 칸반068: 가로형(표지 좌 / 정보 우) — 표지+화살표는 카드 좌측 절반의 중앙에 배치.
       left:34 + right:50% + margin:auto 로 좌측 영역 안에서 가운데 정렬 */
    body.main-v8 .v8-info-card--journal .v8-journal-body {
        left: 34px;
        right: 50%;
        margin: 0 auto;
        top: 96px;
        transform: none;
        width: 311px;
        max-width: 100%;
        height: 203px;
    }
    /* 학술지 표지 — 태블릿에서 147×200 */
    body.main-v8 .v8-info-card--journal .v8-journal-cover {
        width: 147px;
        height: 203px;
        flex: 0 0 147px;
    }
    body.main-v8 .v8-info-card--journal .v8-journal-cover img {
        width: 147px;
        height: 203px;
    }
    /* 2026-05-14: 학술지 카드 헤더 (제목 + plus 버튼) — 디자이너 시안
       - "학술지" 타이틀: 좌측 30, 상단 25, 폰트 26
       - "+" 버튼: 우측 30, 상단 34, 28×28
       head 박스를 0-height block으로 만들고 자식들을 카드 기준 absolute로 배치 */
    body.main-v8 .v8-info-card--journal .v8-info-card__head {
        display: block;
        margin-bottom: 0;
        height: 0;
    }
    body.main-v8 .v8-info-card--journal .v8-info-card__head h3 {
        position: absolute;
        left: 34px;
        top: 35px;
        font-size: 26px !important;
        line-height: 1.2;
        margin: 0;
    }
    body.main-v8 .v8-info-card--journal .v8-info-card__plus {
        position: absolute;
        right: 34px;
        top: 34px;
        width: 28px;
        height: 28px;
        /* 2026-05-14: 기존 icon-plus-blue.svg(59×59, 실제 원 40×40 + 드롭섀도 패딩)는 작게 보임 →
           동일 그라데이션의 28×28 풀 사이즈 SVG로 교체해서 보이는 원이 정확히 28×28 되도록 */
        background-image: url('/images/main-v8/icon-plus-blue-clean.svg');
        background-size: 28px 28px;
    }
    /* 2026-05-14: 학술지 표지 좌/우 prev/next 버튼 — 28×28 (시안) */
    body.main-v8 .v8-info-card--journal .v8-journal-nav {
        width: 28px;
        height: 28px;
        flex: 0 0 28px;   /* 2026-08-01 칸반068: 데스크톱 flex:0 0 36px 되돌림 */
    }
    body.main-v8 .v8-info-card--journal .v8-journal-nav .material-symbols-outlined {
        font-size: 18px;
    }

    /* 2026-05-14: 디자이너 시안 — 학술지 텍스트 블록 228 × 74
       - 좌우 30 (288 - 228 = 60 → 30씩)
       - 표지(top:95, height:200, end:295)와 텍스트 사이 29 거리: bottom = 428 - 30 - 74 = 324, 324 - 295 = 29 ✓
       - 각 li 18 height, 16 font, 10 gap (3*18 + 2*10 = 74) */
    /* 2026-08-01 칸반068: 정보 블록은 카드 우측 절반의 중앙 (표지 블록과 대칭) */
    body.main-v8 .v8-info-card--journal .v8-info-list {
        left: 50%;
        right: 34px;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
        width: auto;
        max-width: 374px;
        margin: 0 auto;
        height: auto;
    }
    body.main-v8 .v8-info-card--journal .v8-info-list li {
        height: 26px;
        line-height: 26px;
        font-size: 18px;
        margin: 0;
    }
    body.main-v8 .v8-info-card--journal .v8-info-list li + li {
        margin-top: 22px;
    }
    body.main-v8 .v8-info-card--journal .v8-info-list__label,
    body.main-v8 .v8-info-card--journal .v8-info-list__value {
        font-size: 18px;
        line-height: 26px;
    }
    /* 2026-05-14: 월간지 카드 — 디자이너 시안
       - 헤더: "월간지" font 26 / left 30 / top 35, "+" 28×28 / right 30 / top 34
       - 본문(.v8-monthly-body): 224 × 170, left 30 / right 30 / bottom 24
       - 표지(.v8-monthly-cover): 118 × 159 */
    body.main-v8 .v8-info-card--monthly .v8-info-card__head {
        display: block;
        margin-bottom: 0;
        height: 0;
    }
    body.main-v8 .v8-info-card--monthly .v8-info-card__head h3 {
        position: absolute;
        left: 34px;
        top: 35px;
        font-size: 26px !important;
        line-height: 1.2;
        margin: 0;
    }
    body.main-v8 .v8-info-card--monthly .v8-info-card__plus {
        position: absolute;
        right: 34px;
        top: 34px;
        width: 28px;
        height: 28px;
        background-image: url('/images/main-v8/icon-plus-blue-clean.svg');
        background-size: 28px 28px;
    }
    body.main-v8 .v8-info-card--monthly .v8-monthly-body {
        position: absolute;
        left: 34px;
        right: 34px;
        top: 100px;
        bottom: auto;
        height: 236px;
        flex: none;
    }
    /* 월간지 표지 — 태블릿 118×159 (디자이너 시안) */
    body.main-v8 .v8-monthly-cover {
        width: 175px;
        height: 236px;
        flex: 0 0 175px;
    }
    body.main-v8 .v8-monthly-cover img {
        width: 175px;
        height: 236px;
    }
    /* 2026-05-14: 월간지 텍스트 단락 — 디자이너 시안
       - 전체 블록 86 hug × 139 hug, body(170) 안에 상하 15.5 위치
       - li 1 (월간지명 label, 16): margin-bottom 6 → li 2 (값, 15)
       - li 2 → li 3 사이: 24 (단락 간 거리)
       - li 3 (최신권호 label, 16): margin-bottom 10 → li 4 (값, 15)
       - 마지막 값 "2026년 4월호"는 1줄로 (nowrap) */
    body.main-v8 .v8-monthly-body {
        align-items: center;  /* 본문 안 자식들(표지, 텍스트 단락) 세로 중앙 → 텍스트(139)는 170-139=31, 상하 15.5씩 자동 */
        overflow: visible;    /* 2026-05-14: 기본 overflow:hidden 풀어서 "2026년 4월호" nowrap text가 86 폭 초과해도 잘리지 않도록 */
    }
    body.main-v8 .v8-monthly-body .v8-info-list {
        width: 116px;
        flex: 0 0 116px;
        padding: 0;
        margin: 0;
        border-top: none;   /* 2026-05-14: 기본 룰(.v8-info-list)의 1px solid border-top 제거 — 월간지 단락 상단 잘려보이는 원인 */
    }
    body.main-v8 .v8-monthly-body .v8-info-list li {
        padding: 0;
        margin: 0;
    }
    body.main-v8 .v8-monthly-body .v8-info-list li:nth-child(1) {
        margin-bottom: 6px;
    }
    body.main-v8 .v8-monthly-body .v8-info-list li:nth-child(2) {
        margin-bottom: 24px;
    }
    body.main-v8 .v8-monthly-body .v8-info-list li:nth-child(3) {
        margin-bottom: 10px;
    }
    body.main-v8 .v8-info-card--monthly .v8-info-list__label {
        font-size: 16px;
        line-height: 1.2;   /* 2026-05-14: 1.4 → 1.2로 줄여 상단 여백 축소 (단락 합산 높이 139 spec에 맞춤) */
    }
    /* 2026-05-14: 값 폰트 15 — 기본 룰(.v8-info-card--monthly .v8-info-list__value-row .v8-info-list__value { font-size: 17 })가
       specificity 높아서 우선 적용되는 것 막기 위해 동일 selector 사용 */
    body.main-v8 .v8-info-card--monthly .v8-info-list__value-row .v8-info-list__value {
        font-size: 15px;
        line-height: 1.4;
    }
    /* 최신권호 값(2026년 4월호) — 1줄 유지 (86 폭 초과해도 wrap 안 함) */
    body.main-v8 .v8-monthly-body .v8-info-list li:last-child .v8-info-list__value {
        white-space: nowrap;
    }

    /* 2026-08-12 칸반100: 제목·설명을 절대배치 → 흐름 배치로 환원.
       절대배치면 설명이 3줄이 돼도 카드가 자라지 않아 overflow:hidden 에 잘렸다.
       시안 좌표(제목 좌 34 / 상 40, 설명 상 88)는 padding + margin 으로 동일하게 재현한다. */
    body.main-v8 .v8-info-card--education,
    body.main-v8 .v8-info-card--donation {
        padding: 40px 34px 33px;
        padding-right: calc(40% + 12px);
    }
    body.main-v8 .v8-info-card--education .v8-info-card__head,
    body.main-v8 .v8-info-card--donation .v8-info-card__head {
        display: block;
        margin-bottom: 17px;
        height: auto;
    }
    body.main-v8 .v8-info-card--education .v8-info-card__head h3,
    body.main-v8 .v8-info-card--donation .v8-info-card__head h3 {
        position: static;
        font-size: 26px !important;
        line-height: 1.2;
        margin: 0;
    }
    body.main-v8 .v8-info-card--education .v8-info-card__plus,
    body.main-v8 .v8-info-card--donation .v8-info-card__plus {
        position: absolute;
        right: 30px;
        top: 34px;
        width: 28px;
        height: 28px;
        background-image: url('/images/main-v8/icon-plus-blue-clean.svg');
        background-size: 28px 28px;
    }
    /* 기부·후원 일러스트 — 태블릿 168×122, 우 10 / 하 14 (디자이너 시안) */
    body.main-v8 .v8-donation-illust {
        width: 40%;
        max-width: 178px;
        height: 133px;
        right: 0;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
    body.main-v8 .v8-info-card--donation .v8-donation-illust {
        height: 137px;
    }
    /* 기부·후원 설명글 — 태블릿 font 16 (폭은 카드 padding-right 가 결정) */
    body.main-v8 .v8-info-card--education .v8-donation-desc,
    body.main-v8 .v8-info-card--donation .v8-donation-desc {
        position: static;
        max-width: none;
        font-size: 16px;
        line-height: 1.6;
        padding-right: 0;
        margin: 0;
    }

    /* CTA — 태블릿 spec: 1번 270×69 / 2번 235×69
       2026-07-31 칸반067: 카드 폭이 592 → 904 로 넓어져 좌측으로 몰리던 문제 → 좌우 균등 배치 */
    body.main-v8 .v8-info-card--cta {
        justify-content: flex-start;
        padding: 24px;
        gap: 0;
    }
    /* 2026-07-31 칸반067: 카드를 좌우 절반으로 나눠 각 영역 정중앙에 배치
       (고정폭 270/235 + flex-start 조합이라 904 카드에서 좌측으로 몰리던 문제) */
    body.main-v8 .v8-cta-item {
        flex: 1 1 0;
        width: auto;
        /* 2026-08-01 칸반068: 데스크톱 max-width:380 이 상속되면 flex:1 1 0 이 무력화돼
           항목이 380 에서 멈추고 좌측으로 몰림 → 태블릿에선 해제 */
        max-width: none;
        height: 69px;
        padding: 0;
        min-height: 0;
        justify-content: center;
        gap: 20px;
    }
    body.main-v8 .v8-cta-icon {
        width: 72px;
        height: 64px;
    }
    body.main-v8 .v8-cta-icon img {
        width: 72px;
        height: 64px;
    }
    body.main-v8 .v8-cta-title {
        font-size: 20px;
    }
    body.main-v8 .v8-cta-link {
        font-size: 16px;
    }
}

/* 모바일(<=767) — 1열 collapse + 학술지 절대 위치 해제, CTA 세로 스택 등 */
@media (max-width: 767px) {
    /* 2026-08-12 칸반100: 1열이므로 grid 대신 flex column.
       grid 로 두면 행 높이 계산에서 카드의 % padding(일러스트 자리) 이 무시돼
       교육/기부 카드 높이가 과소평가되고 설명 3번째 줄이 overflow:hidden 에 잘렸다(실측 2px). */
    body.main-v8 .v8-info-row {
        display: flex;
        flex-direction: column;
    }
    body.main-v8 .v8-info-card--journal,
    body.main-v8 .v8-info-card--monthly,
    body.main-v8 .v8-info-card--education,
    body.main-v8 .v8-info-card--donation,
    body.main-v8 .v8-info-card--cta {
        grid-column: 1;
        grid-row: auto;
        height: auto;
        min-height: 0;
        /* 2026-05-14: 태블릿(@1024) 룰의 width:288/284/592 고정이 모바일에서도 유지되던 문제 수정 */
        width: 100%;
        max-width: 100%;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 학술지 카드 342 fill × 384
       2026-07-31 칸반064: 표지(하단 270)와 정보 단락 간격이 14 로 붙어 보여 카드 396 으로 확장 → 간격 28 */
    body.main-v8 .v8-info-card--journal {
        height: 396px;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 학술지 헤더
       "학술지" 타이틀: font 22, 좌 20, 상 26 / "+" 버튼: 26×26, 우 20, 상 24
       (h3·+버튼은 @1024 룰에서 이미 position:absolute — 모바일에선 값만 덮어씀) */
    body.main-v8 .v8-info-card--journal .v8-info-card__head h3 {
        left: 20px;
        top: 26px;
        font-size: 22px !important;
        line-height: 1;   /* 2026-05-14: line-height 여백 때문에 글자가 26보다 내려가 보이던 문제 — 박스를 글자에 밀착 */
    }
    body.main-v8 .v8-info-card--journal .v8-info-card__plus {
        right: 20px;
        top: 24px;
        width: 26px;
        height: 26px;
        background-size: 26px 26px;
    }

    /* 학술지 본문/리스트 — 절대 위치 해제, 흐름 배치 */
    body.main-v8 .v8-info-card--journal .v8-journal-body {
        position: static;
        transform: none;
        margin: 16px auto 0;
        width: 100%;
        max-width: 100%;
        height: auto;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 학술지 표지 148 × 200,
       카드 기준 절대 배치: 좌우 97 / 상 70 / 하 114 (97+148+97=342, 70+200+114=384) */
    body.main-v8 .v8-info-card--journal .v8-journal-cover {
        position: absolute;
        left: 97px;
        top: 70px;
        width: 148px;
        height: 200px;
        max-width: 148px;
        min-width: 0;
        flex: none;
    }
    body.main-v8 .v8-info-card--journal .v8-journal-cover img {
        width: 148px;
        height: 200px;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 학술지 좌우 화살표 버튼 26×26,
       카드 기준 절대 배치: prev 좌 20 / next 우 20, 상 157 — 표지와 세로 중앙 정렬 */
    body.main-v8 .v8-info-card--journal .v8-journal-nav {
        position: absolute;
        top: 157px;
        width: 26px;
        height: 26px;
    }
    body.main-v8 .v8-info-card--journal .v8-journal-nav--prev {
        left: 20px;
    }
    body.main-v8 .v8-info-card--journal .v8-journal-nav--next {
        right: 20px;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 학술지 하단 텍스트 단락은 카드 하단 24에 고정 (좌우는 카드 패딩 24)
       2026-07-31 칸반064: 태블릿(≤1024) 가로형 규칙의 width:374 / top:50% / transform 이 모바일까지
       상속돼 정보 리스트가 카드 밖으로 나가고 표지와 겹치던 문제 → 여기서 전부 되돌림 */
    body.main-v8 .v8-info-card--journal .v8-info-list {
        position: absolute;
        left: 24px;
        right: 24px;
        top: auto;
        bottom: 24px;
        transform: none;
        width: auto;
        height: auto;
        margin: 0;
        padding: 0;
    }
    /* 태블릿 li 규격(26px + 22 gap)도 모바일에선 되돌림 */
    body.main-v8 .v8-info-card--journal .v8-info-list li {
        height: 18px;
        line-height: 18px;
        font-size: 16px;
        margin: 0;
    }
    body.main-v8 .v8-info-card--journal .v8-info-list li + li {
        margin-top: 10px;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 학술지 하단 텍스트(라벨/값) 16px */
    body.main-v8 .v8-info-card--journal .v8-info-list__label,
    body.main-v8 .v8-info-card--journal .v8-info-list__value {
        font-size: 16px;
        line-height: 18px;
    }

    /* 2026-05-14: 디자이너 시안 — 모바일 월간지 카드 342 fill × 260 */
    body.main-v8 .v8-info-card--monthly {
        height: 260px;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 월간지 헤더
       "월간지" 타이틀: font 22, 좌 20, 상 26 / "+" 버튼: 26×26, 우 20, 상 24
       head는 0-height block, h3·+버튼은 카드 기준 절대 배치 (학술지 카드와 동일 패턴) */
    body.main-v8 .v8-info-card--monthly .v8-info-card__head {
        display: block;
        height: 0;
        margin-bottom: 0;
    }
    body.main-v8 .v8-info-card--monthly .v8-info-card__head h3 {
        position: absolute;
        left: 20px;
        top: 26px;
        font-size: 22px !important;
        line-height: 1;   /* 2026-05-14: line-height 여백 때문에 글자가 26보다 내려가 보이던 문제 — 박스를 글자에 밀착 */
    }
    body.main-v8 .v8-info-card--monthly .v8-info-card__plus {
        position: absolute;
        right: 20px;
        top: 24px;
        width: 26px;
        height: 26px;
        background-size: 26px 26px;
    }
    body.main-v8 .v8-info-card--monthly .v8-monthly-body {
        position: static;
        height: auto;
        flex: 0 0 auto;
        overflow: visible;
        align-items: center;
        gap: 20px;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 월간지 표지 126 × 170,
       카드 기준 절대 배치: 좌 20 / 상 66 / 하 24 (66+170+24=260) */
    body.main-v8 .v8-monthly-cover,
    body.main-v8 .v8-monthly-cover img {
        width: 126px;
        height: 170px;
    }
    body.main-v8 .v8-monthly-cover {
        position: absolute;
        left: 20px;
        top: 66px;
        flex: none;
    }
    body.main-v8 .v8-monthly-body .v8-info-list {
        width: auto;
        flex: 1;
        min-width: 0;
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 월간지 텍스트 4행, 각 li를 카드 기준 절대 배치 (우측 20 정렬)
       1 월간지명 상94.5 / 2 더 행복한 건강생활 상117.5 / 3 최신권호 상165.5 / 4 2026년 4월호 상193.5 */
    body.main-v8 .v8-monthly-body .v8-info-list li {
        position: absolute;
        right: 20px;
        margin: 0;
        padding: 0;
    }
    body.main-v8 .v8-monthly-body .v8-info-list li:nth-child(1) {
        top: 94.5px;
    }
    body.main-v8 .v8-monthly-body .v8-info-list li:nth-child(2) {
        top: 117.5px;
    }
    body.main-v8 .v8-monthly-body .v8-info-list li:nth-child(3) {
        top: 165.5px;
    }
    body.main-v8 .v8-monthly-body .v8-info-list li:nth-child(4) {
        top: 193.5px;
    }

    /* CTA — 세로 스택, 카드 222 height (342 × 222 hug spec) */
    body.main-v8 .v8-info-card--cta {
        flex-direction: column;
        justify-content: space-around;  /* 두 항목 사이 공간 균등 */
        padding: 24px;
        height: 222px;
        min-height: 222px;
    }
    body.main-v8 .v8-info-card--cta .v8-cta-item:nth-child(1),
    body.main-v8 .v8-info-card--cta .v8-cta-item:nth-child(2) {
        width: 100%;
        flex-basis: auto;
    }
    body.main-v8 .v8-cta-item + .v8-cta-item {
        margin-left: 0;
        padding-top: 0;
        border-top: none;  /* 모바일에서 CTA 항목 간 구분선 제거 */
    }
    /* 2026-05-14: 디자이너 시안 — 모바일 CTA 아이콘 78×70 (@1024 룰의 72×64 덮어씀) */
    body.main-v8 .v8-cta-icon,
    body.main-v8 .v8-cta-icon img {
        width: 78px;
        height: 70px;
    }
    /* 2026-05-15: 디자이너 시안 — 모바일 CTA 타이틀 18 / "바로가기" 링크 15,
       타이틀-바로가기 간격 16
       2026-05-18: 상속 line-height(~1.8)의 half-leading 때문에 시각 간격이 29px로 보이던 문제 —
       타이틀/링크 모두 line-height:1로 박스를 글자에 밀착시켜 margin-bottom 16이 그대로 보이게 함 */
    body.main-v8 .v8-cta-title {
        font-size: 18px;
        line-height: 1;
        margin-bottom: 16px;
    }
    body.main-v8 .v8-cta-link {
        font-size: 15px;
        line-height: 1;
    }
    /* 2026-05-15: 디자이너 시안 — 모바일 CTA 아이콘-텍스트 간격 20 */
    body.main-v8 .v8-cta-item {
        gap: 20px;
    }

    /* 2026-05-14: 디자이너 시안 — 모바일 기부·후원 카드 342 fill × 260
       2026-07-31 칸반064: 교육 센터 카드 동일 규격 */
    /* 2026-08-12 칸반100: 높이 137 고정 → 최소값. 좁은 폰(320/360)에서 설명이 3줄이 되면
       고정 높이 + overflow:hidden 이라 글자가 잘렸다. 좌우 여백은 시안대로 20. */
    body.main-v8 .v8-info-card--education,
    body.main-v8 .v8-info-card--donation {
        height: auto;
        min-height: 137px;
        padding: 22px 20px;
        padding-right: calc(38% + 12px);
    }
    /* 헤더 — "기부·후원" font 22 / 좌 20 / 상 22 (흐름 배치, 설명과의 간격 14) */
    body.main-v8 .v8-info-card--education .v8-info-card__head,
    body.main-v8 .v8-info-card--donation .v8-info-card__head {
        margin-bottom: 14px;
    }
    body.main-v8 .v8-info-card--education .v8-info-card__head h3,
    body.main-v8 .v8-info-card--donation .v8-info-card__head h3 {
        font-size: 22px !important;
    }
    body.main-v8 .v8-info-card--education .v8-info-card__plus,
    body.main-v8 .v8-info-card--donation .v8-info-card__plus {
        right: 20px;
        top: 24px;
        width: 26px;
        height: 26px;
        background-size: 26px 26px;
    }
    /* 일러스트 — 카드 폭의 38% (390px 폰에서 약 128, 320px 폰에서 약 101) */
    body.main-v8 .v8-donation-illust {
        display: block;
        width: 38%;
        max-width: 148px;
        height: 110px;
        top: 50%;
        transform: translateY(-50%);
        bottom: auto;
        right: 0;
        left: auto;
    }
    body.main-v8 .v8-info-card--donation .v8-donation-illust {
        height: 113px;
    }
    /* 설명글 — font 15 (폭은 카드 padding-right 가 결정) */
    body.main-v8 .v8-info-card--education .v8-donation-desc,
    body.main-v8 .v8-info-card--donation .v8-donation-desc {
        position: static;
        max-width: none;
        margin: 0;
        font-size: 15px;
        line-height: 1.6;
    }
}

/* 태블릿(768~1024) — bg-tablet.svg. 게시판 2열 구간(≥960) 기준 988 */
@media (max-width: 1024px) {
    body.main-v8 #wrap::before {
        height: 988px;
        background-image: url('/images/main-v8/bg-tablet.svg');
    }
}
/* 게시판이 1열로 떨어지는 구간(768~959) — 카드가 위로 올라오므로 배경도 함께 축소 */
@media (max-width: 959px) {
    body.main-v8 #wrap::before {
        height: 900px;
    }
}
/* 모바일(≤767) — bg-small.svg, 첫 게시판 카드 67% 지점 */
@media (max-width: 767px) {
    body.main-v8 #wrap::before {
        height: 847px;
        background-image: url('/images/main-v8/bg-small.svg');
    }
}

/* 모바일 헤더 — 햄버거/로고 사이즈 축소 + 헤더 높이/히어로 간격 조정 (디자이너 시안: 최상단 → 히어로 윗변 94px) */
@media (max-width: 767px) {
    body.main-v8 #header,
    body.main-v8 #header .head .inner {
        height: 70px;
    }
    body.main-v8 .vis_zone {
        margin-top: 24px;
    }
    /* 햄버거 버튼 — 디자이너 시안: 40×40, 우측 24, 상하 15 (70 - 15*2 = 40).
       .head/.head .inner/.pc_none 모두 positioning 해제, inner padding도 0으로 풀고 .mnu가 #header 직속 기준 absolute right:24.
       로고는 inner padding 대신 자체 margin-left:24로 좌측 24 위치 유지. */
    body.main-v8 #header .head,
    body.main-v8 #header .head .inner,
    body.main-v8 #header .head .pc_none {
        position: static !important;
    }
    body.main-v8 #header .head .inner {
        padding: 0 !important;
        max-width: none !important;
    }
    body.main-v8 #header .head .logo {
        margin-left: 24px !important;
    }
    body.main-v8 #header .head .mnu {
        position: absolute !important;
        right: 24px !important;
        top: 15px !important;
        left: auto !important;
        bottom: auto !important;
        transform: none !important;
        width: 40px !important;
        height: 40px !important;
        background-size: 40px 40px !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body.main-v8 #header .head .logo img {
        max-width: 123px;
        max-height: 32px;
        height: auto;
        width: auto;
    }
    /* 햄버거 메뉴 켜진 상태 — 헤더 흰색 배경 고정 + 로고 자연색 (touch hover 풀려서 transparent로 복귀하는 현상 방지) */
    html.navOn body.main-v8 #header {
        background: #ffffff !important;
    }
    html.navOn body.main-v8 #header .head .logo img {
        filter: none;
    }
    /* 햄버거 → 닫기(X) 아이콘 토글. 클릭 시 .mnu 토글이 navOn 해제하므로 동작은 기존대로 */
    html.navOn body.main-v8 #header .head .mnu {
        background-image: url('/images/main-v8/hamburger-close.svg');
    }
    /* 햄버거 메뉴 패널 — 헤더(70px) 바로 아래부터 시작하도록 위치 보정 (layout.css 기본값 60px 대비) */
    body.main-v8 #nav {
        top: 70px;
        height: calc(100% - 70px);
    }
}

/* 모바일 푸터 — 로고/내용 가운데 정렬, 정책 링크 가로 배치 */
@media (max-width: 767px) {
    body.main-v8 #footer .foot_logo {
        text-align: center;
    }
    body.main-v8 #footer .foot_logo img {
        margin: 0 auto;
    }
    body.main-v8 #footer .copy {
        text-align: center;
    }
    body.main-v8 #footer .copy p,
    body.main-v8 #footer .copy .copyright {
        justify-content: center;
        text-align: center;
    }
    body.main-v8 #footer .foot_sub_link {
        text-align: center;
    }
    body.main-v8 #footer .foot_sub_link ul {
        flex-direction: row !important;
        flex-wrap: wrap;
        justify-content: center !important;
        align-items: center !important;
        gap: 16px;
    }
}

/* 2026-07-03: v8 그리드 메가메뉴 상단선이 GNB 밑선과 어긋나 보이던 문제 (최소 픽스).
   - column 드롭다운(.gnb>li>ul, top:100%)은 원래 딱 맞음(밑선 하나).
   - grid(.mega-dropdown)는 ①layout.css 기본 top:56px 라 v8 nav(50px) 밑으로 떠 있었고
     ②자체 border-top(회색선)까지 그려 GNB 밑선과 2겹으로 어긋나 보였음.
   해결: top 을 column과 동일 위치(50px)로 내리고 + 메가 자체 상단선 제거 → grid = column.
   (box-shadow/subpage 리팩터는 롤아웃 깜빡임·서브 진한선 부작용 있어 전량 원복, 이 두 줄만 유지) */
@media all and (min-width: 1025px) {
    body.main-v8 .mega-dropdown { top: 50px; border-top: none; }
}