/* ===================================================================
   대한에이즈예방협회 (KAAP) — main.css  (메인/index 전용)
   index.php 의 순수 CSS 부분만 분리한 파일.
   ⚠️ index 는 Tailwind CDN(런타임)을 사용한다. Tailwind 유틸리티 클래스와
      @apply 를 쓰는 @layer components 블록은 CDN 이 처리해야 하므로
      index.php 의 <style type="text/tailwindcss"> 인라인에 그대로 남는다.
      이 파일에는 @apply 없이 동작하는 순수 CSS 규칙만 담는다.
   =================================================================== */

/* 머티리얼 심볼 아이콘 */
.material-symbols-rounded { font-variation-settings:'FILL' 0,'wght' 500,'GRAD' 0,'opsz' 24; font-size:25px; line-height:1; vertical-align:middle; user-select:none; }
.ic-fill { font-variation-settings:'FILL' 1,'wght' 500,'GRAD' 0,'opsz' 24; }
.ic-sm { font-size:20px; } .ic-lg { font-size:35px; } .ic-xl { font-size:50px; }

html { scroll-behavior:smooth; font-size:125%; }
@media (min-width:640px){ html { font-size:131.5%; } }
/* 가로 스크롤 방지 (clip은 sticky 헤더에 영향 없음) */
body { overflow-x:hidden; overflow-x:clip; }
body { -webkit-font-smoothing:antialiased; }

/* ── 메가메뉴: hover/focus 시 펼침 (마이크로 인터랙션) ── */
.has-mega > .mega { opacity:0; visibility:hidden; transform:translate(-50%, 8px); transition:opacity .25s ease, transform .25s ease, visibility .25s; }
.gnb:hover .mega-bg { opacity:1; visibility:visible; }
.has-mega:hover > .mega,
.has-mega:focus-within > .mega { opacity:1; visibility:visible; transform:translate(-50%, 0); }
.mega-bg { opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s; }

/* ── 스크롤 진입 리빌 ── */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .7s cubic-bezier(.2,.7,.2,1), transform .7s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity:1; transform:none; }

/* ── 섹션 배경 패턴 ── */
.bg-dots { background-image:radial-gradient(rgba(0,139,204,.12) 1.2px, transparent 1.2px); background-size:22px 22px; }
.bg-grid { background-image:linear-gradient(rgba(0,139,204,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(0,139,204,.07) 1px, transparent 1px); background-size:46px 46px; }
.bg-dots-w { background-image:radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px); background-size:24px 24px; }
.mask-fade { -webkit-mask-image:radial-gradient(ellipse at center, #000 25%, transparent 72%); mask-image:radial-gradient(ellipse at center, #000 25%, transparent 72%); }
.mask-fade-b { -webkit-mask-image:linear-gradient(to bottom, #000 0%, transparent 85%); mask-image:linear-gradient(to bottom, #000 0%, transparent 85%); }

/* ── 모바일 메뉴 (삼선 / 드로어) ──
   서브 페이지(layout.css 의 .mobile-menu / .macc)와 동일한 디자인·인터랙션.
   index 는 common.css 토큰을 로드하지 않으므로 값을 리터럴로 고정한다. */
.mobile-menu { position:fixed; inset:0; z-index:100; visibility:hidden; font-family:"Pretendard Variable",Pretendard,-apple-system,"Segoe UI","Malgun Gothic","Apple SD Gothic Neo",sans-serif; font-size:17.5px; line-height:1.6; letter-spacing:-0.012em; color:#333F4D; }
.mobile-menu.is-open { visibility:visible; }
.mobile-menu__scrim { position:absolute; inset:0; background:rgba(19,26,33,0.48); opacity:0; transition:opacity 200ms cubic-bezier(0.16,1,0.3,1); }
.mobile-menu.is-open .mobile-menu__scrim { opacity:1; }
.mobile-menu__panel { position:absolute; right:0; top:0; height:100%; width:86%; max-width:360px; background:#fff; box-shadow:0 16px 40px rgba(19,38,58,0.14); padding:20px; overflow-y:auto; transform:translateX(100%); transition:transform 320ms cubic-bezier(0.16,1,0.3,1); display:flex; flex-direction:column; }
.mobile-menu.is-open .mobile-menu__panel { transform:translateX(0); }
.mobile-menu__top { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.mobile-menu__actions-top { display:flex; align-items:center; gap:6px; margin-left:auto; }
.mobile-menu__icon-btn { width:40px; height:40px; border-radius:50%; border:none; background:#F4F6F8; display:flex; align-items:center; justify-content:center; color:#555; cursor:pointer; text-decoration:none; }
.mobile-menu__icon-btn:hover { background:#E9EDF1; color:#1B6FB4; }

.macc { margin-top:8px; border-top:1px solid #E9EDF1; }
.macc__group { border-bottom:1px solid #E9EDF1; }
.macc__summary { display:flex; align-items:center; justify-content:space-between; padding:15px 4px; font-size:23.28px; font-weight:700; letter-spacing:-0.02em; color:#555; cursor:pointer; list-style:none; }
.macc__summary::-webkit-details-marker { display:none; }
.macc__chev { color:#9AA6B2; transition:transform 200ms cubic-bezier(0.16,1,0.3,1); flex-shrink:0; }
.macc__group[open] > .macc__summary { color:#1B6FB4; }
.macc__group[open] > .macc__summary .macc__chev { transform:rotate(180deg); color:#1B6FB4; }
.macc__list { padding:0 4px 12px; }
.macc__link { display:block; padding:9px 12px; font-size:18px; color:#6E7B89; border-left:2px solid #D9DFE6; }
.macc__link:hover { color:#1B6FB4; border-left-color:#1B6FB4; }
.macc__link--active { color:#1B6FB4; font-weight:700; border-left-color:#1B6FB4; }

.mobile-menu__cta { display:flex; gap:10px; margin-top:24px; }
.mobile-menu__cta a { flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px; height:48px; border-radius:12px; font-size:20.37px; font-weight:700; text-decoration:none; }
.mobile-menu__cta .is-outline { border:1px solid #D9DFE6; color:#333F4D; background:#fff; }
.mobile-menu__cta .is-outline:hover { border-color:#C0C9D2; color:#333F4D; }
.mobile-menu__cta .is-primary { background:linear-gradient(96deg,#1565A8 0%,#2196D6 60%,#2FA8DC 100%); color:#fff; box-shadow:0 12px 32px rgba(27,111,180,0.28); }
.mobile-menu__cta .is-primary:hover { color:#fff; }
@media (min-width:1024px) { .mobile-menu { display:none; } }  /* 데스크톱(lg↑)에서는 GNB 사용 */

/* ── 작은 화면(≤420px) 메인 메뉴 카드: 화살표 원을 숨기고 여백을 줄여 글자 영역 확보 (320px 에서 '기관소/개' 줄바꿈 방지) ── */
@media (max-width:420px) {
  a.menu-card { padding:16px; gap:12px; }
  a.menu-card .menu-card__arrow { display:none; }
  a.menu-card .menu-card__icon { width:48px; height:48px; }
}
@media (max-width:360px) { a.footer-tel { font-size:1.75rem; } }

/* 접근성: 모션 최소화 선호 시 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .reveal { opacity:1; transform:none; }
}