/* =========================================================
   index.css
   - 메인 페이지 전용 UI 리디자인 스타일
   - 요청사항 반영:
     1) 상단 로고/학회명 이미지를 크게 표시
     2) 메뉴 줄을 더 넓고 가볍게 재배치
     3) 광고 배너는 텍스트 없이 자동 슬라이드
     4) 카드 형식을 예시 이미지처럼 포스터형으로 변경
     5) 전체 글꼴을 깔끔한 산세리프 톤으로 통일
   ========================================================= */

body,
button,
input,
select,
textarea{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif; /* ✅ 요청 반영: 홈도 서브페이지와 같은 글씨체 계열로 통일 */
}

.homepageMain{
  background:#efefef;
}

.header--homepage{
  background:#ffffff;
  position:sticky;
  top:0;
  z-index:1200;
}

.utilityBar--homepage{
  background:#ffffff;
  border-bottom:none;
}

.utilityBar__inner--homepage{
  min-height:auto;
  padding:8px 0 6px; /* ✅ 로고 영역과 아래 hover 메뉴 사이 간격이 너무 커 보이지 않도록 높이를 줄였습니다. */
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.utilityBar__spacer{
  flex:1 1 auto;
  min-height:0;
}

.utilityBrand--homepage{
  display:block;
  width:min(600px, 100%); /* ✅ 로고/학회명 배너를 조금 더 키워 첫 번째 예시 비율에 가깝게 조정 */
  flex:0 0 auto;
}

.utilityBrand__banner{
  display:block;
  width:100%;
  max-height:100px;
  object-fit:contain;
  object-position:left center;
}

.primaryNavBar--homepage{
  background:#ffffff;
  box-shadow:none;
  border-top:none;
  border-bottom:1px solid rgba(8,44,88,.08);
}

.header__inner--homepage{
  min-height:58px; /* ✅ 메뉴 줄 높이를 줄여 로고와 메뉴 사이 간격을 더 촘촘하게 맞췄습니다. */
  justify-content:center;
}

.nav--homepage{
  width:100%;
  margin-left:0;
  justify-content:center;
}

.nav__list--homepage{
  width:min(980px, 100%); /* ✅ 메뉴 줄 폭을 넓게 고정해 항목 사이 간격이 확실히 벌어지도록 조정 */
  justify-content:space-between; /* ✅ 가운데 몰리지 않고 ISAKOS처럼 가로로 넓게 퍼지게 배치 */
  gap:16px;
  flex-wrap:nowrap;
}


.nav__list--homepage > .nav__item{
  flex:1 1 0; /* ✅ 메뉴 4칸을 동일 너비로 나눠 hover 메뉴 간격이 확실히 넓어 보이게 했습니다. */
  display:flex;
  justify-content:center;
}

.nav__link--homepage{
  min-height:58px; /* ✅ 메뉴 줄 높이를 줄여 로고와 메뉴 사이 간격을 더 촘촘하게 맞췄습니다. */
  padding:0 6px;
  border-radius:0;
  color:#0d4d87;
  font-size:16px;
  font-weight:500;
  letter-spacing:-.01em;
}

.nav__link--homepage:hover,
.nav__link--homepage:focus{
  background:transparent;
  color:#0a67ab;
}

.megaMenu--homepage{
  background:#ffffff;
  border-top:none;
  box-shadow:0 12px 28px rgba(9,33,69,.10);
}

.megaMenu__inner--homepage{
  width:min(1480px, calc(100% - 80px)); /* ✅ 드롭다운 패널도 메뉴 폭과 같이 더 넓게 펼쳐지도록 조정 */
  padding:10px 0;
}

.megaMenu__col--homepage{
  flex:1 1 0;
  min-width:0;
  padding:24px 28px 28px;
}

.megaMenu__col--homepage .megaMenu__title{
  font-size:15px;
  font-weight:800;
  color:#10345d;
  margin-bottom:14px;
}

.megaMenu__col--homepage .megaMenu__link{
  display:block;
  text-align:left;
  padding:7px 0;
  font-size:14px;
  color:#4b627d;
}

.megaMenu__col--homepage .megaMenu__link:hover{
  color:#0b5fa4;
}

.homeHero{
  padding:0 0 34px;
}

.heroCarousel--large{
  position:relative;
  width:100%;
  overflow:hidden;
  border-radius:0;
  min-height:460px; /* ✅ 광고 영역 자체 높이를 키워 포스터가 더 답답하지 않고 넉넉하게 보이도록 수정했습니다. */
  background:#dfe6ee;
  box-shadow:none;
}

.heroCarousel__track{
  display:flex;
  height:100%;
  transition:transform .5s ease;
}

.heroCarousel__slide{
  min-width:100%;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  background:#dde7f0;
}

.heroCarousel__img{
  display:block;
  width:100%;
  height:460px; /* ✅ 배너 높이를 함께 키워 상단 광고가 더 크게 보이도록 맞췄습니다. */
  object-fit:contain; /* ✅ cover 대신 contain으로 바꿔 광고 이미지가 잘리지 않고 원본 비율대로 최대한 다 보이게 했습니다. */
  filter:none;
}

/* ✅ (수정) 기존 텍스트 오버레이를 완전히 숨겨, 포스터/광고만 보이게 했습니다. */
.heroCarousel__overlay,
.heroCarousel__copy,
.heroCarousel__eyebrow,
.heroCarousel__headline,
.heroCarousel__summary{
  display:none;
}

.heroCarousel__arrow{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:3;
  width:44px;
  height:44px;
  border:none;
  border-radius:8px; /* ✅ 버튼 모서리를 덜 둥글게 해서 예시 카드의 REGISTER 버튼 느낌에 맞췄습니다. */
  background:#d7ab00;
  color:#ffffff;
  font-size:34px;
  line-height:1;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}

.heroCarousel__arrow--prev{ left:18px; }
.heroCarousel__arrow--next{ right:18px; }

.heroCarousel__dots{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  display:flex;
  gap:10px;
  z-index:2;
}

.heroCarousel__dot{
  width:10px;
  height:10px;
  border-radius:999px;
  border:none;
  background:rgba(255,255,255,.65);
  cursor:pointer;
}

.heroCarousel__dot.is-active{
  width:30px;
  background:#ffffff;
}

.section{
  padding:32px 0 46px;
}

.eventCards__wrap{
  max-width:980px; /* ✅ 카드 두 개 사이 간격과 전체 배치를 예시처럼 더 넓게 확보 */
}

/* ✅ (수정) 카드가 예시처럼 작고 여백 있는 2열 포스터 카드가 되도록 폭을 제한했습니다. */
.eventCards__grid--poster{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 340px));
  justify-content:center;
  gap:96px; /* ✅ 카드 사이 간격을 더 벌려 예시 이미지와 비슷하게 맞춤 */
}

