@charset "utf-8";
/* ============================================================
   CAEC | 메인 페이지
   ============================================================ */

/* ------------------------------------------------------------
   HERO
   ------------------------------------------------------------ */
.hero{
    position:relative;
    margin:0 var(--gutter);
    height:800px;
    border-radius:var(--radius-xl);
    overflow:hidden;
    background:#0d2347;
    isolation:isolate;
}
.hero__bg{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;object-position:center 54.3%;
    z-index:-3;
}
.hero::before{
    content:"";position:absolute;inset:0;z-index:-2;
    background:rgba(255,252,248,.088);
}
.hero::after{
    content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(217deg,
        rgba(28,69,135,0) 37.4%,
        rgba(28,69,135,.49) 58%,
        rgba(28,69,135,1) 101.8%);
}
.hero__inner{
    position:relative;height:100%;
    width:100%;max-width:1880px;margin:0 auto;
    padding:0 49px 79px;
    display:flex;flex-direction:column;justify-content:flex-end;
}

/* KNU 라벨 */
.hero__eyebrow{
    display:flex;align-items:center;gap:24px;
    margin:0 0 14px;
    color:#fff;
}
.hero__eyebrow::before{
    content:"";width:85px;height:1px;background:#fff;
}
.hero__eyebrow span{
    font-size:23px;font-weight:600;letter-spacing:.02em;line-height:1;
}

/* 메인 타이틀 */
.hero__title{
    font-family:var(--f-en);
    margin:0;
    font-size:82px;line-height:98px;font-weight:600;
    letter-spacing:0;
    color:#fff;
    text-shadow:0 2px 34px rgba(6,18,40,.32);
}

.hero__focus{
    display:flex;align-items:center;gap:53px;
    margin:67px 0 0 10px;
}
.hero__focus-mark{flex:none;position:relative;width:67px;height:59px}
.hero__focus-mark i{position:absolute;border-radius:50%}
.hero__focus-mark i:first-child{
    left:0;top:13px;width:46px;height:46px;
    background:rgba(255,255,255,.4);
}
.hero__focus-mark i:last-child{
    left:22px;top:0;width:45px;height:45px;
    border:1px solid rgba(255,255,255,.9);
    box-shadow:0 0 0 1px rgba(120,150,200,.3);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}
