/* =========================================================
   base.css
   - 사이트 전체 공통 스타일(리셋/테마 변수/헤더/메가메뉴/푸터)
   - 모든 페이지에서 항상 로드
========================================================= */

:root{
  --bg:#ffffff;
  --text:#0b1220;

  --soft:#eef3f8;

  --topbar-a:#2a6fe8;
  --topbar-b:#1ec3df;

  --q1a:#2287ee; --q1b:#1f80e6;
  --q2a:#1aa3f3; --q2b:#1798f0;
  --q3a:#3a4656; --q3b:#2f3b4a;

  --deepFooter:#2f3b4a;

  --infoBlue:#1f4fd6;
  --infoBlue2:#9fd6ff;

  --borderSoft: rgba(9,18,37,.10);
  --lineSoft: rgba(9,18,37,.10);
}

*{ box-sizing:border-box; }
html,html, body{ height:100%; }

/* ✅ (초보자 설명)
   - 어떤 페이지는 내용이 짧으면 footer가 위로 떠 보일 수 있어요.
   - body를 세로 Flex 레이아웃으로 만들고, footer에 margin-top:auto를 주면
     내용이 짧아도 footer가 항상 화면 하단에 붙습니다. */
body{ min-height:100vh; display:flex; flex-direction:column; }
body{
  margin:0;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans KR",sans-serif;
  background: var(--bg);
  color:var(--text);
}

a{ color:inherit; text-decoration:none; }
/* ✅ (수정) 상단 메뉴 글자가 잘리는 현상 방지
   - 메뉴 항목(영문)이 길어지면서 기존 1100px 폭에서는
     오른쪽 끝(Resident Workshop)이 살짝 잘릴 수 있었습니다.
   - 최대 폭을 1280px로 넓혀, PC 화면에서 가로 공간을 더 확보했습니다. */
.container{ width:min(1280px, calc(100% - 48px)); margin:0 auto; }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); border:0;
}

.main{ padding-bottom:40px; }

/* =========================
   Header(상단 바)
========================= */
.header{
  position:sticky;
  top:0;
  z-index:1000;
  background:
    radial-gradient(circle at 10% 25%, rgba(255,255,255,.14) 0 55px, transparent 56px),
    radial-gradient(circle at 18% 65%, rgba(255,255,255,.10) 0 75px, transparent 76px),
    radial-gradient(circle at 82% 30%, rgba(255,255,255,.10) 0 70px, transparent 71px),
    radial-gradient(circle at 92% 60%, rgba(255,255,255,.08) 0 95px, transparent 96px),
    linear-gradient(90deg, var(--topbar-a) 0%, var(--topbar-b) 100%);
}

.header__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0;
  /* ✅ (수정) 좌측 브랜드(학회명)와 우측 메뉴가 너무 붙어 보일 때
     - gap 값을 키우면 두 덩어리 사이의 "최소 간격"이 늘어납니다.
     - 화면이 넓을 때는 space-between 때문에 자동으로 더 벌어지며,
       화면이 좁아져도 최소 간격이 확보되어 답답해 보이지 않습니다. */
  gap:32px;
}

.brand{
  font-weight:800;
  letter-spacing:-0.02em;
  color:#fff;
  /* ✅ 로고+텍스트를 "가로"로 나란히 배치
     - 로고가 위로 올라가거나 줄바꿈되며 깨져 보이는 현상 방지 */
  display:flex;
  align-items:center;
  gap:10px;
  white-space:nowrap;
}

/* ✅ 브랜드 텍스트는 줄바꿈하지 않도록 고정 */
.brand__text{ white-space:nowrap; }

/* =========================
   Nav(상단 메뉴)
========================= */
.nav{
  display:flex;
  align-items:center;
  /* ✅ (수정) 브랜드(학회명) ↔ 메뉴 사이 간격을 더 넓힘
     - 사용자가 표시한 빨간 화살표 구간(학회명 끝 ~ About 시작)이
       더 여유 있어 보이도록 여백을 키웠습니다.
     - 공간이 좁은 화면에서는 자동으로 줄어들되, PC에서는 확실히 벌어집니다. */
  margin-left:42px;
}

.nav__list{
  display:flex;
  /* ✅ (수정) 메뉴 항목이 길어져도 잘리지 않도록
     - 항목 사이 간격(gap)과 링크 내부 여백(padding)을 약간 줄여
       전체 폭을 소폭 줄였습니다. */
  gap:22px;
  align-items:center;
  margin:0;
  padding:0;
  list-style:none;
}

