/* AIPS Lab — aiforalab.com과 같은 틀(남색 바탕·세리프 제목·펼침 카드·영/국문 전환).
   레이아웃: 고정 상단 메뉴 → 히어로(지표) → 소개 → 연구 분야 → 논문 → 특허 → 비전 → 구성원.
   포인트 색만 AIForA의 황갈색 대신 민트로 두어 같은 학과의 다른 연구실임을 드러낸다. */
:root{
  --navy:#0b1a30;--navy2:#0f2544;--panel:#12213a;--panel2:#0d1c33;
  --line:#25406b;--acc:#4fc3a1;--acc2:#8fe3cb;--fg:#eaf1fb;--mut:#9db2d4;--ink-on-acc:#06231b;
  --paper:#ffffff;--paper-ink:#1d2a3a;--r:16px;
  --serif:"Playfair Display","Noto Serif KR",Georgia,serif;
  --sans:Inter,"Noto Sans KR",-apple-system,BlinkMacSystemFont,"Segoe UI","Malgun Gothic",sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--navy);color:var(--fg);font:16px/1.7 var(--sans);word-break:keep-all;overflow-wrap:anywhere}
h1,h2,h3,.serif{font-family:var(--serif)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:6px}
img{max-width:100%}
.wrap{max-width:1080px;margin:0 auto;padding:0 22px}

