@charset "utf-8";
/* ==========================================================================
   common.css — 광주대학교 AI부트캠프사업단 공통 스타일
   그룹: 1.토큰 2.리셋·기본 3.레이아웃 4.접근성 5.헤더 6.메가메뉴 7.모바일메뉴
         8.검색 9.버튼·배지 10.등장효과 11.푸터 12.맨위로
   ========================================================================== */

/* 1. 디자인 토큰 ---------------------------------------------------------- */
:root {
  --ink: #0a1b3f;          /* 깊은 남색 잉크: 비주얼·푸터 바탕 */
  --ink-2: #12285a;
  --blue: #2a62ff;         /* 주요 버튼·링크 (흰 글자 대비 5.1:1) */
  --blue-dk: #1f52e0;      /* 버튼 hover (디자인설정 기본 색상을 바꾸면 함께 바뀜) */
  --blue-rgb: 42,98,255;   /* 파랑 그림자 · 초점 링 rgba() 용 */
  --ink-rgb: 10,27,63;     /* 남색 덮개 · 그림자 rgba() 용 (디자인설정 화면 테마) */
  --ink-shade: 7,20,51;    /* 비주얼 아래 그라데이션 rgba() 용 */
  --sky: #8ab8ff;          /* 어두운 면 위의 블루 포인트 */
  --paper: #f3f5f9;        /* 본문 보조 배경 */
  --text: #131a2b;
  --text-sub: #576075;
  --line: #d8dde8;
  --on-ink: #ffffff;
  --on-ink-sub: #b8c4de;
  --closed: #9aa3af;
  --danger: #c62828;
  --w-max: 1480px;
  --gutter: 20px;
  --radius: 12px;
  --ease: cubic-bezier(.16, 1, .3, 1);   /* 지수 ease-out */
  --font: "Pretendard Variable", Pretendard, "Noto Sans KR", "Malgun Gothic", sans-serif;
  --hd-h: 72px;
  /* 이전 페이지 호환 별칭 */
  --c-primary: var(--ink); --c-accent: var(--blue); --c-accent-weak: #e8eeff;
  --c-text: var(--text); --c-text-sub: var(--text-sub); --c-line: var(--line);
  --c-bg: #fff; --c-bg-alt: var(--paper); --c-closed: var(--closed); --c-danger: var(--danger);
}
@media (min-width: 768px)  { :root { --gutter: 32px; } }
@media (min-width: 1200px) { :root { --gutter: 48px; --hd-h: 88px; } }

/* 2. 리셋·기본 ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; overflow-x: clip; scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; font-family: var(--font); font-size: 16px; line-height: 1.65; color: var(--text); background: #fff; word-break: keep-all; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg, canvas { max-width: 100%; vertical-align: middle; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; padding: 0; }
::selection { background: #bcd4ff; color: var(--ink); }
:root { scrollbar-color: #8fa0c0 transparent; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* 3. 레이아웃 (콘텐츠 최대 1,480px) --------------------------------------- */
.wrap { width: 100%; max-width: var(--w-max); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 80px 0; }
.section--paper { background: var(--paper); }
@media (min-width: 1200px) { .section { padding: 132px 0; } }
.h2 { font-size: clamp(28px, 3.4vw, 52px); line-height: 1.22; font-weight: 800; letter-spacing: -0.02em; text-wrap: balance; }
.lead { margin-top: 16px; color: var(--text-sub); font-size: clamp(16px, 1.3vw, 19px); max-width: 60ch; }

/* 4. 접근성 --------------------------------------------------------------- */
.skip { position: fixed; left: 12px; top: -80px; z-index: 1000; padding: 12px 18px; background: var(--sky); color: var(--ink); font-weight: 700; border-radius: 8px; transition: top .2s; }
.skip:focus { top: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); border: 0; white-space: nowrap; }
:focus-visible { outline: 3px solid var(--sky); outline-offset: 3px; }
.on-light :focus-visible, .section :focus-visible { outline-color: var(--blue); }

