:root{--pink:#ff0069;--navy:#193787;--ink:#111;--text:#555;--muted:#777;--line:#ddd;--bg2:#f4f4f4;--max:984px}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{overflow-wrap:break-word;word-break:keep-all;margin:0;font-family:Arial,Helvetica,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;color:var(--text);background:#fff;font-size:16px;line-height:1.6}
a{color:#333;text-decoration:none}
a:hover{color:var(--pink)}
img{max-width:100%;display:block}
.wrap{max-width:var(--max);margin:0 auto;position:relative}
/* ---------- header (logo block + horizontal menu) */
.top{background:#fff;border-bottom:1px solid #e5e5e5;position:relative;z-index:30}
.top .wrap{display:flex;align-items:stretch;min-height:96px}
.logo{flex:0 0 199px;background:var(--pink);color:#fff;font-weight:700;font-size:44px;line-height:1.02;letter-spacing:-.5px;padding:20px 0 0 52px;position:relative;z-index:31}
.logo:hover{color:#fff}
.logo span{display:block}
.home .logo{height:199px;margin-bottom:-103px}                /* hangs over the slideshow, like the original */
.sub .logo{height:96px;overflow:hidden}
.menu{flex:1;display:flex;justify-content:flex-end;align-items:center;margin:0;padding:0 8px 0 20px;list-style:none}
.menu>li{position:relative}
.menu>li>a{display:block;padding:36px 12px;font-size:15px;color:#111;font-weight:bold;white-space:nowrap}
.menu>li:hover>a,.menu>li.on>a{color:var(--pink)}
.menu ul{display:none;position:absolute;left:0;top:100%;min-width:210px;background:#fff;border:1px solid #e5e5e5;border-top:3px solid var(--pink);list-style:none;margin:0;padding:6px 0;box-shadow:0 6px 18px rgba(0,0,0,.08)}
.menu>li:hover ul,.menu>li:focus-within ul{display:block}
.menu ul a{display:block;padding:8px 16px;font-size:14px;color:#555}
.menu ul a:hover{color:var(--pink);background:#fafafa}
.menu-btn{display:none}
/* ---------- home */
.slides{position:relative;aspect-ratio:984/786;overflow:hidden;background:#222}
.slides img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease}
.slides img.on{opacity:1}
.dots{position:absolute;left:0;right:0;bottom:14px;display:flex;justify-content:center;gap:8px;z-index:2}
.dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.55);padding:0;cursor:pointer}
.dots button.on{background:var(--pink)}
.boards{display:grid;grid-template-columns:1fr 2px 1fr;gap:0 28px;padding:34px 0 40px}
.boards .divider{background:#e5e5e5}
.bhead{display:flex;align-items:center;justify-content:space-between;border-bottom:2px solid #e5e5e5;padding-bottom:10px;margin-bottom:8px}
.bhead h2{margin:0;font-size:22px;color:#111;font-weight:normal;display:flex;align-items:center;gap:10px}
.bhead h2:before{content:"";width:6px;height:22px;background:var(--pink);display:inline-block}
.more{font-size:12px;font-weight:bold;color:#fff;background:#999;padding:3px 10px;border-radius:2px;letter-spacing:.5px}
.more:hover{background:var(--pink);color:#fff}
.blist{list-style:none;margin:0;padding:0}
.blist li{border-bottom:1px dotted #ddd;padding:7px 0;display:flex;gap:12px;justify-content:space-between}
.blist a{font-size:15px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1}
.blist a:hover{color:var(--pink)}
.blist .d{font-size:13px;color:#999;white-space:nowrap}
/* ---------- sub pages: left sub-menu column + banner */
.subhead{display:grid;grid-template-columns:199px 1fr;gap:0 2px}
.subnav{background:#fff}
.subnav h2{margin:0;padding:22px 18px 14px;font-size:20px;color:var(--navy);border-bottom:2px solid var(--navy)}
.subnav ul{list-style:none;margin:0;padding:6px 0}
.subnav li a{display:block;padding:8px 18px;font-size:14.5px;color:#555;border-bottom:1px solid #f0f0f0}
.subnav li a:before{content:"· ";color:#bbb}
.subnav li a.on,.subnav li a:hover{color:var(--pink)}
.banner{position:relative;aspect-ratio:783/519;max-height:430px;overflow:hidden}
.banner img{width:100%;height:100%;object-fit:cover}
.banner .cap{position:absolute;right:0;bottom:36px;background:rgba(255,255,255,.88);padding:10px 22px 12px}
.banner .cap small{display:inline-block;background:#0071c5;color:#fff;font-size:12px;font-weight:bold;letter-spacing:1px;padding:3px 10px;margin-bottom:4px;text-transform:uppercase}
.banner .cap b{display:block;font-size:30px;color:#222;line-height:1.1}
.content{padding:34px 0 50px 201px;min-height:300px}
.content h1{font-size:26px;color:#111;font-weight:normal;margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid #ddd}
.content h1 b{color:var(--pink);font-weight:bold}
.content h2{font-size:20px;color:var(--navy);margin:34px 0 12px}
.content h3{font-size:17px;color:#222;margin:0 0 6px}
.content p{text-align:justify;margin:.5em 0 1em}
.lead{color:#333}
/* ---------- components */
.pub{padding:12px 0;border-bottom:1px dotted #ccc}
.pub .t{font-weight:bold;color:#222;display:block;margin-bottom:2px}
.pub a.t:hover{color:var(--pink)}
.pub .c{color:#666;font-size:14.5px}
.press{margin-top:7px;display:flex;flex-wrap:wrap;gap:5px;align-items:center}
.press .lbl{font-size:11.5px;font-weight:bold;color:var(--pink);letter-spacing:.5px;text-transform:uppercase;margin-right:3px}
.chip{display:inline-block;font-size:12.5px;padding:2px 9px;border:1px solid #f3b6cd;color:#c4004f;border-radius:2px;background:#fff6fa}
.chip:hover{background:var(--pink);color:#fff;border-color:var(--pink)}
.year{font-size:19px;color:var(--navy);margin:30px 0 2px;padding-bottom:5px;border-bottom:2px solid var(--navy)}
.toolbar{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:0 0 6px}
.toolbar input[type=search]{flex:1 1 240px;padding:9px 12px;border:1px solid #ccc;font-size:15px}
.toolbar label{font-size:14px;display:flex;gap:6px;align-items:center}
.count{font-size:13.5px;color:#999}
.years{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:14px;margin:10px 0}
.years a{color:var(--navy)}
.cv{display:grid;grid-template-columns:150px 1fr;gap:4px 16px;margin:0}
.cv dt{font-weight:bold;color:#333}
.cv dd{margin:0 0 6px}
.pi-top{display:grid;grid-template-columns:165px 1fr;gap:26px;align-items:start;margin-bottom:10px}
.pi-top img{border:1px solid #ddd}
.pi-top .nm{font-size:24px;color:#111;margin:0 0 4px}
.pi-top .nm small{font-size:15px;color:#777;font-weight:normal}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(166px,1fr));gap:26px 22px}
.person .ph{aspect-ratio:166/180;border:1px solid #ddd;background:#f3f3f3;display:flex;align-items:center;justify-content:center;font-size:40px;color:#bbb;font-weight:bold;overflow:hidden}
.person .ph img{width:100%;height:100%;object-fit:cover;object-position:center 20%}
.person .nm{font-weight:bold;color:#222;margin-top:10px;font-size:15.5px}
.person dl{margin:4px 0 0;font-size:13.5px;line-height:1.55}
.person dt{color:var(--navy);font-weight:bold;display:inline}
.person dd{display:inline;margin:0}
.person dd:after{content:"";display:block}
.group-title{font-size:18px;color:var(--navy);margin:34px 0 16px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
.alumni{columns:3 200px;column-gap:24px;list-style:none;padding:0;margin:0}
.alumni li{padding:5px 0 5px 14px;position:relative;break-inside:avoid}
.alumni li:before{content:"";position:absolute;left:0;top:14px;width:5px;height:5px;border-radius:50%;background:var(--navy)}
.news-item{padding:22px 0;border-bottom:1px dotted #ccc}
.news-item h2{margin:2px 0 10px;font-size:19px;color:#222}
.date{font-size:13px;color:#999}
.links{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.simple{list-style:none;margin:0;padding:0}
.simple li{padding:11px 0;border-bottom:1px dotted #ccc}
.simple .t{color:#222;font-weight:bold}
.simple .s{font-size:14px;color:#777}
.db{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.db .box{border:1px solid #ddd;border-top:3px solid var(--navy);padding:16px 18px}
/* ---------- footer (grey MGSSB + pink bar) */
.foot{margin-top:10px;border-top:1px solid #ddd}
.foot .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:space-between;align-items:flex-end;padding:18px 0 14px}
.foot .mark{font-size:34px;font-weight:bold;color:#d6d6d6;letter-spacing:1px;line-height:1}
.foot .addr{font-size:13px;color:#888;line-height:1.6}
.foot .copy{font-size:13px;color:#999}
.foot .bar{height:22px;background:var(--pink)}
/* ---------- responsive */
@media (max-width:1010px){.wrap{padding:0 16px}.top .wrap{padding:0}.home .logo{margin-left:0}}
@media (max-width:900px){
  .menu-btn{display:block;margin-left:auto;align-self:center;margin-right:14px;background:#fff;border:1px solid #ccc;padding:8px 12px;font-size:15px;color:#111;cursor:pointer}
  .menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;align-items:stretch;padding:6px 0 12px;border-bottom:3px solid var(--pink);box-shadow:0 10px 20px rgba(0,0,0,.08)}
  .menu.open{display:flex}
  .menu>li>a{padding:12px 20px;border-bottom:1px solid #f0f0f0}
  .menu ul{display:block;position:static;border:0;box-shadow:none;padding:0 0 6px 14px;min-width:0}
  .top .wrap{min-height:72px}
  .logo,.home .logo,.sub .logo{flex:0 0 auto;height:72px;margin:0;padding:12px 16px;font-size:20px;line-height:1.05;display:flex;flex-direction:column;justify-content:center}
  .logo span{display:inline}
  .boards{grid-template-columns:1fr;gap:30px}
  .boards .divider{display:none}
  .subhead{grid-template-columns:1fr}
  .subnav{order:2}
  .subnav h2{padding:16px 0 10px}
  .subnav ul{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0}
  .subnav li a{border:1px solid #ddd;padding:5px 10px;font-size:13.5px}
  .subnav li a:before{content:""}
  .banner .cap{bottom:16px;padding:6px 14px 8px}
  .banner .cap b{font-size:22px}
  .content{padding:24px 0 40px}
  body{font-size:15px;line-height:1.65}
  .content p,.news-item p{text-align:left}
  .content h1{font-size:23px;line-height:1.3}
  .content h2{font-size:18px;line-height:1.35;margin-top:28px}
  .news-item h2{font-size:17px;line-height:1.4}
  .bhead h2{font-size:19px}
  .blist li{flex-direction:column;gap:2px;padding:10px 0}
  .blist a{white-space:normal;line-height:1.45}
  .pub .t{line-height:1.45}
  .pub .c,.simple .s{font-size:13.5px;line-height:1.55}
  .person dd{word-break:break-all}
  .cv dt{font-size:14px}
  .foot .addr{font-size:12.5px}
  .foot .mark{font-size:26px}
}
@media (max-width:560px){
  .pi-top{grid-template-columns:110px 1fr;gap:16px}
  .cv{grid-template-columns:1fr}.cv dd{margin-bottom:12px}
  .people{grid-template-columns:repeat(2,1fr);gap:20px 14px}
  .content h1{font-size:22px}
  .banner .cap{display:none}
}