/* 상단 메뉴 */
nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(11,26,48,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;gap:18px;height:64px;max-width:1240px}
.brand{font-weight:800;letter-spacing:.3px;line-height:1.2}
.brand small{display:block;font:400 11px/1.3 var(--sans);color:var(--mut);letter-spacing:.02em}
.navlinks{margin-left:auto;display:flex;gap:22px;font-size:14px;color:var(--mut)}
.navlinks a{white-space:nowrap}.navlinks a:hover{color:var(--fg)}
.brand,.navcta,.langtog{flex:none}
.navcta{background:var(--acc);color:var(--ink-on-acc);padding:9px 16px;border-radius:20px;font-weight:700;font-size:14px;white-space:nowrap}
.langtog{display:flex;margin-left:6px;border:1px solid var(--line);border-radius:20px;overflow:hidden;flex:none}
.langtog button{background:transparent;color:var(--mut);border:none;padding:6px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit}
.langtog button.active{background:var(--acc);color:var(--ink-on-acc)}
.langtog button:hover:not(.active){color:var(--fg)}
.navmenu{display:none;flex:none;width:42px;height:42px;place-items:center;border:1px solid var(--line);border-radius:12px;background:none;color:var(--fg);cursor:pointer}
.navmenu svg{width:22px;height:22px}
.navmenu[aria-expanded="true"]{border-color:var(--acc);color:var(--acc)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.navsheet{position:absolute;left:0;right:0;top:100%;display:grid;padding:6px 16px 16px;background:var(--navy2);border-bottom:1px solid var(--line);box-shadow:0 18px 40px rgba(0,0,0,.45);max-height:calc(100vh - 70px);overflow-y:auto}
.navsheet[hidden]{display:none}
.navsheet a{display:block;padding:13px 4px;font-size:16px;color:var(--fg);border-bottom:1px solid rgba(37,64,107,.6)}
.navsheet a:hover{color:var(--acc2)}
.navsheet .navsheet-cta{margin-top:12px;border:0;border-radius:24px;text-align:center;background:var(--acc);color:var(--ink-on-acc);font-weight:700}
@media(max-width:900px){.navlinks{display:none}.navcta{margin-left:auto}.navmenu{display:grid}}
/* 메뉴가 한 줄에 다 안 들어가면(영문 등) 스크립트가 nav-compact 를 붙여 ☰ 메뉴로 바꾼다 */
.nav-compact .navlinks{display:none}.nav-compact .navcta{margin-left:auto}.nav-compact .navmenu{display:grid}
@media(min-width:901px){html:not(.nav-compact) .navsheet{display:none!important}}

/* 히어로 */
.hero{position:relative;overflow:hidden;background:radial-gradient(1100px 520px at 72% -10%,#17456a,transparent),linear-gradient(160deg,#0a1424,#0f2544 60%,#0b1a30)}
.hero .wrap{padding:96px 22px 88px}
.kick{color:var(--acc);font-weight:700;letter-spacing:.06em;font-size:13px}
.hero h1{font-size:52px;line-height:1.12;margin:14px 0 14px;max-width:20ch;text-wrap:balance}
.hero p.lead{font-size:19px;color:var(--mut);max-width:64ch;margin:0 0 30px}
.hero p.lead.sub{margin-top:-14px;font-size:15px;color:var(--acc2)}
.hero p.lead b{color:var(--fg)}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:13px 24px;border-radius:26px;font-weight:700;font-size:15px}
.btn.primary{background:var(--acc);color:var(--ink-on-acc)}
.btn.ghost{border:1px solid var(--line);color:var(--fg)}
.btn:hover{filter:brightness(1.08)}
.stats{display:flex;gap:36px;margin-top:52px;flex-wrap:wrap}
.stats div b{font:800 30px/1 var(--serif);color:var(--acc2);font-variant-numeric:lining-nums tabular-nums}
.stats div span{display:block;color:var(--mut);font-size:13px;margin-top:6px}

/* 섹션 공통 */
section{padding:78px 0;border-top:1px solid rgba(37,64,107,.4)}
.eyebrow{color:var(--acc);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:12px}
h2.sec{font-size:34px;margin:8px 0 8px;text-wrap:balance}
.sec-sub{color:var(--mut);max-width:70ch;margin:0 0 34px}
.grid{display:grid;gap:18px}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
@media(max-width:860px){.g2,.g3{grid-template-columns:minmax(0,1fr)}}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;min-width:0}
.card h3{font-size:19px;margin:0 0 8px}.card p{color:var(--mut);margin:0;font-size:15px}
.rcard{border-top:3px solid var(--rc)}
.rcard .rlinks{margin-top:12px;font-size:13px;color:var(--mut)}
.rcard .rlinks a{color:var(--acc2);border-bottom:1px solid rgba(143,227,203,.35)}
.ctag{display:inline-block;color:var(--acc2);font-weight:700;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:10px}

/* 소개 */
.about{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:28px;align-items:start}
.about img{width:100%;border-radius:var(--r);border:1px solid var(--line);aspect-ratio:16/9;object-fit:cover;object-position:45% 50%;display:block}
.about .txt{display:grid;gap:14px;color:var(--mut)}
.about .txt b{color:var(--fg)}
@media(max-width:860px){.about{grid-template-columns:minmax(0,1fr)}}

/* 논문 펼침 카드 */
.pubgroup{margin-bottom:30px}
.pubcat{display:flex;align-items:center;gap:10px;font-size:16px;color:var(--acc2);margin:0 0 14px;padding-bottom:8px;border-bottom:1px solid var(--line);font-weight:700;letter-spacing:.02em;font-family:var(--sans)}
.pubn{font:600 12px/1 var(--sans);color:var(--mut);background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:3px 9px}
.pubs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pubs.wide{grid-template-columns:minmax(0,1fr)}
@media(max-width:820px){.pubs{grid-template-columns:minmax(0,1fr)}}
.pub{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;align-self:start;min-width:0}
.pub.feat{border-color:#2f6b78}
.pub summary{list-style:none;cursor:pointer;padding:16px 46px 16px 20px;display:block;position:relative}
.pub summary::-webkit-details-marker{display:none}
.pub summary::after{content:"+";position:absolute;right:18px;top:15px;color:var(--acc);font-size:22px;font-weight:700;line-height:1}
.pub[open] summary::after{content:"–"}
.pub summary:hover{background:#152743}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.bdg{font:700 11px/1 var(--sans);letter-spacing:.04em;padding:4px 8px;border-radius:20px;border:1px solid var(--line);color:var(--mut)}
.bdg.feat{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc)}
.bdg.role{color:var(--acc2);border-color:#2f6b78}
.ptitle{display:block;font:600 16px/1.4 var(--serif)}
.pub.feat .ptitle{font-size:18px}
.pub .venue{display:block;color:var(--acc2);font-size:12px;margin-top:6px}
.pub .gist{display:block;color:var(--mut);font-size:14px;margin-top:10px;line-height:1.65}
.pbody{padding:4px 20px 20px;border-top:1px solid var(--line)}
.prow{display:grid;grid-template-columns:112px minmax(0,1fr);gap:12px;margin-top:14px;font-size:14px}
.plab{color:var(--acc);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding-top:3px}
.pval{color:var(--mut);min-width:0}
.pval b{color:var(--fg);font-weight:600}
.pval ul{margin:0;padding-left:18px;display:grid;gap:6px}
.pval li::marker{color:var(--acc)}
.pval a{color:var(--acc2);word-break:break-all}
.num{color:var(--fg);font-variant-numeric:tabular-nums;font-weight:600}
@media(max-width:600px){.prow{grid-template-columns:minmax(0,1fr);gap:2px}}

/* 연구 과제 */
.grants{display:grid;gap:12px;margin-top:10px}
.grant{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 18px;align-items:baseline}
.grant .gid{font:600 12px/1.4 ui-monospace,Consolas,monospace;color:var(--acc2)}
.grant .gsub{grid-column:1/-1;color:var(--mut);font-size:13px}
@media(max-width:600px){.grant{grid-template-columns:minmax(0,1fr)}}

/* 특허 */
.patent{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.pat-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:0}
.pat-fig{background:var(--paper);display:grid;place-items:center;padding:18px;margin:0}
.pat-fig img{max-height:340px;width:auto;display:block}
.pat-fig figcaption{color:#53627a;font-size:12px;margin-top:8px;text-align:center}
.pat-info{padding:26px 26px 22px;display:grid;gap:12px;align-content:start}
.pat-no{font:700 12px/1 ui-monospace,Consolas,monospace;color:var(--acc);letter-spacing:.06em}
.pat-info h3{font-size:26px;line-height:1.25;margin:0}
.pat-info .en-name{color:var(--mut);font-size:14px;margin-top:-4px}
.pat-info p.gist{color:var(--fg);margin:0;font-size:16px}
dl.biblio{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 16px;margin:4px 0 0;font-size:13px}
dl.biblio dt{color:var(--acc);font-weight:700;letter-spacing:.04em}
dl.biblio dd{margin:0;color:var(--mut)}
@media(max-width:860px){.pat-top{grid-template-columns:minmax(0,1fr)}}
.patent details{border-top:1px solid var(--line)}
.patent details summary{list-style:none;cursor:pointer;padding:14px 26px;font-weight:700;color:var(--acc2);position:relative;font-size:15px}
.patent details summary::-webkit-details-marker{display:none}
.patent details summary::after{content:"+";position:absolute;right:24px;top:10px;color:var(--acc);font-size:22px}
.patent details[open] summary::after{content:"–"}
.patent details summary:hover{background:#152743}
.patent .pbody{border-top:1px solid var(--line);padding:6px 26px 24px}
.parts{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.parts li{display:grid;grid-template-columns:3.6rem minmax(0,1fr);gap:10px}
.parts .ref{font:700 13px/1.6 ui-monospace,Consolas,monospace;color:var(--acc);text-align:right}
ol.steps{margin:0;padding-left:20px;display:grid;gap:8px}
ol.steps li::marker{color:var(--acc);font-weight:700}
.figs{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:12px;margin-top:16px}
.figs figure{margin:0;background:var(--paper);border-radius:10px;padding:8px;display:grid;gap:6px;align-content:start}
.figs img{width:100%;aspect-ratio:1/1;object-fit:contain;display:block}
.figs figcaption{color:var(--paper-ink);font-size:12px;line-height:1.45}
.figs figcaption b{display:block;color:#0d5f4c}

/* 비전 */
.vcard{display:flex;gap:18px;padding:22px 0;border-bottom:1px solid rgba(37,64,107,.5)}
.vnum{flex:none;width:44px;height:44px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:var(--acc);display:grid;place-items:center;font:800 18px var(--serif)}
.vcard h3{margin:2px 0 6px;font-size:20px}.vcard p{color:var(--mut);margin:0}
.vcard .note{display:block;margin-top:6px;font-size:13px;color:var(--acc2)}

/* 구성원 */
.pi{display:flex;align-items:center;gap:22px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin-bottom:18px}
.piface{width:104px;height:104px;flex:none;border-radius:14px;object-fit:cover;border:1px solid var(--line)}
.pilabel{color:var(--acc);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.piname{font:700 22px/1.25 var(--serif);margin:3px 0}
.pimeta{color:var(--mut);font-size:13px}
.pititles{color:var(--fg);font-size:14px;margin-top:6px}
@media(max-width:600px){.pi{align-items:flex-start}.piface{width:84px;height:84px}}
.cv{margin-bottom:26px}
.cv ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.cv li{display:grid;grid-template-columns:7.4rem minmax(0,1fr);gap:12px;font-size:14px;color:var(--fg)}
.cv li .when{color:var(--acc2);font-variant-numeric:tabular-nums;font-size:13px;padding-top:1px}
@media(max-width:600px){.cv li{grid-template-columns:minmax(0,1fr);gap:0}}
.pgroup{margin-bottom:26px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-top:12px}
.person{display:flex;align-items:center;gap:12px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.face{width:72px;height:72px;flex:none;border-radius:12px;object-fit:cover;object-position:50% 22%;border:1px solid var(--line);background:var(--panel2);display:block}
.mono{width:44px;height:44px;flex:none;border-radius:12px;background:var(--panel2);border:1px solid var(--line);color:var(--acc);display:grid;place-items:center;font:800 18px var(--serif)}
.mono.open{border-style:dashed;color:var(--mut)}
.pname{font-weight:600;font-size:15px}
.role{color:var(--acc2);font-size:12px;margin-top:2px}
.join{margin-top:26px;background:linear-gradient(120deg,#123a4a,#14304f);border:1px solid #2f6b78;border-radius:var(--r);padding:24px 26px;display:grid;gap:10px}
.join h3{margin:0;font-size:21px}
.join ul{margin:0;padding-left:18px;color:var(--fg);display:grid;gap:4px}
.join a{color:var(--acc2);font-weight:700}

footer{border-top:1px solid var(--line);padding:40px 0;color:var(--mut);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap}
footer b{color:var(--fg)}
footer a{color:var(--acc2)}

@media(max-width:600px){
  .wrap{padding:0 16px}
  nav .wrap{gap:10px;height:58px}
  .brand{font-size:15px;line-height:1.12}.brand small{display:none}
  .navcta{display:none}
  .langtog{margin-left:auto}
  .langtog button{padding:10px 11px;font-size:13px}
  .stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
  .hero .wrap{padding:62px 16px 52px}
  .hero h1{font-size:32px;line-height:1.2;max-width:none}
  .hero p.lead{font-size:17px}
  .stats{gap:22px 28px;margin-top:40px}
  section{padding:50px 0}
  h2.sec{font-size:28px}
  .card{padding:20px}
  .pat-info{padding:22px 18px}
  .patent details summary{padding:14px 18px}
  .patent .pbody{padding:6px 18px 20px}
}


/* 뉴스룸 · 연구실 보고서 카드 */
.reps{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.card.rep{display:flex;flex-direction:column;gap:10px;color:var(--fg);transition:transform .15s,border-color .15s}
.card.rep:hover{transform:translateY(-3px);border-color:var(--acc)}
.rep-no{font:700 12px/1.3 var(--sans);letter-spacing:.06em;color:var(--acc)}
.card.rep h3{font-size:21px;line-height:1.3;margin:0}
.card.rep p{color:var(--mut);font-size:14.5px}
.rep-kpis{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 14px;margin-top:4px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.rep-kpis b{display:block;font:800 21px/1.1 var(--serif);color:var(--acc2);font-variant-numeric:tabular-nums}
.rep-kpis span{display:block;color:var(--mut);font-size:12px;margin-top:3px}
.rep-foot{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin-top:auto}
.rep-tags{display:flex;gap:6px;flex-wrap:wrap}
.rep-tags span{font:600 11px/1 var(--sans);padding:5px 8px;border-radius:20px;border:1px solid var(--line);color:var(--mut)}
.rep-go{font-weight:700;color:var(--acc);font-size:14px}
.nr-hero .wrap{padding:72px 22px 56px}
@media(max-width:600px){.nr-hero .wrap{padding:48px 16px 40px}}

/* 소개 영상 */
.film{max-width:1040px}
.film video{display:block;width:100%;max-width:100%;aspect-ratio:16/9;border-radius:var(--r);border:1px solid var(--line);background:#050d1a;box-shadow:0 18px 50px rgba(0,0,0,.35)}

/* 연구실 안내봇 */
.aibot{position:fixed;right:max(16px,env(safe-area-inset-right));bottom:max(16px,env(safe-area-inset-bottom));z-index:90;font-family:var(--sans)}
.aibot svg{width:20px;height:20px;display:block}
.aibot-fab{display:flex;align-items:center;gap:8px;padding:12px 18px;border-radius:999px;border:0;background:var(--acc);color:var(--ink-on-acc);font:700 15px/1 var(--sans);box-shadow:0 10px 30px rgba(0,0,0,.35);cursor:pointer}
.aibot-fab:hover{filter:brightness(1.06)}.aibot.open .aibot-fab{display:none}
.aibot-panel{margin:0;padding:0;width:min(400px,calc(100vw - 32px));height:min(600px,calc(100vh - 32px));display:flex;flex-direction:column;background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:0 20px 60px rgba(0,0,0,.5);overflow:hidden}
.aibot-panel[hidden]{display:none}
.aibot-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 14px 12px 18px;background:var(--panel2);border-bottom:1px solid var(--line)}
.aibot-head b{display:block;font-size:16px;color:var(--fg)}.aibot-head small{display:block;color:var(--mut);font-size:12.5px;line-height:1.4}
.aibot-tools{display:flex;gap:4px;flex:none}
.aibot-ic{width:34px;height:34px;display:grid;place-items:center;border-radius:10px;border:1px solid transparent;background:none;color:var(--mut);cursor:pointer}
.aibot-ic:hover{color:var(--fg);border-color:var(--line)}
.aibot-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;min-height:0}
.aibot-msg{max-width:88%;padding:10px 13px;border-radius:14px;font-size:14.5px;line-height:1.6;overflow-wrap:anywhere}
.aibot-msg p{margin:0}.aibot-msg p+p{margin-top:6px}.aibot-msg ul{margin:4px 0 0;padding-left:18px}
.aibot-msg a{color:var(--acc2)}
.aibot-msg.bot{align-self:flex-start;background:var(--panel2);border:1px solid var(--line);color:var(--fg)}
.aibot-msg.me{align-self:flex-end;background:var(--acc);color:var(--ink-on-acc);font-weight:500}
.aibot-msg.wait p{animation:aibotBlink 1s infinite}
@keyframes aibotBlink{50%{opacity:.35}}
.aibot-chips{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px}
.aibot-chips[hidden]{display:none}
.aibot-chips button{padding:7px 11px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--acc2);font:500 13px/1.3 var(--sans);cursor:pointer;text-align:left}
.aibot-chips button:hover{border-color:var(--acc)}
.aibot-status{margin:0;padding:0 16px;min-height:0;color:var(--mut);font-size:12.5px}
.aibot-status:not(:empty){padding-bottom:8px}
.aibot-form{display:flex;align-items:flex-end;gap:8px;padding:12px;border-top:1px solid var(--line);background:var(--panel2)}
.aibot-in{flex:1;min-width:0;resize:none;max-height:120px;padding:10px 12px;border-radius:12px;border:1px solid var(--line);background:var(--navy);color:var(--fg);font:15px/1.5 var(--sans)}
.aibot-in:focus{outline:2px solid var(--acc);outline-offset:0;border-color:transparent}
.aibot-mic,.aibot-send{width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:12px;border:1px solid var(--line);background:none;color:var(--fg);cursor:pointer}
.aibot-send{background:var(--acc);border-color:var(--acc);color:var(--ink-on-acc)}
.aibot.rec .aibot-mic{background:#e5484d;border-color:#e5484d;color:#fff;animation:aibotPulse 1.2s infinite}
@keyframes aibotPulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.55)}100%{box-shadow:0 0 0 12px rgba(229,72,77,0)}}
@media (prefers-reduced-motion:reduce){.aibot.rec .aibot-mic,.aibot-msg.wait p{animation:none}}
@media (max-width:480px){.aibot-fab-t{display:none}.aibot-fab{padding:14px}.aibot-panel{width:calc(100vw - 24px);height:calc(100vh - 24px)}.aibot{right:12px;bottom:12px}}