@charset "utf-8";
/* ============================================================
   CAEC | 공통 내비게이션 (nav.php)
   ============================================================ */

.hd{
    position:sticky;top:0;z-index:100;
    background:var(--paper);
    transition:box-shadow .3s var(--ease);
}
.hd.is-stuck{box-shadow:0 2px 24px rgba(16,32,64,.08)}
.hd__inner{display:flex;align-items:center;gap:40px;height:92px}

/* 로고 */
.hd__brand{display:flex;align-items:center;gap:20px;flex:none;margin-left:6px}
.hd__mark{height:85px;width:auto;margin-top:2px}
.hd__brand-txt{
    position:relative;top:3px;
    padding-left:18px;
    font-size:18px;line-height:25px;font-weight:600;
    color:var(--navy);letter-spacing:-0.005em;
}
.hd__brand-txt::before{
    content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);
    width:1px;height:32px;background:#c3cddd;
}

/* GNB */
.gnb{flex:1;display:flex;justify-content:center}
.gnb__list{
    display:flex;align-items:center;gap:clamp(22px,3.4vw,65px);
    margin:0;padding:0;list-style:none;
}
.gnb__item{position:relative}
.gnb__link{
    display:block;
    font-size:19px;font-weight:600;letter-spacing:0;
    color:var(--ink-soft);
    padding:8px 0;
    position:relative;
    transition:color .25s var(--ease);
}
.gnb__link::after{
    content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
    background:var(--navy);transform:scaleX(0);transform-origin:left;
    transition:transform .35s var(--ease);
}
.gnb__link:hover,
.gnb__link[aria-current="page"],
.gnb__item:hover>.gnb__link{color:var(--navy)}
.gnb__link:hover::after,
.gnb__link[aria-current="page"]::after,
.gnb__item:hover>.gnb__link::after{transform:scaleX(1)}

/* 2depth */
.gnb__sub{
    position:absolute;left:50%;top:100%;
    transform:translate(-50%,6px);
    min-width:200px;padding:8px;
    margin-top:17px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 18px 40px rgba(12,28,60,.18);
    opacity:0;visibility:hidden;pointer-events:none;
    transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
}
.gnb__item--has-sub:hover>.gnb__sub,
.gnb__item--has-sub:focus-within>.gnb__sub{
    opacity:1;visibility:visible;pointer-events:auto;
    transform:translate(-50%,0);
}
.gnb__sub::before{
    content:"";position:absolute;left:0;right:0;top:-17px;height:17px;
}
.gnb__sub ul{margin:0;padding:0;list-style:none}
.gnb__sub a{
    display:block;padding:13px 22px;
    border-radius:12px;
    font-size:18px;font-weight:500;line-height:1.35;
    text-align:center;
    color:var(--ink);white-space:nowrap;
    transition:color .2s var(--ease),background-color .2s var(--ease);
}
.gnb__sub a:hover{color:var(--navy);background:var(--fill-blue)}
.gnb__sub a[aria-current="page"]{color:var(--navy);font-weight:700}

/* 경북대 로고 */
.hd__univ{flex:none}
.hd__univ img{height:41px;width:auto}

/* 모바일 토글 */
.hd__toggle{display:none;width:44px;height:44px;margin-left:auto;position:relative}
.hd__toggle span:not(.sr-only){
    position:absolute;left:11px;right:11px;height:2px;background:var(--ink-soft);
    transition:transform .3s var(--ease),opacity .2s linear;
}
.hd__toggle span:nth-child(1){top:15px}
.hd__toggle span:nth-child(2){top:21px}
.hd__toggle span:nth-child(3){top:27px}
.hd.is-open .hd__toggle span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hd.is-open .hd__toggle span:nth-child(2){opacity:0}
.hd.is-open .hd__toggle span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

/* ------------------------------------------------------------
   반응형
   ------------------------------------------------------------ */