.hero__focus-txt{
    margin:0;
    font-size:26px;line-height:31px;font-weight:400;
    color:rgba(255,255,255,.66);
    letter-spacing:0;
}
.hero__focus-txt b{font-weight:600;color:#fff}

/* ------------------------------------------------------------
   반응형
   ------------------------------------------------------------ */
@media (max-width:1600px){
    .hero{height:700px}
    .hero__title{font-size:68px;line-height:82px}
    .hero__focus{margin-top:52px}
}
@media (max-width:1280px){
    .hero{height:600px}
    .hero__inner{padding:0 40px 64px}
    .hero__title{font-size:54px;line-height:66px}
    .hero__eyebrow{gap:20px;margin-bottom:12px}
    .hero__eyebrow::before{width:64px}
    .hero__eyebrow span{font-size:18px}
    .hero__focus{gap:36px;margin-top:44px}
    .hero__focus-txt{font-size:19px;line-height:26px}
}
@media (max-width:1023px){
    .hero{height:520px;border-radius:var(--radius-lg)}
    .hero__inner{padding:0 32px 52px}
    .hero__title{font-size:42px;line-height:1.28}
    .hero__focus{gap:28px;margin-top:34px}
    .hero__focus-mark{width:50px;height:44px}
    .hero__focus-mark i:first-child{top:10px;width:34px;height:34px}
    .hero__focus-mark i:last-child{left:16px;width:34px;height:34px}
    .hero__focus-txt{font-size:17px;line-height:25px}
}
@media (max-width:600px){
    :root{--gutter:12px}
    /* 사진 높이를 2/3 로 줄이고, 글자는 사진 세로 가운데에 둔다 */
    .hero{height:320px;min-height:0;margin:0 var(--gutter);display:flex;align-items:center}
    /* 프레임은 그대로 두고 사진만 키워 아래로 내린다 — 물결이 글자 아래로 가고
       위쪽에는 사진 자체의 어두운 배경이 더 넓게 남는다 (2026.11.05 수정요청) */
    .hero__bg{height:150%;transform-origin:center top}
    .hero__inner{height:100%;justify-content:center;padding:0 22px}
    .hero__title{order:1;font-size:clamp(24px,7vw,31px);line-height:1.3}
    /* KNU 는 연구실 이름 아래로 내리고, 양옆에 PC 와 같은 길고 가는 막대기를 둔다 */
    .hero__eyebrow{order:2;gap:12px;margin:10px 0 0}
    .hero__eyebrow::before,
    .hero__eyebrow::after{content:"";display:block;flex:none;width:56px;height:1px;background:#fff}
    .hero__eyebrow::after{transform-origin:right center;animation:caecLine .9s var(--ease) .30s both}
    .hero__eyebrow span{font-size:15px;letter-spacing:.06em}
    .hero__focus{order:3;gap:0;margin:20px 0 0}
    .hero__focus-mark{display:none}
    .hero__focus-txt{font-size:14px;line-height:21px}
}

/* ------------------------------------------------------------
   HERO 인트로 모션
   ------------------------------------------------------------ */
.hero .rv > i{animation:caecRise 1s var(--ease) both}
.hero__eyebrow .rv > i{animation-delay:.44s}
.hero__title .rv:nth-child(1) > i{animation-delay:.54s}
.hero__title .rv:nth-child(2) > i{animation-delay:.63s}
.hero__focus-txt .rv:nth-child(1) > i{animation-delay:.80s}
.hero__focus-txt .rv:nth-child(2) > i{animation-delay:.86s}
.hero__focus-txt .rv:nth-child(3) > i{animation-delay:.92s}

.hero__eyebrow::before{
    transform-origin:left center;
    animation:caecLine .9s var(--ease) .30s both;
}
.hero__focus-mark{animation:caecFadeUp .9s var(--ease) .86s both}

.hero__bg{
    will-change:transform;
    animation:
        caecHeroSettle 2s var(--ease) both,
        caecHeroZoom 24s ease-in-out 2s infinite alternate;
}

@keyframes caecLine{
    from{transform:scaleX(0)}
    to{transform:scaleX(1)}
}
@keyframes caecFadeUp{
    from{visibility:hidden;transform:translateY(16px)}
    to{visibility:visible;transform:translateY(0)}
}
@keyframes caecHeroSettle{
    from{transform:scale(1.06)}
    to{transform:scale(1)}
}
@keyframes caecHeroZoom{
    from{transform:scale(1)}
    to{transform:scale(1.1)}
}

/* ------------------------------------------------------------
   FOOTER (footer.php)
   ------------------------------------------------------------ */
.ft{
    margin:20px var(--gutter);
    padding:83px 0 36px;
    border-radius:var(--radius-xl);
    background:var(--navy);
    color:#fff;
}
.ft__inner{
    display:flex;align-items:center;justify-content:space-between;gap:40px;
    padding:0 100px 0 149px;
}

/* 로고 */
.ft__brand{display:flex;align-items:center;gap:32px;flex:none}
.ft__mark{width:109px;height:auto}
.ft__univ{margin-top:17px}
.ft__univ img{height:49px;width:auto}

/* 연락처 */
.ft__info{display:flex;align-items:flex-start;gap:86px;margin:0;position:relative;top:3px}
.ft__info-col{text-align:center}
.ft__info dt{
    font-size:21px;font-weight:700;line-height:1;
    color:#fff;
}
.ft__info dd{
    margin:22px 0 0;
    font-size:19px;font-weight:500;line-height:1.5;
    color:rgba(255,255,255,.88);
}
.ft__info dd a{transition:color .2s var(--ease)}
.ft__info dd a:hover{color:#fff;text-decoration:underline;text-underline-offset:3px}

/* 카피라이트 */
.ft__copy{
    margin:49px 0 0;
    text-align:center;
    font-size:18px;line-height:1.55;font-weight:400;
    color:rgba(255,255,255,.62);
}
.ft__copy b{font-weight:600;color:rgba(255,255,255,.92)}
.ft__copy a{transition:color .2s var(--ease)}
.ft__copy a:hover{color:#fff}

@media (max-width:1600px){
    .ft{padding:76px 0 30px}
    .ft__inner{padding:0 60px}
    .ft__info{gap:56px}
    .ft__mark{width:92px}
}
@media (max-width:1280px){
    .ft{padding:62px 0 28px}
    .ft__inner{flex-direction:column;align-items:center;gap:44px;padding:0 40px}
    .ft__info{gap:48px;flex-wrap:wrap;justify-content:center}
    .ft__info dt{font-size:18px}
    .ft__info dd{margin-top:16px;font-size:18px}
    .ft__mark{width:80px}
    .ft__copy{margin-top:40px}
}
@media (max-width:1023px){
    .ft__info-col:first-child{flex-basis:100%}
}
@media (max-width:600px){
    .ft{margin:12px;padding:48px 0 26px;border-radius:var(--radius-lg)}
    .ft__inner{gap:32px;padding:0 24px}
    .ft__brand{gap:22px}
    .ft__mark{width:62px}
    .ft__univ img{height:34px}
    .ft__info{gap:26px}
    .ft__info-col{flex-basis:100%}
    .ft__info dt{font-size:14px}
    .ft__info dd{margin-top:8px;font-size:15px}
    .ft__copy{margin-top:32px;font-size:13px;padding:0 24px}
}

/* ------------------------------------------------------------
   RESEARCH TOPIC
   ------------------------------------------------------------ */
.topic{
    position:relative;
    padding:118px 0 101px;
    background:var(--paper);
    overflow:hidden;
}

.topic__grid{
    position:absolute;left:50%;top:170px;
    width:1000px;height:820px;
    transform:translateX(-50%);
    pointer-events:none;
    background-image:
        repeating-linear-gradient(to right,rgba(28,69,135,.115) 0 1px,transparent 1px 50px),
        repeating-linear-gradient(to bottom,rgba(28,69,135,.115) 0 1px,transparent 1px 51px);
    -webkit-mask-image:radial-gradient(ellipse 54% 56% at 50% 46%,#000 34%,transparent 100%);
    mask-image:radial-gradient(ellipse 54% 56% at 50% 46%,#000 34%,transparent 100%);
}

/* 머리말 */
.topic__head{
    position:relative;
    display:flex;align-items:flex-end;justify-content:space-between;gap:40px;
}
.topic__eyebrow{
    display:flex;align-items:center;gap:13px;
    margin:0;
    font-size:20px;line-height:1.2;font-weight:400;
    color:#b1b1b1;
}
.topic__eyebrow b{font-weight:700;color:#9c9c9c}

.dot-mark{position:relative;flex:none;width:30px;height:19px}
.dot-mark i{position:absolute;top:0;width:19px;height:19px;border-radius:50%}
.dot-mark i:first-child{left:0;background:var(--navy)}
.dot-mark i:last-child{
    left:11px;
    border:1px solid rgba(255,255,255,.9);
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
}

.topic__title{
    font-family:var(--f-en);
    margin:22px 0 0;
    font-size:58px;line-height:1;font-weight:700;
    letter-spacing:-0.012em;
    color:var(--ink);
}

.more-btn{
    display:inline-flex;align-items:center;gap:0;flex:none;
    position:relative;top:6px;
}
.more-btn__label{
    display:inline-flex;align-items:center;justify-content:center;
    height:46px;padding:0 36px;
    border:2px solid #a8a8a8;border-radius:23px;
    font-size:20px;font-weight:400;line-height:1;
    color:#2c2c2c;white-space:nowrap;
    transition:border-radius .4s var(--ease),border-color .3s var(--ease),
               background-color .35s var(--ease),color .3s var(--ease),
               padding .4s var(--ease);
}
.more-btn__ico{
    display:inline-flex;align-items:center;justify-content:center;
    width:46px;height:46px;border-radius:50%;
    background:var(--navy);color:#fff;
    transition:border-radius .4s var(--ease),background-color .35s var(--ease);
}
.more-btn__ico svg{
    width:22px;height:22px;
    transition:transform .35s var(--ease);
}

.more-btn:hover .more-btn__label{
    border-radius:23px 0 0 23px;
    border-color:var(--navy);
    background:var(--navy);
    color:#fff;
    padding:0 16px 0 36px;
}
.more-btn:hover .more-btn__ico{
    border-radius:0 23px 23px 0;
    background:var(--navy);
}
.more-btn:hover .more-btn__ico svg{transform:translateX(-3px)}

/* ------------------------------------------------------------
   RESEARCH TOPIC - 카드
   ------------------------------------------------------------ */
.topic__list{
    position:relative;
    display:flex;align-items:center;gap:16px;
    height:700px;
    margin:94px 0 0;padding:0;list-style:none;
}
.topic-card{
    --rise:273px;
    position:relative;
    flex:1 1 0;min-width:0;
    height:600px;
    border-radius:16px;
    overflow:hidden;
    background:var(--fill);
    transition:flex-grow .9s var(--ease-soft),height .9s var(--ease-soft);
}
.topic-card::before{
    content:"";position:absolute;inset:0;z-index:1;
    background:rgba(0,0,0,.2);
    opacity:0;pointer-events:none;
    transition:opacity .45s var(--ease);
}
.topic-card.is-on::before{opacity:1}
.topic-card--shade::before{background:rgba(0,0,0,.36)}

.topic-card::after{
    content:"";position:absolute;inset:0;z-index:1;
    background:linear-gradient(to bottom,
        rgba(241,241,241,0) 0%,
        rgba(241,241,241,0) 46%,
        rgba(241,241,241,.55) 60%,
        rgba(241,241,241,.94) 76%,
        rgba(241,241,241,1) 100%);
    pointer-events:none;
    transition:opacity .45s var(--ease);
}
.topic-card.is-on::after{opacity:0}

.topic-card > a{position:absolute;inset:0;z-index:3}
.topic-card > a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}

.topic-card__img{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    -webkit-mask-image:linear-gradient(to bottom,#000 0 40%,rgba(0,0,0,0) 74%);
    mask-image:linear-gradient(to bottom,#000 0 40%,rgba(0,0,0,0) 74%);
    transition:transform .9s var(--ease-soft),
               opacity .55s var(--ease),filter .55s var(--ease);
}

/* 아이콘 */
.topic-card__ico{
    position:absolute;top:40px;left:41px;z-index:2;
    display:flex;align-items:center;justify-content:center;
    width:63px;height:63px;
    border-radius:14px;background:#fff;
    color:#383838;
    transition:opacity .5s var(--ease),transform .55s var(--ease);
}
.topic-card__ico svg{width:30px;height:30px}

.topic-card__body{
    position:absolute;left:35px;right:35px;top:68px;z-index:2;
    transition:left .65s var(--ease),right .65s var(--ease),
               opacity .5s var(--ease);
}
.topic-card__badge{
    display:inline-flex;align-items:center;justify-content:center;
    height:34px;padding:0 25px;margin:0 0 32px;
    border:1px solid #3a3a3a;border-radius:17px;
    font-size:17px;font-weight:500;line-height:1;letter-spacing:.01em;
    color:#3a3a3a;white-space:nowrap;
    transform:translateY(var(--rise));
    transition:transform .65s var(--ease) .15s,
               margin-bottom .65s var(--ease) .15s,
               border-color .4s var(--ease),color .4s var(--ease);
}
.topic-card__title{
    font-family:var(--f-en);
    margin:0;
    word-break:keep-all;overflow-wrap:break-word;
    font-size:28px;line-height:35px;font-weight:600;
    letter-spacing:-0.01em;
    color:#3a3a3a;
    transform:translateY(var(--rise));
    transition:transform .65s var(--ease) .07s,
               font-size .65s var(--ease) .07s,
               line-height .65s var(--ease) .07s,
               color .4s var(--ease) .07s;
}

.topic-card__go{
    position:absolute;right:45px;bottom:52px;z-index:2;
    display:flex;align-items:center;justify-content:center;
    width:105px;height:105px;border-radius:50%;
    background:#fff;color:var(--navy);
    box-shadow:0 0 20px rgba(255,255,255,.7);
    opacity:0;transform:translateY(18px) scale(.8);
    transition:opacity .45s var(--ease),transform .55s var(--ease);
}
.topic-card__go svg{
    width:38px;height:38px;
    transform:rotate(0deg);
    transition:transform .55s var(--ease);
}
.topic-card.is-on .topic-card__go svg{transform:rotate(-45deg);transition-delay:.72s}

/* ---- 활성 상태 ---- */
@media (min-width:1181px){
    .topic__list.is-active .topic-card:not(.is-on) .topic-card__img{
        opacity:.34;filter:saturate(.72);
    }
    .topic__list.is-active .topic-card:not(.is-on) .topic-card__ico,
    .topic__list.is-active .topic-card:not(.is-on) .topic-card__body{
        opacity:.5;
    }
}

.topic-card.is-on{flex-grow:1.7;height:700px}
.topic-card.is-on .topic-card__img{
    -webkit-mask-image:none;mask-image:none;
}
.topic-card.is-on .topic-card__ico{opacity:0;transform:translateY(-30px) scale(.85)}
.topic-card.is-on .topic-card__body{left:50px;right:50px}
.topic-card.is-on .topic-card__badge{
    border-color:rgba(255,255,255,.9);color:#fff;
    margin-bottom:25px;
    transform:translateY(0);
    transition-delay:0s;
}
.topic-card.is-on .topic-card__title{
    font-size:48px;line-height:60px;color:#fff;
    transform:translateY(0);
    transition-delay:.09s;
}
.topic-card.is-on .topic-card__go{opacity:1;transform:translateY(0) scale(1);transition-delay:.55s}
.topic-card.is-on .topic-card__img{transform:scale(1.02)}

/* ---- RESEARCH TOPIC 반응형 ---- */
@media (max-width:1600px){
    .topic{padding:92px 0 84px}
    .topic__title{font-size:48px}
    .topic__list{margin-top:72px;gap:14px}
    .topic-card{height:520px}
    .topic-card.is-on{height:600px}
    .topic-card__title{font-size:25px;line-height:32px}
    .topic-card.is-on .topic-card__title{font-size:40px;line-height:50px}
    .topic-card{--rise:228px}
    .topic-card__go{width:88px;height:88px;right:36px;bottom:40px}
    .topic-card__go svg{width:33px;height:33px}
}
@media (max-width:1280px){
    .topic{padding:76px 0 70px}
    .topic__title{font-size:40px}
    .topic__list{margin-top:56px}
    .topic-card{height:460px}
    .topic-card.is-on{height:520px}
    .topic-card__ico{top:28px;left:28px;width:54px;height:54px;border-radius:12px}
    .topic-card__ico svg{width:26px;height:26px}
    .topic-card{--rise:214px}
    .topic-card__body{left:28px;right:28px;top:48px}
    .topic-card__badge{margin-bottom:22px}
    .topic-card__title{font-size:22px;line-height:29px}
    .topic-card.is-on .topic-card__body{left:34px;right:34px;transform:translateY(0)}
    .topic-card.is-on .topic-card__title{font-size:32px;line-height:41px}
}
@media (max-width:1180px){
    .topic{padding:64px 0 60px}
    .topic__grid{display:none}
    .topic__head{flex-direction:column;align-items:flex-start;gap:24px}
    .topic__title{font-size:34px;margin-top:16px}
    .more-btn{top:0}
    .more-btn__label{height:42px;padding:0 24px;font-size:16px}
    .more-btn__ico{width:42px;height:42px}
    .topic__list{
        display:grid;grid-template-columns:repeat(2,1fr);gap:14px;
        height:auto;margin-top:40px;
    }
    .topic-card,
    .topic-card.is-on{flex:none;height:380px;--rise:0px}
    /* 토픽이 홀수(3개)일 때 마지막 카드가 반쪽으로 남지 않게 한 줄을 다 쓴다 */
    .topic-card:last-child:nth-child(odd){grid-column:1 / -1}
    .topic-card__body,
    .topic-card.is-on .topic-card__body{left:28px;right:28px;top:auto;bottom:30px}

    .topic-card__img,
    .topic-card.is-on .topic-card__img{
        -webkit-mask-image:linear-gradient(to bottom,#000 0 22%,rgba(0,0,0,0) 62%);
        mask-image:linear-gradient(to bottom,#000 0 22%,rgba(0,0,0,0) 62%);
        transform:none;
    }
    .topic-card.is-on .topic-card__ico{opacity:1;transform:none}
    .topic-card.is-on .topic-card__badge{border-color:#3a3a3a;color:#3a3a3a}
    .topic-card__badge,
    .topic-card.is-on .topic-card__badge{margin-bottom:20px}
    .topic-card__title,
    .topic-card.is-on .topic-card__title{font-size:22px;line-height:29px;color:#3a3a3a;text-shadow:none}
    .topic-card__go{display:none}
}
@media (max-width:600px){
    .topic{padding:52px 0 48px}
    .topic__title{font-size:26px}
    .topic__list{grid-template-columns:1fr;gap:16px;margin-top:32px}
    .topic-card,
    .topic-card.is-on{height:300px}
    .topic-card__ico,
    .topic-card.is-on .topic-card__ico{top:20px;left:50%;transform:translateX(-50%);width:46px;height:46px;border-radius:11px}
    .topic-card__ico svg{width:22px;height:22px}
    .topic-card__body,
    .topic-card.is-on .topic-card__body{left:22px;right:22px;top:auto;bottom:24px}
    .topic-card__body,
    .topic-card.is-on .topic-card__body{text-align:center}
    .topic-card__badge{height:30px;padding:0 16px;font-size:14px;margin-bottom:16px}
    .topic-card__title .tbr,
    .topic-card.is-on .topic-card__title .tbr{display:none}
    .topic-card__title,
    .topic-card.is-on .topic-card__title{font-size:20px;line-height:27px}
}

/* ------------------------------------------------------------
   PUBLICATIONS
   ------------------------------------------------------------ */
.pub{
    position:relative;
    padding:97px 0 99px;
    background:#22304a;
    overflow:hidden;
    color:#fff;
}
.pub__bg{
    position:absolute;inset:0;
    width:100%;height:100%;
    object-fit:cover;
    mix-blend-mode:luminosity;
    opacity:.22;
    pointer-events:none;
}
.pub__inner{position:relative;z-index:1}

.pub__head{position:relative;text-align:center}
.pub__eyebrow{
    display:flex;align-items:center;justify-content:center;gap:13px;
    margin:0;
    font-size:20px;line-height:1.2;font-weight:400;
    color:rgba(255,255,255,.75);
}
.pub__eyebrow b{font-weight:700;color:#fff}
.pub__eyebrow .dot-mark i:first-child{background:rgba(255,255,255,.55)}
.pub__eyebrow .dot-mark i:last-child{
    border-color:rgba(255,255,255,.75);
    box-shadow:none;
}
.pub__title{
    font-family:var(--f-en);
    margin:24px 0 0;
    font-size:58px;line-height:1;font-weight:700;
    letter-spacing:-0.012em;
    color:#fff;
}
.pub__head .more-btn{position:absolute;right:0;top:auto;bottom:-6px}

.more-btn--solid .more-btn__label{
    background:#fff;border-color:#fff;color:#2c2c2c;
}
.more-btn--solid:hover .more-btn__label{
    background:var(--navy);border-color:var(--navy);color:#fff;
}

/* ---- 카드 가로 스크롤 ---- */
.pub__scroller{
    --pad:max(var(--gutter),calc((100vw - var(--container)) / 2));
    margin-top:87px;
    overflow-x:auto;overflow-y:hidden;
    overscroll-behavior-x:contain;
    scrollbar-width:none;-ms-overflow-style:none;
    -webkit-overflow-scrolling:touch;
    cursor:grab;
}
/* 끌거나 미끄러지는 동안 */
.pub__scroller.is-dragging{
    cursor:grabbing;
    user-select:none;-webkit-user-select:none;
}
.pub__scroller.is-dragging .pub-card__thumb img{transform:none;opacity:1}
.pub__scroller.is-dragging .pub-card__body,
.pub__scroller.is-dragging .pub-card__author{opacity:1}
.pub__scroller::-webkit-scrollbar{display:none}
.pub__list{
    display:flex;gap:16px;
    margin:0;padding:0 0 0 var(--pad);
    list-style:none;
}
.pub__list::after{content:"";flex:0 0 var(--pad);margin-left:-16px}
.pub-card{
    position:relative;
    flex:0 0 600px;
    height:400px;
    border-radius:16px;
    background:#fff;
}
.pub-card > a{position:absolute;inset:0;z-index:2;border-radius:inherit}
.pub-card > a span{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.pub-card:hover .pub-card__thumb img{opacity:.62}
.pub-card__body,
.pub-card__author{transition:opacity .45s var(--ease)}
.pub-card:hover .pub-card__body,
.pub-card:hover .pub-card__author{opacity:.78}

.drag-cursor{
    --dc-size:72px;
    --dc-bg:#5a8dff;
    position:fixed;left:0;top:0;z-index:60;
    opacity:0;
    transition:opacity .25s var(--ease);
    pointer-events:none;
    will-change:transform;
}
.drag-cursor.is-on{opacity:1}
.drag-cursor__in{
    display:flex;align-items:center;justify-content:center;gap:7px;
    width:var(--dc-size);height:var(--dc-size);
    border-radius:50%;
    background:var(--dc-bg);
    color:#fff;
    box-shadow:0 10px 24px rgba(44,98,214,.3);
    transform:scale(.7);
    transition:transform .35s var(--ease);
}
.drag-cursor.is-on .drag-cursor__in{transform:scale(1)}
.drag-cursor.is-on.is-press .drag-cursor__in{transform:scale(.88)}
.drag-cursor svg{width:19px;height:19px;flex:none}
.drag-cursor i{width:1px;height:20px;flex:none;background:rgba(255,255,255,.55)}
.has-cursor.has-cursor,
.has-cursor.has-cursor *{cursor:none}

/* 썸네일 */
.pub-card__thumb{
    position:absolute;left:15px;top:15px;
    width:270px;height:370px;
    border-radius:12px;overflow:hidden;
    background:#e8e8e8;
    display:flex;align-items:center;justify-content:center;
}
.pub-card__thumb img{
    width:100%;height:100%;object-fit:cover;
    transition:transform .8s var(--ease),opacity .45s var(--ease);
}
.pub-card:hover .pub-card__thumb img{transform:scale(1.09)}
.pub-card__thumb--logo img{width:96px;height:auto;object-fit:contain}

/* 본문 */
.pub-card__body{position:absolute;left:306px;right:24px;top:39px}
.pub-card__cat{
    display:flex;align-items:center;gap:9px;
    margin:0;
    font-size:16px;line-height:1;font-weight:600;letter-spacing:0;
    color:var(--navy);
}
.pub-card__cat::before{
    content:"";width:40px;height:1px;flex:none;
    background:#9fb3d4;
}
.pub-card__title{
    font-family:var(--f-en);
    margin:24px 0 0;
    font-size:22px;line-height:29px;font-weight:600;
    letter-spacing:-0.012em;
    color:#2f3a48;
    display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
    overflow:hidden;
}
.pub-card__author{
    position:absolute;left:306px;right:24px;bottom:60px;
    margin:0;
}
.pub-card__author dt{
    font-size:18px;line-height:25px;font-weight:400;
    color:#a5a5a5;
}
.pub-card__author dd{
    margin:6px 0 0;
    font-size:18px;line-height:25px;font-weight:500;
    color:#3a3a3a;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
    overflow:hidden;
}

/* ---- PUBLICATIONS 반응형 ---- */
@media (max-width:1600px){
    .pub{padding:80px 0 82px}
    .pub__title{font-size:48px}
    .pub__scroller{margin-top:64px}
    .pub-card{flex-basis:540px;height:370px}
    .pub-card__thumb{width:240px;height:340px}
    .pub-card__body{left:272px}
    .pub-card__title{font-size:24px;line-height:31px}
}
@media (max-width:1280px){
    .pub{padding:68px 0 70px}
    .pub__title{font-size:40px}
    .pub__scroller{margin-top:52px}
    .pub-card{flex-basis:480px;height:330px}
    .pub-card__thumb{left:12px;top:12px;width:208px;height:306px}
    .pub-card__body{left:236px;right:20px;top:30px}
    .pub-card__author{left:236px;right:20px;bottom:40px}
    .pub-card__title{font-size:22px;line-height:28px;margin-top:18px}
}
@media (max-width:1023px){
    .pub{padding:60px 0 62px}
    .pub__head{text-align:left}
    .pub__title{font-size:34px;margin-top:16px}
    .pub__head .more-btn{position:static;display:inline-flex;margin-top:24px}
    .pub__scroller{margin-top:36px}
    .pub-card{flex-basis:420px;height:290px}
    .pub-card__thumb{width:170px;height:266px}
    .pub-card__body{left:198px;top:26px}
    .pub-card__author{left:198px;bottom:30px}
    .pub-card__cat{font-size:16px}
    .pub-card__cat::before{width:28px}
    .pub-card__title{font-size:19px;line-height:25px;-webkit-line-clamp:4}
    .pub-card__author dt,
    .pub-card__author dd{font-size:15px;line-height:21px}
}
@media (max-width:600px){
    .pub{padding:50px 0 52px}
    .pub__title{font-size:28px}
    .pub-card{flex-basis:min(300px,78vw);height:auto;padding-bottom:26px}
    .pub-card__thumb{position:relative;left:auto;top:auto;width:calc(100% - 20px);height:180px;margin:10px 10px 0}
    .pub-card__body{position:relative;left:auto;right:auto;top:auto;padding:20px 22px 0}
    .pub-card__author{position:relative;left:auto;right:auto;bottom:auto;padding:18px 22px 0}
    .pub-card__title{-webkit-line-clamp:3}
}

/* ------------------------------------------------------------
   BOARD
   ------------------------------------------------------------ */
.board-zone{position:relative;background:#fcfcfc;overflow:hidden}
.board-zone__bg{
    position:absolute;left:0;top:0;
    width:100%;height:100%;
    object-fit:cover;
    opacity:.14;
    pointer-events:none;
}
.board-zone > *:not(.board-zone__bg):not(.totop){position:relative;z-index:1}
.board{padding:99px 0 126px}
.board .container{position:relative}

/* ---- 헤드 ---- */
.board__head{text-align:center}
.board__eyebrow{
    display:flex;align-items:center;justify-content:center;gap:13px;
    margin:0;
    font-size:20px;line-height:1.2;font-weight:400;
    color:#b1b1b1;
}
.board__eyebrow b{font-weight:700;color:#9c9c9c}
.board__title{
    font-family:var(--f-en);
    margin:24px 0 0;
    font-size:58px;line-height:1;font-weight:700;
    letter-spacing:-0.012em;
    color:var(--ink);
}

/* ---- 2단 본문 ---- */
.board__body{
    display:grid;
    grid-template-columns:minmax(0,791fr) minmax(0,752fr);
    column-gap:57px;
    margin-top:54px;
}

/* ---- 탭 ---- */
.board-tab{
    position:relative;
    display:inline-flex;
    padding:6px;
    border:1px solid #dfdfdf;
    border-radius:27px;
    background:#fff;
}
.board-tab__slider{
    position:absolute;z-index:0;
    border-radius:20px;
    background:var(--navy);
    pointer-events:none;
    transition:left .4s var(--ease),width .4s var(--ease),top .4s var(--ease),height .4s var(--ease);
}
.board-tab__btn{
    position:relative;z-index:1;
    min-width:106px;height:40px;padding:0 20px;
    border:0;border-radius:20px;
    background:transparent;
    font-family:var(--f-body);
    font-size:20px;line-height:1;font-weight:600;letter-spacing:-0.01em;
    color:#2c2c2c;
    cursor:pointer;
    transition:background-color .35s var(--ease),color .3s var(--ease);
}
.board-tab:not(.is-slide) .board-tab__btn.is-on{background:var(--navy);color:#fff}
.board-tab:not(.is-slide) .board-tab__btn:hover{color:var(--navy)}
.board-tab.is-slide .board-tab__btn.is-lit{color:#fff}

/* ---- 최신글 목록 ---- */
.board-list{list-style:none;margin:22px 0 0;padding:0}
.board-list[hidden]{display:none}
.board-list__item + .board-list__item{margin-top:16px}
.board-list__item a{
    position:relative;display:block;
    min-height:145px;
    padding:36px 92px 28px 38px;
    border-radius:16px;
    background:var(--fill-blue);
    transition:background-color .4s var(--ease);
}
.board-list__item a::before{
    content:"";position:absolute;inset:7px;
    border:1px solid #e4e7ed;
    border-radius:9px;
    pointer-events:none;
}
.board-list__item a:hover{background:#e3e8f4}
.board-list__title{
    display:block;
    font-size:22px;line-height:1.4;font-weight:600;letter-spacing:-0.005em;
    color:#2f3a48;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.board-list__date{
    display:flex;align-items:center;gap:10px;
    margin-top:26px;
    font-size:18px;line-height:20px;font-weight:400;
    color:#8f8f8f;
}
.board-list__date svg{width:23px;height:23px;flex:none;color:#a6a6a6}
.board-list__go{
    position:absolute;right:20px;bottom:20px;
    display:flex;align-items:center;justify-content:center;
    width:45px;height:45px;
    border-radius:50%;
    background:#fff;
    color:var(--navy);
    transition:background-color .35s var(--ease),color .35s var(--ease);
}
.board-list__go svg{width:25px;height:25px}
.board-list__item a:hover .board-list__go{background:var(--navy);color:#fff}

/* ---- 갤러리 ---- */
.gal{padding:15px;border-radius:20px;background:var(--fill-blue)}
.gal__stage{
    position:relative;
    aspect-ratio:721 / 440;
    border-radius:14px;overflow:hidden;
    background:#0a1330;
    cursor:grab;
    touch-action:pan-y;
}
.gal__stage.is-dragging{cursor:grabbing}
.gal__track{
    display:flex;height:100%;
    margin:0;padding:0;list-style:none;
    will-change:transform;
    transition:transform .7s var(--ease);
}
.gal__track.is-dragging{transition:none}
.gal__slide{
    position:relative;flex:0 0 100%;
    -webkit-user-select:none;user-select:none;
}
.gal__item{position:absolute;inset:0;display:block}
.gal__item img{
    width:100%;height:100%;object-fit:cover;
    -webkit-user-drag:none;
}
.gal__item::after{
    content:"";position:absolute;inset:0;
    background:linear-gradient(to top,
        rgba(4,10,26,.86) 0%,
        rgba(4,10,26,.46) 30%,
        rgba(4,10,26,0) 60%);
}
.gal__caption{
    position:absolute;left:32px;right:32px;bottom:50px;
    z-index:1;
}
.gal__title{
    display:block;
    font-size:30px;line-height:1.3;font-weight:600;letter-spacing:0;
    color:#fff;
    overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
}
.gal__date{
    display:flex;align-items:center;gap:10px;
    margin-top:20px;
    font-size:18px;line-height:20px;font-weight:400;
    color:rgba(255,255,255,.78);
}
.gal__date svg{width:20px;height:20px;flex:none}
.gal__badge{
    position:absolute;left:30px;top:30px;z-index:2;
    display:inline-flex;align-items:center;
    height:38px;padding:0 23px;
    border:1px solid rgba(255,255,255,.9);
    border-radius:19px;
    font-size:20px;line-height:1;font-weight:600;letter-spacing:.01em;
    color:#fff;
}

/* ---- 도트 + 더보기 ---- */
.gal__foot{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    margin-top:14px;padding:0 10px;
}
.gal__dots{display:flex;align-items:center;gap:10px;list-style:none;margin:0;padding:0}
.gal__dot{
    display:block;width:13px;height:13px;padding:0;
    border:0;border-radius:50%;
    background:#d9d9d9;
    cursor:pointer;
    transition:background-color .4s var(--ease),transform .4s var(--ease);
}
.gal__dot:hover{background:#b4bfd2}
.gal__dot.is-on{background:var(--navy);transform:scale(1.08)}
.gal__more{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:46px;height:46px;
    border:1px solid var(--navy);
    border-radius:50%;
    background:#fff;
    color:var(--navy);
    transition:background-color .35s var(--ease),color .35s var(--ease),transform .35s var(--ease);
}
.gal__more svg{width:26px;height:26px}
.gal__more:hover{background:var(--navy);color:#fff;transform:rotate(90deg)}

@media (max-width:1600px){
    .board{padding:80px 0 92px}
    .board__title{font-size:48px}
    .board__body{margin-top:46px;column-gap:40px}
    .board-list__item a{min-height:132px;padding:30px 84px 26px 32px}
    .board-list__title{font-size:21px}
    .gal__title{font-size:26px}
    .gal__caption{left:28px;right:28px;bottom:40px}
}
@media (max-width:1280px){
    .board{padding:68px 0 76px}
    .board__title{font-size:40px}
    .board__body{margin-top:38px;column-gap:30px}
    .board-list{margin-top:20px}
    .board-list__item a{min-height:120px;padding:26px 74px 22px 26px}
    .board-list__title{font-size:20px}
    .board-list__date{margin-top:18px}
    .board-list__go{width:40px;height:40px;right:16px;bottom:16px}
    .gal{padding:12px;border-radius:16px}
    .gal__title{font-size:22px}
    .gal__caption{left:22px;right:22px;bottom:30px}
    .gal__date{margin-top:14px}
    .gal__badge{left:22px;top:22px;height:34px;padding:0 20px;font-size:18px}
}
@media (max-width:1023px){
    .board{padding:60px 0 64px}
    .board__head{text-align:left}
    .board__eyebrow{justify-content:flex-start}
    .board__title{font-size:34px;margin-top:16px}
    .board__body{grid-template-columns:minmax(0,1fr);row-gap:40px;margin-top:30px}
    .board-list__item a{min-height:0;padding:22px 64px 20px 22px}
    .board-list__title{font-size:18px}
    .board-list__date{margin-top:14px;font-size:16px;line-height:18px}
    .board-list__date svg{width:20px;height:20px}
    .board-list__go{width:36px;height:36px}
    .board-list__go svg{width:21px;height:21px}
    .gal__title{font-size:20px}
    .gal__date{font-size:15px;margin-top:10px}
    .gal__badge{font-size:16px;height:30px;padding:0 16px}
}
@media (max-width:600px){
    .board{padding:50px 0 54px}
    .board__title{font-size:28px}
    .gal{padding:8px}
    .gal__caption{left:16px;right:16px;bottom:20px}
    .gal__title{font-size:17px}
    .gal__foot{padding:0 4px}
    .gal__more{width:34px;height:34px}
    .gal__more svg{width:18px;height:18px}
    .gal__dots{gap:8px}
    .gal__dot{width:9px;height:9px}
    .gal__badge{left:16px;top:16px;height:28px;padding:0 14px;border-radius:14px;font-size:14px}
    .gal__date{margin-top:10px;font-size:14px}
    .gal__date svg{width:15px;height:15px}
}

/* ------------------------------------------------------------
   섹션별 등장 모션 보정
   ------------------------------------------------------------ */
.caec-reveal .topic__list[data-reveal-group] > .topic-card{
    opacity:0;transform:translateY(52px);
    transition:flex-grow .9s var(--ease-soft),height .9s var(--ease-soft),
               opacity .85s var(--ease),transform .85s var(--ease);
}
.caec-reveal .topic__list[data-reveal-group].is-in > .topic-card{opacity:1;transform:none}

.caec-reveal .ft[data-reveal="ft"] .ft__brand,
.caec-reveal .ft[data-reveal="ft"] .ft__info-col,
.caec-reveal .ft[data-reveal="ft"] .ft__copy{
    opacity:0;transform:translateY(30px);
    transition:opacity .8s var(--ease),transform .8s var(--ease);
}
.caec-reveal .ft[data-reveal="ft"].is-in .ft__brand,
.caec-reveal .ft[data-reveal="ft"].is-in .ft__info-col,
.caec-reveal .ft[data-reveal="ft"].is-in .ft__copy{opacity:1;transform:none}
.caec-reveal .ft[data-reveal="ft"] .ft__info-col:nth-child(1){transition-delay:.10s}
.caec-reveal .ft[data-reveal="ft"] .ft__info-col:nth-child(2){transition-delay:.18s}
.caec-reveal .ft[data-reveal="ft"] .ft__info-col:nth-child(3){transition-delay:.26s}
.caec-reveal .ft[data-reveal="ft"] .ft__copy{transition-delay:.34s}

/* BOARD 탭에 글이 없을 때 */
.board-list__empty{padding:44px 20px;border:1px dashed #dfdfdf;border-radius:20px;background:rgba(255,255,255,.7);text-align:center;font-size:18px;color:var(--ink-mute)}

/* ------------------------------------------------------------
   폰 - 가운데 정렬
   ------------------------------------------------------------ */
@media (max-width:600px){
    .hero__inner{align-items:center;text-align:center}
    .hero__eyebrow{justify-content:center}
    .hero__focus{justify-content:center}
    .hero__focus-txt{text-align:center}

    .topic__head{align-items:center;text-align:center}
    .topic__eyebrow{justify-content:center}
    .pub__head{text-align:center}
    .pub__eyebrow{justify-content:center}
    .board__head{text-align:center}
    .board__eyebrow{justify-content:center}

    .topic__eyebrow,
    .pub__eyebrow,
    .board__eyebrow{font-size:16px;gap:9px}
    .dot-mark{width:24px;height:15px}
    .dot-mark i{width:15px;height:15px}
    .dot-mark i:last-child{left:9px}
    .more-btn__label{height:36px;padding:0 20px;border-width:1px;border-radius:18px;font-size:15px}
    .more-btn__ico{width:36px;height:36px}
    .more-btn__ico svg{width:17px;height:17px}

    .board-tab{display:flex;width:max-content;margin-left:auto;margin-right:auto;padding:5px;border-radius:23px}
    .board-tab__btn{min-width:84px;height:34px;padding:0 16px;border-radius:17px;font-size:16px}
    .board-tab__slider{border-radius:17px}
}

/* ==========================================================
   폰 — 구성요소를 줄이고 오밀조밀하게 (2026.10.30 수정요청)
   ========================================================== */
@media (max-width:600px){
    /* 섹션 머리 : 데코문구 → 제목 → View More */
    .topic{padding:40px 0 36px}
    .pub{padding:40px 0 42px}
    .board{padding:40px 0 44px}
    .topic__head,.pub__head,.board__head{gap:12px}
    .topic__eyebrow,.pub__eyebrow,.board__eyebrow{font-size:14px;gap:8px}
    .dot-mark{width:21px;height:13px}
    .dot-mark i{width:13px;height:13px}
    .dot-mark i:last-child{left:8px}
    .topic__title,.pub__title,.board__title{margin-top:8px;font-size:24px}
    .more-btn{top:0}
    .more-btn__label{height:32px;padding:0 17px;border-radius:16px;font-size:13.5px}
    .more-btn__ico{width:32px;height:32px}
    .more-btn__ico svg{width:15px;height:15px}

    /* RESEARCH TOPIC 카드 */
    .topic__list{gap:12px;margin-top:22px}
    .topic-card,
    .topic-card.is-on{height:265px}
    .topic-card__ico,
    .topic-card.is-on .topic-card__ico{top:16px;width:38px;height:38px;border-radius:10px}
    .topic-card__ico svg{width:18px;height:18px}
    .topic-card__body,
    .topic-card.is-on .topic-card__body{left:18px;right:18px;bottom:18px}
    .topic-card__badge{height:25px;padding:0 13px;font-size:12.5px;margin-bottom:10px}
    .topic-card__title,
    .topic-card.is-on .topic-card__title{font-size:18px;line-height:25px}

    /* PUBLICATIONS — 논문 사진은 세로 프레임 (PC 와 같은 3:4) */
    .pub__list{margin-top:22px}
    .pub-card{padding-bottom:20px}
    .pub-card__thumb{width:calc(100% - 16px);height:auto;aspect-ratio:3/4;margin:8px 8px 0}
    .pub-card__body{padding:14px 18px 0}
    .pub-card__author{padding:12px 18px 0}

    /* BOARD 목록 */
    .board-tab{padding:4px;border-radius:20px}
    .board-tab__btn{min-width:72px;height:30px;padding:0 14px;border-radius:15px;font-size:14px}
    .board-list{margin-top:16px}
    .board-list__item + .board-list__item{margin-top:10px}
    .board-list__item a{min-height:0;padding:15px 54px 15px 18px;border-radius:14px}
    .board-list__item a::before{inset:5px;border-radius:9px}
    .board-list__title{font-size:15.5px}
    .board-list__date{margin-top:7px;gap:6px;font-size:13px;line-height:16px}
    .board-list__date svg{width:15px;height:15px}
    .board-list__go{right:13px;bottom:50%;transform:translateY(50%);width:32px;height:32px}
    .board-list__go svg{width:17px;height:17px}

    /* 갤러리 */
    .gal{padding:6px}
    .gal__badge{left:12px;top:12px;height:24px;padding:0 11px;border-radius:12px;font-size:12.5px}
    .gal__caption{left:14px;right:14px;bottom:14px}
    .gal__title{font-size:15.5px}
    .gal__date{margin-top:6px;gap:6px;font-size:12.5px}
    .gal__date svg{width:14px;height:14px}
    .gal__foot{margin-top:10px}

    /* 푸터 */
    .ft{padding:36px 0 22px}
    .ft__inner{gap:24px}
    .ft__info{gap:16px}
    .ft__info dt{font-size:13px}
    .ft__info dd{margin-top:5px;font-size:14px}
    .ft__copy{margin-top:22px;font-size:12px}
}