/* =====================================================================
   main-v10.css — 메인페이지 버전10 (한국복지상담교육학회)
   2026-06-29: kawc.kr 형태 + 무스크롤 1뷰포트 레이아웃
   - 모든 선택자는 .v10-page / body.main-v10 스코프 (v1~v9 무영향)
   - 데스크톱(≥1025px): #wrap=100vh 고정, 히어로밴드가 잔여공간 흡수 → 무스크롤
   - 모바일(<1025px): 일반 문서 흐름 + 스크롤
   ===================================================================== */

/* ── 스코프 토큰 ───────────────────────────────────────────────── */
.v10-page {
  --v10-accent: var(--site-accent, #2f6bd8);  /* 2026-07-04: 강조색 config(--site-accent) 연동. 미설정 시 기본 #2f6bd8. 텍스트링크·더보기·퀵버튼 hover 공통 */
  --v10-accent-d: #234e9e;
  --v10-accent-soft: #eef4fc;
  --v10-ink: #1f2733;
  --v10-sub: #5b6573;
  --v10-line: #e3e8ef;
  --v10-max: 1400px;
  --v10-gap: 18px;

  box-sizing: border-box;
  width: 100%;
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  color: var(--v10-ink);
}
.v10-page *,
.v10-page *::before,
.v10-page *::after { box-sizing: border-box; }

/* 섹션 공통: 중앙 정렬 컨테이너 */
.v10-page > section {
  width: 100%;
  max-width: var(--v10-max);
  margin: 0 auto;
  padding: 0 20px;
}

/* =====================================================================
   Row 3: 퀵버튼(좌) + 히어로(우)
   ===================================================================== */
.v10-hero-band {
  display: flex;
  gap: var(--v10-gap);
  align-items: stretch;
  min-height: 340px;   /* 콘텐츠 기반 고정 높이 (뷰포트 무관). 퀵 3개면 콘텐츠가 더 키움 */
}

/* ── 좌측 퀵버튼 ── */
.v10-quick {
  flex: 0 0 300px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* 버튼이 컬럼 높이를 균등 분할해 꽉 채움 (2개면 절반씩, 3개면 1/3씩 — 빈 공간 없음) */
.v10-quick-btn {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  /* 2026-07-06: 배경/테두리색 어드민 설정(--v10-quick-*). 미설정 시 폴백 = 기존 룩 */
  border: 1px solid var(--v10-quick-border, var(--v10-line));
  border-radius: 14px;
  background: var(--v10-quick-bg, #fff);
  text-decoration: none;
  color: inherit;
  transition: border-color .18s ease;
}
/* 2026-07-04: hover 시 위로 뜨는 transform + box-shadow 제거, 테두리 색만 변경 */
.v10-quick-btn:hover {
  border-color: var(--v10-accent);
}
.v10-quick-ico {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: var(--v10-accent-soft);
  color: var(--v10-accent);
}
.v10-quick-ico svg { width: 26px; height: 26px; }
.v10-quick-txt { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.v10-quick-txt strong {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v10-ink);
}
.v10-quick-txt em {
  font-style: normal;
  font-size: 13px;
  line-height: 1.45;
  color: var(--v10-sub);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.v10-quick-empty { opacity: .7; }

/* ── 우측 히어로 ── */
.v10-hero {
  flex: 1 1 auto;
  position: relative;
  min-width: 0;
  min-height: 340px;          /* 히어로 고정 비례 (퀵이 짧아도 충분한 높이 유지) */
  border-radius: 16px;
  overflow: hidden;
  background-color: #d8e2f0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.v10-hero-ph {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #7e8aa0;
  font-size: 15px;
}
/* ── 히어로 = index-v4.ejs 와 동일 (이미지 스와이퍼 + heroTextV2 오버레이) ──
   어드민 히어로 이미지·heroTextV2(폰트/위치/색/굵기/그라데이션/슬라이드효과) 1:1 반영.
   CSS 규칙은 main-v4.css 와 일치. 세부 폰트크기/색/그림자는 config 인라인 스타일. */
/* 스와이퍼: .v10-hero 박스를 꽉 채움, 이미지 cover */
.v10-hero .heroSwiper { position: absolute; inset: 0; width: 100%; height: 100%; }
.v10-hero .heroSwiper .swiper-slide { overflow: hidden; }
.v10-hero .heroSwiper .swiper-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.v10-hero .hero-pagination { position: absolute; bottom: 12px; left: 0; right: 0; z-index: 5; text-align: center; }
.v10-hero .swiper-pagination-bullet { background: #fff; opacity: .6; }
.v10-hero .swiper-pagination-bullet-active { opacity: 1; }

/* 오버레이 텍스트 (main-v4.css 규칙과 동일) */
.v10-hero .hero-overlay-v4 { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.v10-hero .hero-overlay-v4 .container-wrapper {
  position: relative;
  width: 100%; height: 100%;
  max-width: none; margin: 0; padding: 0;
  display: flex; align-items: center;
}
.v10-hero .hero-overlay-v4 .container-wrapper.hero-valign-top    { align-items: flex-start; }
.v10-hero .hero-overlay-v4 .container-wrapper.hero-valign-center { align-items: center; }
.v10-hero .hero-overlay-v4 .container-wrapper.hero-valign-bottom { align-items: flex-end; }
.v10-hero .hero-text-v4 { width: 100%; }
.v10-hero .hero-text-v4.hero-align-left   { text-align: left; }
.v10-hero .hero-text-v4.hero-align-center { text-align: center; }
.v10-hero .hero-text-v4.hero-align-right  { text-align: right; }
/* 슬라이드별 텍스트 전환 (활성만 표시) — main-v4.css 와 동일 */
.v10-hero .hero-text-v4.hero-text-slide {
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: center;
  opacity: 0; visibility: hidden;
  transition: opacity .5s ease-in-out, visibility .5s ease-in-out;
}
.v10-hero .hero-text-v4.hero-text-slide.active { opacity: 1; visibility: visible; }
.v10-hero .hero-text-v4.hero-text-slide.hero-align-left   { align-items: flex-start; }
.v10-hero .hero-text-v4.hero-text-slide.hero-align-center { align-items: center; }
.v10-hero .hero-text-v4.hero-text-slide.hero-align-right  { align-items: flex-end; }
/* 세로 정렬(verticalAlign) 실제 반영 — 기본 center 하드코딩을 컨테이너 valign 으로 override.
   (v4 는 이 부분이 center 고정이라 verticalAlign 이 안 먹지만, v10 은 어드민 설정대로 동작) */
.v10-hero .hero-overlay-v4 .container-wrapper.hero-valign-top    .hero-text-slide { justify-content: flex-start; }
.v10-hero .hero-overlay-v4 .container-wrapper.hero-valign-center .hero-text-slide { justify-content: center; }
.v10-hero .hero-overlay-v4 .container-wrapper.hero-valign-bottom .hero-text-slide { justify-content: flex-end; }
.v10-hero .hero-title-v4 {
  font-size: clamp(28px, 5vw, 56px);
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 12px;
  word-break: keep-all;
}
/* 2026-04-13 굵기 혼합: <b>/<strong> 만 굵은 두께 (--hero-bold-weight 인라인 주입) */
.v10-hero .hero-title-v4 b,
.v10-hero .hero-title-v4 strong { font-weight: var(--hero-bold-weight, 800); }
.v10-hero .hero-desc-v4 {
  font-size: clamp(14px, 2.5vw, 24px);
  font-weight: 400;
  line-height: 1.5;
  word-break: keep-all;
}

/* =====================================================================
   Row 4: 게시판 3개
   ===================================================================== */
.v10-boards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--v10-gap);
}
.v10-board {
  /* 2026-07-06 배경/테두리색 어드민 설정. 2026-07-08 게시판별(--bd-*) → 전역(--v10-board-*) → 기본 폴백.
     --bd-border 는 자식(밑줄 head, 더보기 more)에 상속되어 함께 적용됨. */
  border: 1px solid var(--bd-border, var(--v10-board-border, var(--v10-line)));
  border-radius: 14px;
  background: var(--bd-bg, var(--v10-board-bg, #fff));
  padding: 12px 18px 8px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.v10-board-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 8px;
  margin-bottom: 4px;
  /* 2026-07-08: 밑줄 = 테두리색(게시판별→전역). 미설정 시 기존 ink 유지. 두께 2px→1px */
  border-bottom: 1px solid var(--bd-border, var(--v10-board-border, var(--v10-ink)));
}
.v10-board-head h3 {
  margin: 0;
  /* base.css 의 h3{font-size:var(--font-h3)!important} 를 이기려면 !important 필요 */
  font-size: 17px !important;
  line-height: 1.3 !important;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--v10-ink);
}
/* 2026-07-03: 게시판 제목 앞 아이콘 (어드민 SVG 라이브러리에서 선택) */
.v10-board-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.v10-board-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  color: var(--v10-ink); /* 인라인 SVG(currentColor) tint */
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.v10-board-icon svg { width: 100%; height: 100%; display: block; }
.v10-board-icon--img { background-size: contain; background-repeat: no-repeat; background-position: center; }
/* 2026-07-03: 더보기 = 라운드(pill) 버튼 (텍스트 + plus SVG). 라벨 없으면 EJS에서 미출력. */
.v10-board-more {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  color: var(--v10-sub);
  text-decoration: none;
  padding: 5px 11px;
  /* 2026-07-08: 더보기 테두리 = 게시판 테두리색(게시판별→전역→기본) */
  border: 1px solid var(--bd-border, var(--v10-board-border, var(--border-light)));
  border-radius: 999px;
  /* 2026-07-08: 일반 배경 = 카드 배경색(흰 박스 대신 카드에 녹는 아웃라인 pill). 오버 시 테두리색으로 채워짐 */
  background: var(--bd-bg, var(--v10-board-bg, #fff));
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.v10-board-more:hover {
  /* 2026-07-08: 오버 시 게시판 강조색(테두리색)으로 채우고, 텍스트는 대비색(--bd-more-text, EJS서 밝기계산). ＋아이콘은 currentColor라 자동. */
  background: var(--bd-border, var(--v10-board-border, var(--v10-accent)));
  border-color: var(--bd-border, var(--v10-board-border, var(--v10-accent)));
  color: var(--bd-more-text, #fff);
}
.v10-board-more-plus { flex-shrink: 0; display: block; }
.v10-board-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.v10-board-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  font-size: 14px;
  border-bottom: 1px dotted var(--v10-line);
}
.v10-board-list li:last-child { border-bottom: 0; }
.v10-board-list li .v10-post-title {
  flex: 1 1 auto;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #38414f;
  text-decoration: none;
  position: relative;
  padding-left: 12px;
}
.v10-board-list li .v10-post-title::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  width: 4px; height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: var(--v10-accent);
}
.v10-board-list li .v10-post-title:hover { color: var(--v10-accent); text-decoration: underline; }
.v10-board-list li .v10-post-date {
  flex: 0 0 auto;
  font-size: 12px;
  color: #9aa3b2;
  font-variant-numeric: tabular-nums;
}
.v10-board-list li.v10-board-state {
  justify-content: center;
  color: #9aa3b2;
  border-bottom: 0;
  padding: 18px 0;
}

/* =====================================================================
   Row 5: 롤링배너 (관련 사이트)
   ===================================================================== */
/* 테두리 박스 없는 '열린' 관련사이트 스트립 (border/배경/라운드 제거).
   좌우 여백은 .v10-page > section 의 거터(20px)를 그대로 받아 다른 섹션과 정렬. */
.v10-rolling {
  display: flex;
  align-items: center;
  gap: 20px;
}
.v10-rolling-label {
  flex: 0 0 auto;
  padding: 8px 18px;
  background: #2c3340;
  color: #fff;
  border-radius: 8px;
}
.v10-rolling-label strong { font-size: 13px; font-weight: 600; white-space: nowrap; }
.v10-rolling-viewport {
  flex: 1 1 auto;
  overflow: hidden;
  position: relative;
  min-width: 0;
  /* 양 끝 로고가 딱 잘려 보이지 않도록 페이드 마스크 */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
}
.v10-rolling-track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: v10-marquee 32s linear infinite;
}
.v10-rolling:hover .v10-rolling-track { animation-play-state: paused; }
.v10-rolling-item {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  padding: 12px 30px;
  height: 64px;
}
.v10-rolling-item img {
  max-height: 40px;
  max-width: 180px;
  width: auto;
  object-fit: contain;
  filter: grayscale(100%);
  opacity: .78;
  transition: filter .2s ease, opacity .2s ease;
}
.v10-rolling-item:hover img { filter: grayscale(0); opacity: 1; }
@keyframes v10-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* =====================================================================
   레이아웃 철학(2026-06-29 변경): 고정비율 + 정상여백 (레퍼런스 방식)
   - 100vh 강제/overflow 클리핑/히어로 flex-grow 신축 전부 제거 → 일반 문서 흐름.
   - 행 높이는 콘텐츠 기반 고정, 행 간 상하 여백 정상.
   - 전체 컴포지션이 표준 데스크톱(≈1080p)에서 1화면에 맞게 컴팩트.
     매우 낮은 화면에선 자연 스크롤(레퍼런스 kawc.kr 도 동일).
   ===================================================================== */
/* 섹션 간격: .v10-page 를 flex column + gap 으로 통일.
   (이전엔 .v10-page>section 의 'margin:0 auto' 가 특이성으로 각 섹션 margin-top 을 덮어
    섹션 사이 간격이 0 으로 죽었음 → flex gap 으로 해결, 붕괴/특이성 무관)
   GNB→S1 = padding-top, S1→S2 = gap, S2→S3 = gap, S3→풋터 = padding-bottom. 모두 24px.
   무스크롤은 "풋터 컴팩트 + 표준 데스크톱" 전제(레퍼런스 kawc.kr 동일). */
.v10-page {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px 0;
}

/* =====================================================================
   Sticky footer (2026-07-06) — 메인 내용이 짧아도 푸터를 뷰포트 하단에 고정.
   #wrap 을 flex column + min-height:100vh 로 만들고 본문(.v10-page)이 잔여공간을
   흡수(flex:1) → 푸터 아래 빈 여백 제거. box-sizing:border-box 로 #wrap padding-top
   (헤더 높이 오프셋)이 100vh 안에 포함돼 불필요한 스크롤 방지.
   #header 는 position:absolute 라 flex 흐름 밖 → 레이아웃 영향 없음.
   body.main-v10 스코프라 다른 버전/학회 무영향. ===================================================================== */
body.main-v10 #wrap {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  box-sizing: border-box;
}
body.main-v10 #wrap > .v10-page { flex: 1 0 auto; }
body.main-v10 #wrap > #footer-placeholder { flex-shrink: 0; }

/* =====================================================================
   헤더 정렬 (v10 한정) — 로고/유틸을 head 행에 세로중앙.
   기존 layout.css 의 로고 top:33px 하드코딩(46px 로고 가정)을 대체 →
   어드민에서 로고 높이를 바꿔도 항상 head 행 중앙에 정위치.
   body.main-v10 스코프라 다른 버전 헤더 무영향.
   ===================================================================== */
/* 로고 행 100→80px (v10). 헤더 총높이 158→138px(=80 head + 58 nav)이므로
   --header-height 도 동기화 → 새로고침 시 본문 layout shift 방지 (CLAUDE.md 헤더 정합성). */
body.main-v10 { --header-height: 138px; }
body.main-v10 #header .head .inner { height: 80px; }
body.main-v10 #header .head .logo {
  top: 50%;
  bottom: auto;
  transform: translateY(-50%);
}
body.main-v10 #header .head .logo img { display: block; }
/* 유틸(언어/로그인/회원가입)도 head 행 세로중앙.
   .header-util 은 전역에서 flex-direction:column 이므로 justify-content(=세로축)만 center 로.
   (flex-end 로 주면 세로로 아래로 밀려 '메뉴가 아래로 치우치는' 현상 발생) */
body.main-v10 #header .head .header-util {
  justify-content: center;
  /* 전역 .header-util 의 gap:20px 제거 → 빈 .top + gap 때문에 .bottom 이 아래로 밀리던 것 해소 */
  gap: 0;
}
/* 2026-07-03: GNB 드롭다운(컬럼) 높이 통일 — height:auto 로 두면 항목 수에 따라
   열마다 높이가 달라져 hover 배경이 '메뉴가 있는 만큼만' 채워지는 문제.
   전역 패널 높이(340px)를 min-height 로 고정해 모든 열의 hover 배경이 열 전체를
   덮도록 통일. 항목이 340px 를 넘는 메뉴는 그대로 늘어남(min-height 라 clip 없음). */
body.main-v10 #header .nav .gnb > li > ul {
  min-height: 340px;
  padding-bottom: 14px;
}
/* navOn 시 헤더(드롭다운 배경 패널) 높이를 내용에 맞춤.
   전역 .navOn #header{height:520px} 는 158px 헤더 기준이라, 138px 헤더 + 내용보다 과도하게 김
   → 헤더(138) + 드롭다운 최대(≈340) = 478px 로 맞춰 '배경≠내용' 격차 제거.
   navOn 은 html 에 붙으므로 .navOn body.main-v10 형태로 선택. */
.navOn body.main-v10 #header { height: 478px; }

/* =====================================================================
   풋터 컴팩트 (v10 한정) — 전역 풋터 내부 여백/줄간격 축소.
   body.main-v10 스코프라 다른 버전/학회 풋터엔 영향 없음.
   ===================================================================== */
body.main-v10 #footer { padding: 12px 16px; }
body.main-v10 #footer .foot_sub_link { padding: 6px 0; }
body.main-v10 #footer .copy { padding-top: 8px; }
body.main-v10 #footer .copy .copyright,
body.main-v10 #footer .footer-address { line-height: 1.45; }
body.main-v10 #footer .copy p { margin: 0; }
/* 글자 크기 16px 통일 (연락처 p 가 18px 라 너무 큼) */
body.main-v10 #footer,
body.main-v10 #footer .copy,
body.main-v10 #footer .copy p,
body.main-v10 #footer .copy .copyright,
body.main-v10 #footer .foot_sub_link li,
body.main-v10 #footer .foot_sub_link a { font-size: 16px; }
/* 심플: 하단 텍스트 두께 통일 — strong/b 굵기 제거(라벨·값 동일 두께) */
body.main-v10 #footer strong,
body.main-v10 #footer b { font-weight: 400; }

/* =====================================================================
   태블릿/모바일(<1025px): 일반 흐름 + 스크롤
   ===================================================================== */
@media (max-width: 1024px) {
  /* 모바일: 히어로가 맨 위, 퀵버튼은 그 아래 (DOM 은 퀵→히어로 순이라 reverse) */
  .v10-hero-band { flex-direction: column-reverse; min-height: 0; }
  .v10-quick { flex: 0 0 auto; flex-direction: row; justify-content: stretch; }
  .v10-quick-btn { flex: 1 1 0; }
  .v10-hero { min-height: 260px; }
  .v10-boards { grid-template-columns: 1fr; }
  .v10-rolling-label { padding: 12px 20px; }
}
@media (max-width: 640px) {
  .v10-quick { flex-direction: column; }
  /* 2026-07-04: 세로 스택 시 버튼이 flex:1 1 0(데스크톱 컬럼 높이 균등분할용) 을 그대로
     물려받으면, 컨테이너 높이가 쪼그라들어 버튼이 아이콘(52px)보다 짧아지고 아이콘 박스가
     버튼 밖으로 삐져나오는 문제. 세로모드에선 버튼이 내용 높이만큼 자라도록 flex 해제. */
  .v10-quick-btn { flex: 0 0 auto; }
  .v10-hero-cap h2 { font-size: 24px; }
  .v10-hero-cap p { font-size: 14px; }
  .v10-rolling { flex-direction: column; }
  .v10-rolling-label { justify-content: flex-start; }
}