.nav__link{
  display:inline-flex;
  align-items:center;
  padding:10px 12px;
  color: rgba(255,255,255,.95);
  font-weight:800;
  white-space:nowrap;
  border-radius:12px;
}
.nav__link:hover{ opacity:.92; }

.nav__dots{
  display:inline-flex;
  flex-direction:column;
  gap:3px;
  margin-right:10px;
  transform: translateY(1px);
  opacity:.95;
}
.nav__dots i{
  width:4px;
  height:4px;
  border-radius:999px;
  background: rgba(255,255,255,.95);
  display:block;
}

/* =========================
   Mega Menu(PC 전용)
========================= */
.megaMenu{
  position:absolute;
  left:0;
  right:0;
  top:100%;
  background:#fff;
  color:#111;
  border-top:1px solid var(--borderSoft);
  box-shadow:0 18px 40px rgba(0,0,0,.18);
  z-index:2000;

  opacity:0;
  transform:translateY(-8px);
  pointer-events:none;
  transition:opacity .18s ease, transform .18s ease;
}

.header.mega-open .megaMenu{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}

.megaMenu__inner{
  width:min(1100px, calc(100% - 48px));
  margin:0 auto;
  padding:18px 0;
  display:flex;
  align-items:stretch;
}

.megaMenu__col{
  padding:18px 34px;
  min-width: 230px;
}

/* =========================================================
   (추가) 메가메뉴 컬럼 "1개만" 보이게 하는 규칙
   - 상단 메뉴 hover 시 JS가 해당 컬럼에 .is-active를 붙입니다.
   - 로고 컬럼(.megaMenu__col--logo)은 항상 보이도록 유지합니다.
   ========================================================= */
/* =========================================================
   ✅ (수정)
   이전 버전에서는 "상단 메뉴에 마우스를 올린 항목"에 해당하는 컬럼만
   보이도록(data-col + is-active) 처리했습니다.

   하지만 요청사항은
   "About/ACL Symposium/Monthly Case Discussion/Resident Workshop 중
    어떤 메뉴를 클릭/hover 하더라도, 하단 메가메뉴 4개 컬럼이 전부 보이기" 입니다.

   따라서 컬럼을 숨기는 규칙을 제거하여,
   메가메뉴가 열리면 모든 컬럼이 항상 표시되도록 변경했습니다.
   ========================================================= */
/* (참고) data-col 속성은 JS가 해당 컬럼을 '찾기' 위해 유지합니다.
   이제는 display 제어에 사용하지 않습니다. */
.megaMenu__col + .megaMenu__col{
  border-left:1px solid var(--lineSoft);
}
.megaMenu__col--logo{
  min-width: 340px;
  padding-right:34px;
}

.logoBox{
  /* ✅ (수정) 메가메뉴 왼쪽 로고 영역의 '사각형 박스(테두리/배경)' 제거
     - 사용자가 요청한 형태: 로고만 "공중에" 크게 보이도록 (박스 없음)
     - 따라서 배경/테두리/라운드/고정높이를 모두 제거했습니다. */
  background: transparent;
  border: 0;
  border-radius: 0;
  height: auto;
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 0;
}

 /* ✅ 메가메뉴 첫 번째(로고 박스) 내부 레이아웃(로고 박스) 내부 레이아웃
   - 기존: 로고가 크고 위/아래로 쌓여 보였음
   - 변경: 로고를 텍스트 "옆"에 배치해서 깔끔하게 */
.logoBox__inner{
  position:relative;           /* ::before(워터마크) 배치 기준 */
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
}

/* =========================================================
   ✅ (요청) 메가메뉴(hover 메뉴) 왼쪽 박스에서는
   '로고 + 학회명'이 아니라 '로고만' 크게 보이도록 합니다.

   - HTML은 그대로 두어도(span이 남아 있어도) 아래 CSS로 숨겨집니다.
   - 다른 위치(헤더 brand 텍스트)는 건드리지 않습니다.
   ========================================================= */
.logoBox__inner span{ display:none; }

/* ✅ (수정) 메가메뉴 왼쪽 박스에 깔렸던 "워터마크(그림자 로고)" 제거
   - 사용자가 원치 않는 배경 로고였으므로 삭제했습니다.
   - 로고/텍스트는 일반 레이어로만 표시됩니다. */