@media (max-width:1600px){
    .hd__inner{gap:24px}
    .hd__mark{height:72px}
}
@media (max-width:1400px){
    .hd__mark{height:64px}
    .hd__brand-txt{padding-left:14px}
    .hd__univ img{height:36px}
}
@media (max-width:1279px){
    .hd__inner{height:68px;gap:16px}
    .hd__brand{margin-left:0;gap:12px}
    .hd__mark{height:46px;margin-top:0}
    .hd__brand-txt{font-size:16px;line-height:22px;padding-left:12px;top:1px}
    .hd__brand-txt::before{height:26px}
    .hd__univ img{height:30px}
    .hd__toggle{display:block}

    .gnb{
        position:absolute;left:0;right:0;top:100%;
        display:block;
        height:calc(100vh - 68px);
        height:calc(100dvh - 68px);
        overflow-y:auto;overscroll-behavior:contain;
        background:var(--paper);border-top:1px solid var(--line);
        box-shadow:0 20px 30px rgba(16,32,64,.08);
        visibility:hidden;opacity:0;
        pointer-events:none;
        transition:opacity .25s var(--ease),visibility .25s;
    }
    .hd.is-open .gnb{visibility:visible;opacity:1;pointer-events:auto}
    .gnb__list{display:block;gap:0;padding:6px 20px 22px}
    .gnb__item{border-bottom:1px solid var(--line)}
    .gnb__item:last-child{border-bottom:0}
    .gnb__link{font-size:18px;padding:16px 2px 12px}
    .gnb__link::after{display:none}

    .gnb__sub{
        position:static;transform:none;opacity:1;visibility:inherit;pointer-events:inherit;
        min-width:0;margin:0;padding:0 0 12px;
        background:none;border-radius:0;box-shadow:none;
    }
    .gnb__sub::before{display:none}
    .gnb__sub a{padding:7px 2px;font-size:16px;text-align:left}
    .gnb__sub a:hover,.gnb__sub a[aria-current="page"]{background:none}
}
@media (max-width:600px){
    .hd__brand-txt{display:none}
    .hd__univ img{height:26px}
}

/* ------------------------------------------------------------
   인트로 모션 (메인 진입 시에만 .hd--intro 부여)
   ------------------------------------------------------------ */
.hd--intro .rv > i{animation:caecRise .85s var(--ease) both}
.hd--intro .hd__brand-txt .rv:nth-child(1) > i{animation-delay:.05s}
.hd--intro .hd__brand-txt .rv:nth-child(2) > i{animation-delay:.12s}
.hd--intro .gnb__item:nth-child(1) .rv > i{animation-delay:.20s}
.hd--intro .gnb__item:nth-child(2) .rv > i{animation-delay:.26s}
.hd--intro .gnb__item:nth-child(3) .rv > i{animation-delay:.32s}
.hd--intro .gnb__item:nth-child(4) .rv > i{animation-delay:.38s}
.hd--intro .gnb__item:nth-child(5) .rv > i{animation-delay:.44s}

.hd--intro .hd__mark,
.hd--intro .hd__univ{animation:caecFadeIn .7s var(--ease) both}
.hd--intro .hd__mark{animation-delay:0s}
.hd--intro .hd__univ{animation-delay:.48s}

@keyframes caecFadeIn{
    from{opacity:0}
    to{opacity:1}
}


/* ------------------------------------------------------------
   메뉴 열림 - 뒤 화면 스크롤 잠금
   ------------------------------------------------------------ */
html.nav-open{overflow:hidden}
html.nav-open body{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:contain}
html.nav-open .hd{position:fixed;top:0;left:0;right:0}

/* ------------------------------------------------------------
   메뉴 - 글자 선택·끌기 막기
   ------------------------------------------------------------ */
.hd a,
.hd button{
    -webkit-user-select:none;user-select:none;
    -webkit-user-drag:none;
    -webkit-touch-callout:none;
    -webkit-tap-highlight-color:transparent;
}
.hd a img{-webkit-user-drag:none;pointer-events:none}