/* 고전적인 학계 홈페이지 스타일.
   장식을 거의 쓰지 않고 활자와 가로줄만으로 구분합니다. */

:root{
  --ink:#1b1613; --body:#231815; --muted:#5a5550; --link:#2b6190; --visited:#5b5080;
  --rule:#bbb; --faint:#e0e0e0;
  --gnu-blue:#0D8DCF;   /* 경상국립대 상징색 (PANTONE 2192C) */
  --serif:Charter,"Iowan Old Style",Georgia,"Apple SD Gothic Neo","Malgun Gothic",serif;
  --sans:-apple-system,"Helvetica Neue","Segoe UI","Apple SD Gothic Neo",Arial,sans-serif;
  --wrap:1080px;
}
*{box-sizing:border-box}
/* 페이지 길이와 무관하게 스크롤바 자리를 항상 확보해 가로 폭이 흔들리지 않게 합니다. */
html{scrollbar-gutter:stable}
@supports not (scrollbar-gutter: stable){html{overflow-y:scroll}}
body{margin:0;background:#fff;color:var(--body);font:17px/1.6 var(--serif)}
img{max-width:100%}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 32px}
a{color:var(--link)}
a:visited{color:var(--visited)}
a:hover{color:#14405f}

/* 머리말 — 로고와 메뉴를 같은 줄에 */
header{border-bottom:1px solid var(--rule)}
.wrap.bar{display:flex;align-items:flex-end;justify-content:space-between;gap:28px;
  padding:24px 32px 12px}
.bar .logo img{height:60px;width:auto;display:block}
nav{display:inline}
nav a{text-decoration:none;color:var(--body);font-size:16px}
nav a:visited{color:var(--body)}
nav a:hover{text-decoration:underline;color:var(--link)}
nav a+a::before{content:"|";color:var(--rule);display:inline-block;margin:0 9px}
nav a[aria-current]{color:var(--ink);font-weight:bold}
/* 언어 전환 — 각 페이지 대제목 옆 */
.lang{margin-left:14px;font:normal 15px/1 var(--serif);color:var(--link);
  text-decoration:underline;vertical-align:middle;letter-spacing:.04em}
.lang:visited{color:var(--link)}

/* 첫 화면 */
.wrap.hero{padding:44px 32px 10px;border:0}
.hero h1{margin:0 0 10px;font-size:32px;line-height:1.3;font-weight:bold;color:var(--ink);
  letter-spacing:-.005em;max-width:none}
.hero .tagline{margin:0;font-size:20px;color:var(--ink);line-height:1.45}
.hero .tagline .alt{display:block;font-size:17px;color:var(--muted);margin-top:3px}
.hero p{margin:20px 0 0;max-width:none;font-size:17px}
.hero .affil{margin:16px 0 0;font-size:16px;color:var(--gnu-blue)}

.wrap.phead{padding:40px 32px 2px;border:0}
.phead h1{margin:0;font-size:27px;font-weight:bold;color:var(--ink);line-height:1.3}
.phead p{margin:12px 0 0;max-width:none;color:var(--muted);font-size:16.5px}

/* 구역 */
section.wrap{padding:22px 32px 6px;border:0}
h2{margin:34px 0 14px;font:bold 24px/1.3 var(--serif);color:var(--ink);
  text-transform:none;border-bottom:1px solid var(--rule);padding-bottom:5px}
h3{color:var(--ink)}
.sio{color:var(--gnu-blue)}
.cat{margin:28px 0 12px 18px;font:bold 19.5px/1.4 var(--serif);color:var(--ink);
  border-bottom:1px dotted var(--faint);padding-bottom:4px}
section.wrap>.cat:first-of-type{margin-top:6px}
.more{display:inline-block;margin-top:12px;font-size:16px;color:var(--link);
  text-decoration:underline;border:0;padding:0}

/* 연구 */
.areas{display:block}
.area{margin-bottom:22px}
.area img{display:none}
.area h3{margin:0 0 3px;font-size:17.5px;font-weight:bold;line-height:1.4}
.area p{margin:0 0 4px;font-size:17px}
.tags{display:inline}
.tags i{font-style:italic;font-size:16px;color:var(--muted);background:none;padding:0}
.tags i+i::before{content:", "}

.area-full{padding:0 0 34px}
.area-full+.area-full{border-top:1px solid var(--faint);padding-top:28px}
.area-full h3{margin:0 0 8px;font-size:21px;font-weight:bold}
.area-full h3::before{content:"\25AA";color:var(--gnu-blue);margin-right:.4em;font-size:.8em;vertical-align:.08em}
.area-full p{margin:0 0 8px;font-size:17px}
.gallery.figs{margin-top:16px}
.apps-sec h2{border-bottom:0;padding-bottom:0}
.carousel.figs{max-width:none;margin-top:16px}
.carousel.figs .ctrack{gap:14px}
.carousel.figs .ctrack figure{flex:0 0 calc((100% - 42px) / 4);scroll-snap-align:start;margin:0}
.carousel.figs .ctrack img{width:100%;aspect-ratio:4/3;object-fit:contain;
  border:1px solid var(--faint);background:#fff;cursor:zoom-in;padding:6px}
.gallery.figs img{object-fit:contain;background:#fff;padding:6px}
.carousel.figs figcaption{margin-top:5px;font:15px/1.45 var(--serif);color:var(--muted)}
.applist{display:block;margin:0;padding:0;list-style:none}
.applist li{display:inline;font-size:17px;color:var(--body);background:none;border:0;padding:0}
.applist li+li::before{content:" · "}

/* 목록 */
.rows{margin:0;padding:0;list-style:none}
.rows>li{display:block;padding:6px 0;border:0}
.rows>li:last-child{border:0}
.rows time{display:inline;font-size:16.5px;color:var(--muted);margin-right:8px}
.rows time::after{content:" —"}

.pubs{margin:0;padding-left:1.9em;list-style:decimal}
.pubs li{padding:0 0 20px;border:0;position:static;display:list-item}
.pubs li:last-child{border:0}
.pubs li::before{content:none}
.pubs .t{display:block;font-size:17px;color:var(--ink);line-height:1.5}
.pubs .a{display:block;font-size:16.5px;color:var(--body);line-height:1.55}
.pubs .vline{display:block;line-height:1.55}
.pubs .v{display:inline;font:italic 16.5px/1.55 var(--serif);color:var(--body)}
.pubs b{font-weight:bold;color:var(--ink)}
.pubs .status{display:block;font-style:italic;color:var(--muted);font-size:16px}
.meta{display:inline;margin:0}
.meta a{margin-left:6px}
.meta a,.meta span{font:16px/1.6 var(--serif);border:0;padding:0;
  color:var(--link);text-decoration:underline}
.meta a::before{content:"["}
.meta a::after{content:"]"}
.meta a:hover{background:none}

.proj{margin:0;padding:0 0 0 18px;list-style:none}
.proj li{padding:0 0 17px;border:0}
.proj li:last-child{border:0}
.proj h3{margin:0 0 2px;font-size:17.5px;font-weight:bold;line-height:1.45}
.proj .line{font-size:16.5px;color:var(--muted)}
.proj .line b{color:var(--ink);font-weight:bold}
.proj p{margin:4px 0 0;font-size:17px}
.proj .out{margin:4px 0 0;font-size:16.5px;color:var(--muted);font-style:italic}

/* 사람 */
.pcard{display:block;padding-bottom:20px;border-bottom:1px solid var(--faint)}
.pcard img{width:165px;float:left;margin:3px 26px 12px 0;border:1px solid var(--faint)}
.pcard h3{margin:0 0 2px;font-size:22px;font-weight:bold}
.pcard .role{font-size:16.5px;color:var(--muted);margin-bottom:10px}
.pcard p{margin:0 0 10px;font-size:17px;max-width:none}
.pcard .plabel{margin:12px 0 3px;font:bold 16px/1.4 var(--serif);color:var(--ink)}
.pcard .ml{display:grid;grid-template-columns:152px 1fr;gap:1px 16px;font-size:16px;
  line-height:1.6}
.pcard .ml .when{color:var(--muted);font-variant-numeric:tabular-nums}
.pcard .pmeta{margin:4px 0 0;font-size:16px;color:var(--body)}
.pcard .pmeta+.pmeta{margin-top:3px}
.pcard::after{content:"";display:block;clear:both}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:30px 26px}
.person{display:block}
.person img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;
  margin-bottom:10px;border:0}
.person h4{display:block;margin:0 0 3px;font-size:17.5px;font-weight:bold;color:var(--ink)}
.person .sub{display:block;font-size:15.5px;color:var(--muted);line-height:1.5}
.recruit{margin:16px 0 0;font-size:17px;color:var(--body)}
.empty{color:var(--muted);font-size:17px;font-style:italic}

/* 교수 */
.wrap.profhead{display:block;padding:38px 32px 18px;border-bottom:1px solid var(--rule)}
.profhead img{width:175px;float:left;margin:4px 28px 14px 0;border:1px solid var(--faint)}
.profhead h1{margin:0 0 3px;font-size:27px;font-weight:bold;color:var(--ink)}
.profhead .role{font-size:17px;color:var(--muted)}
.profhead dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:2px 16px;
  font-size:16.5px}