/* ✅ 메가메뉴 로고(작게, 선명하게) */
.logoBox__logo{
  height: 110px;
  width:auto;
  display:block;
  padding:6px;
  border-radius:999px;
  background: rgba(255,255,255,.92); /* 투명 PNG가 배경색에 묻지 않도록 */
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
}

.megaMenu__title{
  font-weight:900;
  padding:10px 12px;
  background:#f2f4f7;
  border-radius:10px;
  margin-bottom:12px;
  color:#2f3b4a;
  text-align:center;
}


/* ✅ ACL Symposium > 2027 Symposium 처럼 "그룹 제목"이 필요한 경우 사용 */
.megaMenu__groupTitle{
  font-weight: 900;
  color: rgba(9,18,37,.70);
  margin: 6px 0 10px;
  letter-spacing: -0.01em;
}


/* ✅ ACL Symposium > 2027 Symposium 처럼 '2단 메뉴'가 필요한 경우
   - 처음에는 1단(2027 Symposium)만 보이고,
   - 1단을 클릭하면 아래(Invitation~Archive)가 펼쳐집니다. */
.megaMenu__parent{
  display:flex;
  align-items:center;
  justify-content:flex-end; /* 오른쪽 정렬(기존 링크 톤 유지) */
  gap:8px;
  width:100%;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(20,30,50,.10);
  background:#fff;
  color:#2f3b4a;
  font-weight:900;
  cursor:pointer;
}
.megaMenu__parent:hover{ color: var(--infoBlue); }
.megaMenu__chev{ opacity:.55; }

.megaMenu__sub{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid rgba(20,30,50,.08);
}
.megaMenu__links{ display:flex; flex-direction:column; gap:10px; }
.megaMenu__link{
  display:block;
  padding:8px 0;
  border-radius:10px;
  color:#3a4656;
  text-align:right;
}
.megaMenu__link:hover{
  color: var(--infoBlue);
  font-weight:900;
}

/* =========================
   Mobile Menu Toggle
========================= */
.navToggle{
  display:none;
  border:1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.12);
  border-radius:12px;
  padding:10px 12px;
  color:#fff;
}

.hamburger{ display:block; width:20px; height:2px; background:#fff; position:relative; }
.hamburger::before,.hamburger::after{
  content:""; position:absolute; left:0; width:20px; height:2px; background:#fff;
}
.hamburger::before{ top:-6px; }
.hamburger::after{ top:6px; }

/* =========================
   Footer(하단)
========================= */
.footer{
  margin-top:auto; /* ✅ 내용이 짧아도 footer를 화면 하단으로 */
  padding: 18px 0;
  background: #fff;
  border-top: 1px solid rgba(9,18,37,.14);
}
.footer--dark{
  background: var(--deepFooter);
  border-top: none;
  color: rgba(255,255,255,.78);
}
.footer__inner{
  display:flex;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  align-items:center;
}
.footer__brand{ color:#fff; font-weight:900; letter-spacing:-0.02em; }
.footer__meta{ margin-top: 6px; color: rgba(255,255,255,.75); }

/* =========================
   Responsive
========================= */
@media (max-width: 980px){
  .megaMenu__col--logo{ min-width: 280px; }
  .megaMenu__col{ min-width: 210px; padding:18px 26px; }
  .nav__list{ gap:18px; }
}

@media (max-width: 720px){
  .navToggle{ display:inline-flex; }
  .megaMenu{ display:none; }

  .nav{
    position:absolute;
    right:16px;
    top:56px;
    display:none;
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    padding:10px;
    min-width:200px;
    border-radius:14px;
    border:1px solid rgba(255,255,255,.25);
    background: rgba(10,20,35,.92);
    box-shadow: 0 16px 35px rgba(0,0,0,.25);
  }
  .nav.is-open{ display:flex; }

  .nav__list{
    flex-direction:column;
    align-items:stretch;
    gap:6px;
    width:100%;
  }
  .nav__link{
    padding:10px 12px;
    width:100%;
  }
}

.brand__logo{
  /* ✅ 헤더 로고는 작게 줄이면 배경색(파란 그라데이션)에 묻혀 보일 수 있음
     -> 흰색 배경(원형) + 그림자 + 약간 큰 높이로 가독성 확보 */
  height: 40px;
  width:auto;
  display:block;
  padding:4px;
  border-radius:999px;
  background: rgba(255,255,255,.92);
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.22));
}