/* 5. 헤더: 투명 → 스크롤 40px 후 흰색 고정, 아래로 스크롤 시 숨김 ---------- */
.hd { position: fixed; inset: 0 0 auto 0; z-index: 100; color: #fff; transition: transform .6s var(--ease), background-color .4s, color .4s, box-shadow .4s; }
.hd .util { border-bottom: 1px solid rgba(255,255,255,.14); font-size: 13px; transition: border-color .4s; }
.hd .util .wrap { display: flex; justify-content: flex-end; gap: 20px; height: 40px; align-items: center; }
.hd .util a { opacity: .85; } .hd .util a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
.hd-in { position: relative; display: flex; align-items: center; justify-content: space-between; height: var(--hd-h); }
.logo { display: flex; align-items: center; gap: 12px; font-weight: 800; line-height: 1.2; letter-spacing: -0.01em; }
.logo-mark { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--ink); font-size: 15px; letter-spacing: 0; transition: background-color .4s, color .4s; }
.logo small { display: block; font-size: 12px; font-weight: 600; opacity: .8; letter-spacing: 0; }
.gnb { display: none; }
.hd-tools { display: flex; align-items: center; gap: 4px; }
.icon-btn { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; transition: background-color .25s; }
.icon-btn:hover { background: rgba(255,255,255,.14); }
.hd.is-solid, .hd.is-mega { background: #fff; color: var(--text); }
.hd.is-solid { box-shadow: 0 1px 0 var(--line); }
.hd.is-solid { transform: translateY(-41px); }
.hd.is-solid .util { border-color: transparent; }
.hd.is-solid .logo-mark, .hd.is-mega .logo-mark { background: var(--ink); color: #fff; }
.hd.is-solid .icon-btn:hover, .hd.is-mega .icon-btn:hover { background: var(--paper); }
@media (min-width: 1200px) {
  .gnb { display: block; flex: 1; margin: 0 clamp(28px, 5vw, 110px); }
  .gnb > ul { display: flex; justify-content: space-between; }
  .gnb > ul > li { position: relative; }
  .gnb > ul > li > a { display: block; padding: 0 clamp(10px, 1.2vw, 24px); line-height: var(--hd-h); font-weight: 700; font-size: 17px; position: relative; white-space: nowrap; }
  .gnb > ul > li > a::after { content: ""; position: absolute; left: clamp(10px, 1.2vw, 24px); right: clamp(10px, 1.2vw, 24px); bottom: 22px; height: 2px; background: var(--sky); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease); }
  .gnb > ul > li:hover > a::after, .gnb > ul > li:focus-within > a::after, .gnb a[aria-current="page"]::after { transform: scaleX(1); }
  .menu-btn { display: none; }
}

/* 6. 메가메뉴 ------------------------------------------------------------- */
.mega-bg { position: absolute; z-index: -1; left: 0; right: 0; top: 100%; height: 300px; background: #fff; transform: scaleY(0); transform-origin: top; transition: transform .5s var(--ease); pointer-events: none; }
.hd.is-mega .mega-bg { transform: none; border-top: 1px solid var(--line); box-shadow: 0 24px 48px rgba(var(--ink-rgb),.12); }
@media (max-width: 1199px) { .mega-bg { display: none; } }
.gnb .sub { position: absolute; top: 100%; left: 50%; transform: translate(-50%, 8px); min-width: 100%; width: max-content; padding: 22px 12px; text-align: center; opacity: 0; visibility: hidden; transition: opacity .35s, transform .5s var(--ease), visibility 0s .35s; }
.hd.is-mega .gnb .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.gnb .sub a { display: block; padding: 7px 14px; font-size: 15px; color: var(--text-sub); font-weight: 500; transition: color .2s, transform .3s var(--ease); }
.gnb .sub a:hover, .gnb .sub a:focus-visible { color: var(--blue); transform: translateX(4px); }
.gnb .sub { color: var(--text); }

/* 7. 모바일 전체메뉴 ------------------------------------------------------ */
.drawer { position: fixed; inset: 0 0 0 auto; z-index: 300; width: min(88vw, 400px); padding: 16px 24px 40px; background: #fff; color: var(--text); transform: translateX(104%); visibility: hidden; overflow-y: auto; transition: transform .6s var(--ease), visibility 0s .6s; }
.drawer.is-open { transform: none; visibility: visible; transition-delay: 0s; }
.drawer-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.drawer-top .icon-btn:hover { background: var(--paper); }
.drawer details { border-bottom: 1px solid var(--line); }
.drawer summary { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px; font-size: 19px; font-weight: 800; list-style: none; cursor: pointer; }
.drawer summary::-webkit-details-marker { display: none; }
.drawer summary::after { content: ""; width: 9px; height: 9px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .3s var(--ease); }
.drawer details[open] summary::after { transform: rotate(-135deg); }
.drawer details a { display: block; padding: 10px 4px 10px 12px; color: var(--text-sub); }
.drawer details a:last-child { margin-bottom: 14px; }
.drawer .d-link { display: block; padding: 18px 4px; font-size: 19px; font-weight: 800; border-bottom: 1px solid var(--line); }
.dim { position: fixed; inset: 0; z-index: 250; background: rgba(var(--ink-rgb),.55); opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.dim.is-on { opacity: 1; visibility: visible; transition-delay: 0s; }

/* 8. 검색 오버레이 -------------------------------------------------------- */
.search { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; padding: 24px; background: rgba(var(--ink-rgb),.94); color: #fff; opacity: 0; visibility: hidden; transition: opacity .4s, visibility 0s .4s; }
.search.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.search form { width: min(860px, 100%); display: flex; align-items: center; gap: 12px; border-bottom: 2px solid #fff; padding-bottom: 12px; }
.search input { flex: 1; min-width: 0; background: none; border: 0; color: #fff; font: inherit; font-size: clamp(22px, 4vw, 40px); font-weight: 700; outline: none; }
.search input::placeholder { color: var(--on-ink-sub); }
.search-in { width: min(860px, 100%); }
.search-kw { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-top: 24px; }
.search-kw strong { flex: none; font-size: 15px; color: var(--on-ink-sub); }
.search-kw ul { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.search-kw a { display: inline-block; padding: 6px 14px; border: 1px solid rgba(255,255,255,.4); border-radius: 999px; color: #fff; font-size: 15px; transition: background .2s, border-color .2s; }
.search-kw a:hover, .search-kw a:focus-visible { background: rgba(255,255,255,.14); border-color: #fff; }
.search .search-x { position: absolute; top: 24px; right: 24px; }
.search .icon-btn:hover { background: rgba(255,255,255,.14); }

/* 9. 버튼·배지 ------------------------------------------------------------ */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 30px; border-radius: 999px; font-weight: 800; font-size: 16px; background: var(--blue); color: #fff; transition: transform .4s var(--ease), background-color .25s, box-shadow .4s var(--ease); }
.btn:hover { transform: translateY(-3px); background: var(--blue-dk); box-shadow: 0 14px 28px rgba(var(--blue-rgb),.4); }
.btn svg { transition: transform .4s var(--ease); } .btn:hover svg { transform: translateX(4px); }
.btn--ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--ghost:hover { background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 1.5px currentColor; }
.btn--blue { background: var(--blue); color: #fff; }
.btn[aria-disabled="true"] { background: var(--line); color: var(--text-sub); cursor: not-allowed; transform: none; box-shadow: none; }
.badge { display: inline-block; flex: none; padding: 3px 11px; border-radius: 999px; font-size: 12px; font-weight: 800; background: #e8eeff; color: #1b3fc4; }
.badge--closed { background: #eceff3; color: #4b5563; }
.note { margin-top: 14px; font-size: 13px; color: var(--text-sub); }

/* 10. 스크롤 등장 효과 (JS가 .js 클래스를 붙인 경우에만 숨김 처리) ----------- */
.js [data-reveal] { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); transition-delay: var(--d, 0ms); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
.js [data-reveal="fade"] { transform: none; }
.js [data-reveal="line"] { opacity: 1; transform: scaleX(0); transform-origin: left; transition-duration: 1.4s; }
.js [data-reveal="line"].is-in { transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .js [data-reveal] { opacity: 1; transform: none; transition: none; } }

/* 11. 푸터 ---------------------------------------------------------------- */
.ft { background: #14181c; color: #919191; font-size: 14px; }
.ft-links { border-bottom: 1px solid rgba(255,255,255,.05); }
.ft-links .wrap { display: flex; flex-wrap: wrap; gap: 6px 40px; padding-top: 34px; padding-bottom: 34px; font-weight: 700; font-size: 16px; color: #888; }
.ft-links a { transition: color .25s; } .ft-links a:hover { color: #fff; }
.ft-info .wrap { display: grid; gap: 28px; padding-top: 44px; padding-bottom: 56px; }
.ft-info h2 { color: #c9c9c9; font-size: 13px; letter-spacing: .04em; margin-bottom: 8px; }
.ft-info address { font-style: normal; line-height: 1.9; }
.ft-brand { display: flex; align-items: center; gap: 12px; color: #fff; font-weight: 800; font-size: 18px; }
.ft-brand .logo-mark { background: #fff; color: var(--ink); }
.ft small { display: block; padding-bottom: 36px; color: #6f6f6f; }
@media (min-width: 900px) { .ft-info .wrap { grid-template-columns: 1.2fr 1fr 1fr; } }

/* 12. 맨위로 -------------------------------------------------------------- */
.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 90; width: 52px; height: 52px; border-radius: 50%; background: var(--ink); color: #fff; display: grid; place-items: center; opacity: 0; transform: translateY(16px); visibility: hidden; transition: opacity .4s, transform .5s var(--ease), visibility 0s .4s, background-color .25s; box-shadow: 0 10px 24px rgba(10,27,63,.3); }
.to-top.is-on { opacity: 1; transform: none; visibility: visible; transition-delay: 0s; }
.to-top:hover { background: var(--blue); }

/* 흰 배경 헤더·본문 위의 초점 표시는 파란색 */
.hd.is-solid :focus-visible, .hd.is-mega :focus-visible, .sub-body :focus-visible { outline-color: var(--blue); }

/* 13. 레이어 팝업(모달): CELMON의 layerLoad 방식 — 푸터 약관·사이트맵 -------- */
.modal { position: fixed; inset: 0; z-index: 600; display: none; overflow-y: auto; background: rgba(5,14,38,.74); }
.modal.is-open { display: block; animation: modalBg .35s ease both; }
.modal-box { position: relative; overflow: hidden; width: min(900px, calc(100% - 32px)); margin: 7vh auto; background: #fff; color: var(--text); border-radius: var(--radius); box-shadow: 0 40px 90px rgba(0,0,0,.35); animation: modalIn .6s var(--ease) both; }
.modal-head { position: relative; display: flex; align-items: center; justify-content: center; padding: 16px 64px; background: var(--ink); color: #fff; border-radius: var(--radius) var(--radius) 0 0; }
.modal-head h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.01em; text-align: center; }
.modal-head .icon-btn { position: absolute; right: 10px; top: 50%; margin-top: -23px; color: #fff; }
.modal-head .icon-btn:hover { background: transparent; }
.modal-head .icon-btn svg { transition: transform .5s ease, color .5s ease; }
.modal-head .icon-btn:hover svg, .modal-head .icon-btn:focus-visible svg { transform: rotate(360deg); color: var(--sky); }
.modal-body { padding: 28px; max-height: calc(86vh - 96px); overflow-y: auto; }
.modal-loading { display: grid; place-items: center; min-height: 180px; color: var(--text-sub); }
.policy { font-size: 15px; line-height: 1.8; color: #3a4357; }
.policy h3 { margin: 26px 0 8px; font-size: 17px; font-weight: 800; color: var(--ink); }
.policy h3:first-child { margin-top: 0; }
.policy ol, .policy ul { margin: 6px 0 10px 20px; list-style: decimal; } .policy ul { list-style: disc; }
.policy .sample { padding: 12px 16px; margin-bottom: 20px; border-radius: 10px; background: var(--paper); font-size: 13px; color: var(--text-sub); }
.sm-grid { display: grid; gap: 28px 24px; }
@media (min-width: 700px) { .sm-grid { grid-template-columns: repeat(3, 1fr); } }
.sm-grid h3 { padding-bottom: 10px; margin-bottom: 8px; border-bottom: 2px solid var(--ink); font-size: 17px; font-weight: 800; }
.sm-grid a { display: block; padding: 6px 0; color: var(--text-sub); } .sm-grid a:hover { color: var(--blue); }
@keyframes modalIn { from { opacity: 0; transform: translateY(24px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes modalBg { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .modal.is-open, .modal-box { animation: none; } .modal-head .icon-btn svg { transition: none; } .modal-head .icon-btn:hover svg { transform: none; } }