/* ===================================================================
   대한에이즈예방협회 (KAAP) — common.css
   전 페이지 공통: 디자인 토큰 · 리셋 · 애니메이션 · 공통 컴포넌트(CTA, 맨위로)
   레이아웃(GNB/헤더/사이드바/푸터)은 layout.css, 페이지 콘텐츠는 각 페이지 css.
   =================================================================== */
:root {
  /* Primary (Blue) */
  --blue-50:#EDF5FC; --blue-100:#DBEBF9; --blue-200:#B3D7F2; --blue-300:#7FBCE8;
  --blue-400:#459DDC; --blue-500:#2186CE; --blue-600:#1B6FB4; --blue-700:#175C96;
  --blue-800:#144B7A; --blue-900:#103A5E;

  --grad-cta: linear-gradient(96deg, #1565A8 0%, #2196D6 60%, #2FA8DC 100%);
  --grad-orb: radial-gradient(circle at 35% 30%, #4FB2E8 0%, #1B6FB4 55%, #14507F 100%);

  /* Secondary (Red) */
  --red-50:#FDEEEC; --red-100:#FBDCD8; --red-500:#E8503A; --red-600:#D43E28;

  /* Support accents */
  --green-50:#EAF6EE; --green-500:#3BA45C;
  --amber-50:#FDF4E7; --amber-500:#E8A13A;
  --navy-500:#2B3A8C;

  /* Neutrals */
  --gray-0:#FFFFFF; --gray-25:#FAFBFC; --gray-50:#F4F6F8; --gray-100:#E9EDF1;
  --gray-200:#D9DFE6; --gray-300:#C0C9D2; --gray-400:#9AA6B2; --gray-500:#6E7B89;
  --gray-600:#4C5866; --gray-700:#333F4D; --gray-800:#1F2933; --gray-900:#131A21;

  /* Semantic status */
  --success:var(--green-500); --warning:var(--amber-500); --danger:var(--red-600); --info:var(--blue-500);
  --success-bg:var(--green-50); --warning-bg:var(--amber-50); --danger-bg:var(--red-50); --info-bg:var(--blue-50);

  /* Semantic aliases */
  --text-strong:var(--gray-900); --text-body:var(--gray-700); --text-muted:var(--gray-500);
  --text-faint:var(--gray-400); --text-inverse:#FFFFFF; --text-link:var(--blue-500); --text-link-hover:var(--blue-700);

  --surface-page:#FFFFFF; --surface-section:var(--gray-50); --surface-card:#FFFFFF;
  --surface-raised:#FFFFFF; --surface-dark:var(--gray-900);

  --border-subtle:var(--gray-100); --border-default:var(--gray-200);
  --border-strong:var(--gray-300); --border-focus:var(--blue-500);

  --primary:var(--blue-600); --primary-hover:var(--blue-700); --primary-soft:var(--blue-50);
  --accent:var(--red-500); --accent-soft:var(--red-50);

  --overlay-scrim:rgba(19,26,33,0.48);
  --focus-ring:0 0 0 3px rgba(33,134,206,0.25);

  /* Typography */
  --font-sans:"Pretendard Variable", Pretendard, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-mono:"SF Mono", ui-monospace, "Nanum Gothic Coding", monospace;

  --text-display:69px; --text-h1:49px; --text-h2:36.5px; --text-h3:26.5px; --text-h4:21.5px;
  --text-lg:20px; --text-md:17.5px; --text-sm:15px; --text-xs:14px; --text-num-xl:41.5px;

  --weight-regular:400; --weight-medium:500; --weight-semibold:600; --weight-bold:700; --weight-extrabold:800;
  --leading-tight:1.25; --leading-snug:1.4; --leading-body:1.6;
  --tracking-tight:-0.025em; --tracking-body:-0.012em;

  /* Spacing / sizing */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:20px; --space-6:24px;
  --space-8:32px; --space-10:40px; --space-12:48px; --space-16:64px; --space-20:80px; --space-section:96px;
  --container-max:1440px; --header-h:84px;
  --control-sm:32px; --control-md:40px; --control-lg:48px; --control-xl:56px;

  /* Radius / shadow / motion */
  --radius-xs:6px; --radius-sm:8px; --radius-md:12px; --radius-lg:16px; --radius-xl:24px; --radius-pill:999px;
  --shadow-xs:0 1px 2px rgba(19,38,58,0.06);
  --shadow-sm:0 2px 8px rgba(19,38,58,0.07);
  --shadow-md:0 8px 24px rgba(19,38,58,0.10);
  --shadow-lg:0 16px 40px rgba(19,38,58,0.14);
  --shadow-cta:0 12px 32px rgba(27,111,180,0.28);
  --ease-out:cubic-bezier(0.16,1,0.3,1); --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms;
  --bg-grid:linear-gradient(rgba(33,134,206,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(33,134,206,0.05) 1px, transparent 1px);
  --bg-grid-size:72px 72px;

  /* 섹션 컬러 — 기본값(기관소개). 섹션별 override 는 layout.css 의 body.theme-* 참고 */
  --sc-solid:#3A57B8;
  --sc-soft:#EDF0FB;
  --sc-grad:linear-gradient(96deg, #2B3A8C 0%, #3A57B8 55%, #5A79D6 100%);
}

/* ── 리셋 / 기본 타이포 ── */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin:0; background:#fff;
  font-family:var(--font-sans); font-size:var(--text-md);
  line-height:var(--leading-body); letter-spacing:var(--tracking-body);
  color:var(--text-body); -webkit-font-smoothing:antialiased;
}
a { color:var(--text-link); text-decoration:none; }
a:hover { color:var(--text-link-hover); }
img { max-width:100%; }

.container { max-width:var(--container-max); margin:0 auto; }

/* ── 애니메이션 (전 페이지 공용) ── */
@keyframes kaapFadeUp { from { opacity:0; transform:translateY(14px); } to { opacity:1; transform:translateY(0); } }
@keyframes kaapFloat { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-7px); } }
@keyframes kaapRingPulse { 0%,100% { transform:scale(1); opacity:1; } 50% { transform:scale(1.06); opacity:0.75; } }
@keyframes kaapSpin { to { transform:rotate(360deg); } }
@keyframes kaapSpinRev { to { transform:rotate(-360deg); } }
@keyframes kaapTwinkle { 0%,100% { opacity:0.3; transform:scale(0.8); } 50% { opacity:1; transform:scale(1.15); } }

/* ===================== CTA 밴드 (여러 서브페이지 공통) ===================== */
.cta-section { padding:0 0 72px; background:#fff; }
.cta { max-width:var(--container-max); margin:0 auto; padding:0 24px; }
.cta__band { display:flex; align-items:center; gap:24px; padding:40px 48px; border-radius:var(--radius-xl); box-shadow:var(--shadow-cta); background:var(--grad-cta); background-image:radial-gradient(rgba(255,255,255,0.12) 1.5px, transparent 1.5px), var(--grad-cta); background-size:24px 24px, cover; }
.cta__icon { width:64px; height:64px; border-radius:50%; background:rgba(255,255,255,0.16); border:1.5px solid rgba(255,255,255,0.4); display:flex; align-items:center; justify-content:center; color:#fff; flex-shrink:0; }
.cta__body { flex:1; }
.cta__title { font-size:34px; font-weight:800; color:#fff; letter-spacing:-0.02em; }
.cta__sub { font-size:16.5px; color:rgba(255,255,255,0.85); margin-top:6px; }
.cta__btn { display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 28px; background:#fff; border-radius:var(--radius-md); font-size:20px; font-weight:800; color:var(--blue-600); box-shadow:var(--shadow-sm); flex-shrink:0; }
.cta__btn:hover { color:var(--blue-600); }

/* ===================== 맨 위로 버튼 (전 페이지 공통) ===================== */
.to-top { position:fixed; right:24px; bottom:24px; z-index:80; width:48px; height:48px; border-radius:50%; border:none; background:var(--surface-dark); color:#fff; box-shadow:var(--shadow-lg); display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; transform:translateY(12px); pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-base); }
.to-top.is-visible { opacity:1; transform:translateY(0); pointer-events:auto; }
.to-top:hover { background:var(--blue-600); }

/* ===================== CTA / 맨위로 반응형 ===================== */
@media (max-width: 960px) {
  .cta__band { flex-direction:column; text-align:center; align-items:center; }
}
@media (max-width: 560px) {
  .cta__band { padding:32px 24px; }
  .to-top { right:16px; bottom:16px; }
}