.profhead dt{color:var(--muted)}
.profhead dd{margin:0}
.profhead::after{content:"";display:block;clear:both}

.cv{margin:0;padding:0 0 0 18px;list-style:none}
.cv>li{display:block;padding:0 0 15px;border:0}
.cv>li:last-child{border:0}
.cv .when{display:block;float:right;font-size:16.5px;color:var(--muted);margin-left:20px}
.cv h3{margin:0 0 2px;font-size:16.5px;font-weight:bold;line-height:1.45}
.cv .org{font-size:17px;color:var(--body)}
.cv ul{margin:4px 0 0;padding-left:1.2em;font-size:16.5px;color:var(--muted);list-style:square}
.cv ul li{margin-bottom:2px}
.cv>li::after{content:"";display:block;clear:both}
.plain{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 44px;
  margin:0;padding:0 0 0 18px;list-style:none;font-size:17px}
.plain li{padding:2px 0}
.plain li::before{content:"· ";color:var(--muted)}

/* 소식 */
.ndetail{border-top:1px solid var(--faint);padding:20px 0}
section.wrap>.ndetail:first-of-type{border-top:0;padding-top:6px}
section.wrap>.ndetail:last-of-type{border-bottom:1px solid var(--faint)}
.ndetail.flat{padding:20px 0}
.ndetail summary{display:grid;grid-template-columns:112px 1fr auto;gap:22px;
  align-items:baseline;padding:0;cursor:pointer;list-style:none}