/* ✅ (수정) 카드 외곽 회색 패널, 포스터 크기, 버튼 크기를 참고 이미지와 최대한 비슷하게 맞췄습니다. */
.eventCard--poster{
  background:#d8dee6;
  border:none;
  border-radius:18px;
  padding:25px 24px 22px;
  box-shadow:none;
}

.eventCard__posterLink{
  display:block;
}

.eventCard__poster{
  display:block;
  width:100%;
  height:292px;
  object-fit:cover;
  border-radius:8px;
}

.eventCard__body{
  padding-top:20px;
  text-align:center; /* ✅ 카드 안의 제목, 설명, 버튼을 모두 가운데 정렬되도록 수정했습니다. */
}

.eventCard__title--poster{
  margin:0 0 24px;
  color:#1874be;
  font-size:20px;
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.03em;
}

.eventCard__desc--poster{
  margin:0 0 18px;
  color:#20364f;
  font-size:15px;
  line-height:1.48;
}

.registerBtn--poster{
  display:inline-flex;
  margin:0 auto; /* ✅ REGISTER 버튼이 카드 가운데에 오도록 자동 여백을 추가했습니다. */
  align-items:center;
  justify-content:center;
  min-width:112px; /* ✅ 예시처럼 버튼이 더 존재감 있게 보이도록 가로 길이를 다시 키웠습니다. */
  height:36px; /* ✅ 납작한 버튼이 아니라 실제 예시처럼 더 큰 높이의 노란 버튼으로 수정했습니다. */
  padding:0 22px;
  border-radius:10px;
  background:#d7ab00;
  color:#0f3560;
  font-size:12px;
  font-weight:800;
  line-height:1;
  letter-spacing:-.01em;
  box-shadow:none;
}

.registerBtn--poster:hover{
  transform:none;
}

.homeBoard__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.15fr) minmax(0, .95fr);
  gap:28px;
}

.noticePanel,
.galleryPanel{
  background:#f4f4f4;
  border:1px solid rgba(14, 46, 84, .10);
  border-radius:14px;
  overflow:hidden;
  box-shadow:none;
}

.noticePanel__head,
.galleryPanel__head{
  min-height:46px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 18px;
  color:#fff;
}