/* =========================================================
   2026-03 메인 리디자인 연동용 공통 오버라이드
   - 서브페이지도 동일한 파란 메뉴 바 / 흰색 드롭다운 느낌을 유지합니다.
   - 기존 구조를 지우지 않고 아래에서 덮어쓰는 방식이라 비교적 안전합니다.
   ========================================================= */
.header{
  background:#fff;
}
.header:not(.header--homepage) .header__inner{
  min-height:72px;
}
.header:not(.header--homepage) .brand{
  color:#10345d;
}
.header:not(.header--homepage) .brand__logo{
  background:#f3f7fc;
  border:1px solid rgba(13, 76, 135, .10);
  filter:none;
}
.header:not(.header--homepage) .nav{
  margin-left:auto;
}
.header:not(.header--homepage) .nav__list{
  gap:0;
}
.header:not(.header--homepage) .nav__link{
  min-height:72px;
  padding:0 22px;
  color:#10345d;
  border-radius:0;
}
.header:not(.header--homepage) .nav__link:hover,
.header:not(.header--homepage) .nav__link:focus{
  background:#eef4fb;
}
.header:not(.header--homepage) .nav__dots i{
  background:#10345d;
}
.header:not(.header--homepage) .megaMenu{
  border-top:1px solid rgba(13, 76, 135, .08);
  box-shadow:0 18px 36px rgba(9,33,69,.12);
}
.header:not(.header--homepage) .megaMenu__inner{
  width:min(1240px, calc(100% - 48px));
}
.header:not(.header--homepage) .megaMenu__col{
  min-width:220px;
}
.header:not(.header--homepage) .megaMenu__col--logo{
  min-width:260px;
}
.footer--dark{
  background:#0d2946;
}
@media (max-width: 720px){
  .header:not(.header--homepage) .navToggle{
    display:inline-flex;
    border-color:rgba(13,76,135,.18);
    background:#f3f7fc;
    color:#10345d;
  }
  .header:not(.header--homepage) .hamburger,
  .header:not(.header--homepage) .hamburger::before,
  .header:not(.header--homepage) .hamburger::after{
    background:#10345d;
  }
  .header:not(.header--homepage) .nav{
    right:12px;
    top:72px;
    background:#fff;
    border:1px solid rgba(13,76,135,.12);
  }
  .header:not(.header--homepage) .nav__link{
    min-height:auto;
    padding:12px 14px;
  }
}


/* =========================================================
   2026-03 최종 정리
   - 모든 페이지 헤더를 홈처럼 상단 고정(sticky)
   - 서브페이지 우측 HOME / CONTACT / ADMIN 보조 메뉴
   - 하단 로고형 푸터로 교체
   ========================================================= */
.header{
  position:sticky;
  top:0;
  z-index:1200;
}

.topQuickLinks{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:12px;
}
.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; }

.pageUtilityBar{
  background:#ffffff;
  border-bottom:1px solid rgba(13,76,135,.08);
}
.pageUtilityBar__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:32px;
}
.pageUtilityBar__spacer{ flex:1 1 auto; }
.header:not(.header--homepage) .header__inner{
  min-height:58px;
}
.header:not(.header--homepage) .nav__link{
  min-height:58px;
  padding:0 20px;
}
.footerBrandLockup{
  display:flex;
  align-items:center;
  gap:14px;
}
.footerBrandLockup__logo{
  width:56px;
  height:56px;
  object-fit:contain;
  display:block;
}
.footerBrandLockup__text{
  display:flex;
  flex-direction:column;
  gap:2px;
}
.footerBrandLockup__text strong{
  color:#d3346d;
  font-size:24px;
  font-weight:800;
  letter-spacing:-.03em;
  line-height:1.05;
}
.footerBrandLockup__text span{
  color:#1170c8;
  font-size:16px;
  font-weight:700;
  letter-spacing:.02em;
  line-height:1.1;
}
.footer__inner{
  align-items:center;
}
@media (max-width: 720px){
  .pageUtilityBar{ display:none; }
  .footerBrandLockup__text strong{ font-size:18px; }
  .footerBrandLockup__text span{ font-size:13px; }
  .footerBrandLockup__logo{ width:46px; height:46px; }
}