.ndetail .mark{font:14px/1.6 var(--serif);color:var(--link)}
.ndetail .mark::after{content:"+"}
.ndetail[open] .mark::after{content:"\2212"}
.ndetail.flat{display:grid;grid-template-columns:112px 1fr;gap:22px;align-items:baseline}
.ndetail summary::-webkit-details-marker{display:none}
.ndetail time{font-size:16.5px;color:var(--ink);font-weight:bold}
.ndetail time::after{content:none}
.ndetail .sum{font-size:17px;line-height:1.6}
.ndetail .mark{font-size:14px;color:var(--link)}
.ndetail[open] .mark{color:#14405f}
.ndetail summary:hover .sum{color:#14405f}
.nbody{padding:14px 0 2px 134px}
.nfigs{display:block}

/* 사진 여러 장 — 화살표로 넘기기 */
.carousel{max-width:620px}
.ctrack{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none}
.ctrack::-webkit-scrollbar{display:none}
.ctrack figure{flex:0 0 100%;scroll-snap-align:start;margin:0}
.cnav{display:flex;align-items:center;gap:8px;margin-top:8px}
.cbtnbase,.cnav button{font:17px/1 var(--serif);color:var(--link);background:none;
  border:1px solid var(--rule);padding:3px 11px;cursor:pointer}
.cnav button:hover:not(:disabled){color:#14405f;border-color:#14405f}
.cnav button:disabled{color:var(--faint);border-color:var(--faint);cursor:default}
.cnum{margin-left:6px;font:15.5px/1 var(--serif);color:var(--muted);
  font-variant-numeric:tabular-nums}
.nbody img{display:block;max-width:620px;width:100%;border:1px solid var(--faint)}
.ctrack img{max-width:none;width:100%;aspect-ratio:3/2;object-fit:contain;background:#f4f4f2}
.nbody figcaption{margin-top:6px;font:italic 16px/1.6 var(--serif);color:var(--muted)}
.nbody p{margin:12px 0 0;font-size:17px;max-width:none}
.nbody figure{margin:0}

/* 홈의 최근 소식 — 목록이 짧아 간격을 좁게 */
.newsbrief .ndetail{padding:11px 0}
.newsbrief .ndetail:first-of-type{border-top:0;padding-top:4px}
.newsbrief .ndetail:last-of-type{border-bottom:1px solid var(--faint)}
.newsbrief .nbody{padding-top:10px}

/* 홈 사진 */
.gallery{display:grid;grid-template-columns:repeat(4,1fr);gap:16px 14px}
.gallery figure{margin:0}
.gallery img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border:1px solid var(--faint);cursor:zoom-in}
.gallery figcaption{margin-top:5px;font:15px/1.45 var(--serif);color:var(--muted)}

/* 사진 크게 보기 */
.lightbox{position:fixed;inset:0;z-index:50;display:flex;align-items:center;
  justify-content:center;flex-direction:column;gap:12px;padding:40px;
  background:rgba(255,255,255,.97);cursor:zoom-out}
/* 그림마다 크기가 제각각이라 화살표로 넘길 때 창이 들썩이던 문제.
   .lbframe 으로 칸을 고정하고 그림은 그 안에 가운데 둡니다. 작은 그림을
   억지로 늘리지는 않습니다 — 논문 그림은 글자가 있어 확대하면 뿌예집니다. */
.lbframe{width:min(1100px,92vw);height:72vh;display:flex;
  align-items:center;justify-content:center}
.lightbox img{max-width:100%;max-height:100%;width:auto;height:auto;
  border:1px solid var(--faint)}
.lightbox .cap{font:16px/1.5 var(--serif);color:var(--muted);text-align:center;
  max-width:760px}
.lightbox .note{font:14px/1.5 var(--serif);color:#8a8580}
.lightbox .close{position:absolute;top:18px;right:24px;font:22px/1 var(--serif);
  color:var(--muted);background:none;border:0;cursor:pointer}
.lightbox .lbprev,.lightbox .lbnext{position:absolute;top:50%;transform:translateY(-50%);
  font:40px/1 var(--serif);color:var(--muted);background:none;border:0;cursor:pointer;
  padding:10px 18px}
.lightbox .lbprev{left:12px}
.lightbox .lbnext{right:12px}
.lightbox .lbprev:hover:not(:disabled),.lightbox .lbnext:hover:not(:disabled){color:var(--link)}
.lightbox .lbprev:disabled,.lightbox .lbnext:disabled{color:var(--faint);cursor:default}

/* 모집 안내 */
.join{background:none;border:0;border-top:1px solid var(--rule);padding:26px 0 6px;
  margin-top:18px;text-align:center}
.join p{margin:0;max-width:none}
.join .jko{font-size:24px;line-height:1.45;font-weight:bold;color:var(--ink);
  letter-spacing:-.005em}
.join .jen{margin-top:7px;font-size:17px;color:var(--muted)}
.join .jmail{margin-top:14px;font-size:17px}

/* 꼬리말 */
footer.wrap{margin:80px auto 0;padding:24px 32px 60px;border-top:2px solid var(--rule);
  font:16px/1.7 var(--serif);color:var(--muted)}
.fcols{display:flex;gap:48px;flex-wrap:nowrap;align-items:flex-start}
.fcols>div{min-width:0}
.mascot{margin-left:auto;flex:0 0 auto}
.mascot img{height:108px;width:auto;display:block}
.fcols>div{margin-bottom:6px}
footer strong{display:block;color:var(--ink);font-weight:bold;margin-bottom:3px;font-size:16px}
.copy{margin-top:26px;padding-top:0;border:0;font-size:15px;color:#888}

@media(max-width:820px){
  .plain{columns:1}
  .rfull img,.pcard img,.profhead img{float:none;margin:0 0 14px;width:100%;max-width:300px}
  .cv .when{float:none;display:block;margin:0}
  .ndetail summary,.ndetail.flat{grid-template-columns:1fr;gap:3px}
  .nbody{padding-left:0}
  .bar{flex-wrap:wrap;align-items:flex-start;gap:12px}
  .grid4,.gallery{grid-template-columns:repeat(2,1fr)}
  /* 논문 그림은 좁은 화면에서 4장이면 알아볼 수 없으므로 2장씩 */
  .carousel.figs .ctrack figure{flex:0 0 calc((100% - 14px) / 2)}
  .join .jko{font-size:20px}
  /* 좁은 화면에서는 사진이 작아 배경이 비치면 산만합니다. 완전 불투명으로. */
  .lightbox{background:#fff;padding:40px 12px}
  /* 좁은 화면에서는 칸을 고정하지 않습니다. 화면이 작아 그림 하나씩만 보게
     되므로 들썩임은 거의 없는데, 빈 여백만 크게 늘어납니다. */
  .lbframe{height:auto;max-height:70vh}
  /* 화살표가 사진 위에 겹치므로 흰 바탕을 깔아 읽히게 합니다. */
  .lightbox .lbprev,.lightbox .lbnext{font-size:32px;padding:8px 12px;
    background:rgba(255,255,255,.85)}
  .lightbox .close{top:8px;right:8px;padding:10px 14px}
  .plain{grid-template-columns:1fr}
  .fcols{flex-direction:column;gap:14px}
  .mascot{margin-left:0;align-self:flex-start}
  .mascot img{height:70px}
}