.noticePanel__head{ background:#5f90dc; }
.galleryPanel__head{ background:#8f8f8f; }

.noticePanel__title,
.galleryPanel__title{
  margin:0;
  font-size:18px;
  font-weight:700;
}

.noticePanel__more,
.galleryPanel__more{
  width:30px;
  height:30px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.18);
  color:#fff;
  font-size:26px;
  line-height:1;
}

.noticePanel__list{
  list-style:none;
  margin:0;
  padding:12px 18px 16px;
}

.noticePanel__list li{
  border-bottom:none;
}

.noticePanel__list a{
  display:block;
  padding:9px 0 9px 14px;
  color:#344b63;
  font-size:14px;
  line-height:1.45;
  position:relative;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.noticePanel__list a::before{
  content:'▪';
  position:absolute;
  left:0;
  top:9px;
  color:#8c8c8c;
  font-size:10px;
}

.galleryPanel__track{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  padding:18px;
}

.galleryPanel__item{
  display:block;
  border-radius:0;
  overflow:hidden;
  background:#e8edf2;
  min-height:128px;
}

.galleryPanel__item img{
  width:100%;
  height:128px;
  object-fit:cover;
  display:block;
}

@media (max-width: 980px){
  .eventCards__grid--poster,
  .homeBoard__grid{
    grid-template-columns:1fr;
    justify-items:center;
  }

  .eventCard--poster{
    width:min(340px, 100%);
  }

  .galleryPanel,
  .noticePanel{
    width:100%;
  }
}

@media (max-width: 720px){
  .utilityBar__inner--homepage{
    padding:10px 0 8px;
    align-items:center;
  }

  .utilityBar__spacer{
    display:none;
  }

  .utilityBrand--homepage{
    width:100%;
  }

  .utilityBrand__banner{
    max-height:none;
  }

  .header__inner--homepage{
    justify-content:flex-end;
    min-height:62px;
  }

  .nav__list--homepage{
    width:100%;
    gap:16px;
    flex-wrap:wrap;
    justify-content:center;
  }

  .nav__list--homepage > .nav__item{
    flex:0 0 auto;
  }

  .nav__link--homepage{
    min-height:auto;
    padding:10px 14px;
  }

  .heroCarousel--large,
  .heroCarousel__img{
    min-height:240px;
    height:240px;
  }

  .heroCarousel__arrow{
    width:36px;
    height:36px;
    font-size:28px;
  }

  .eventCards__grid--poster{
    gap:28px;
  }

  .galleryPanel__track{
    grid-template-columns:1fr;
  }

  .galleryPanel__item,
  .galleryPanel__item img{
    min-height:180px;
    height:180px;
  }
}


/* =========================================================
   2026-03 추가 마무리 수정
   1) 로고 오른쪽 HOME / CONTACT / ADMIN 배치
   2) 카드 제목/설명/버튼을 모두 가운데 정렬
   ========================================================= */
.topQuickLinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
  flex:1 1 auto;
  min-height:100%;
}
.topQuickLinks--homepage{
  padding-top:6px;
}
.topQuickLinks__link{
  color:#4d4d4d;
  font-size:13px;
  font-weight:700;
  letter-spacing:.04em;
}
.topQuickLinks__link:hover{ color:#0a67ab; }
.topQuickLinks__sep{ color:#9a9a9a; font-size:12px; }

.eventCard__body{
  text-align:center;
  align-items:center;
}
.eventCard__title--poster,
.eventCard__desc--poster{
  text-align:center;
}
.registerBtn--poster{
  align-self:center;
}
@media (max-width: 720px){
  .topQuickLinks{ display:none; }
  .utilityBar__inner--homepage{ padding:10px 0 8px; }
  .header__inner--homepage{ min-height:52px; }
}


/* ✅ (추가) 오른쪽 ICL 2026 카드는 사용자가 전달한 이미지를 잘리지 않게 보여주기 위해 contain 방식을 별도로 적용했습니다. */
.eventCard--posterWideImage .eventCard__posterLink{
  background:#102234; /* ✅ 이미지 비율상 남는 여백이 생겨도 카드가 깔끔해 보이도록 어두운 배경을 추가했습니다. */
  border-radius:8px;
  overflow:hidden;
}

.eventCard__poster--contain{
  object-fit:contain; /* ✅ 핵심: 이미지 안의 글씨와 배경이 모두 잘리지 않도록 cover 대신 contain으로 변경 */
  background:#102234;
}

.eventCard--posterWideImage .eventCard__title--poster{
  margin-bottom:12px; /* ✅ 새 이미지와 카드 하단 텍스트 간격을 조금 더 단정하게 정리 */
}

.eventCard--posterWideImage .eventCard__desc--poster{
  margin-bottom:18px;
}

.homeMenuStripe{
  height:48px;
  background:#123d72; /* ✅ (추가) 홈 화면 메뉴 아래 비어 있는 남색선 */
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(6,24,49,.10);
}