/* =========================================================
   POSTECH 박태준미래전략연구소 (TJPI) — 리뉴얼 시안
   Pure static CSS. No build step.
   ========================================================= */

:root{
  --ink:#14161c;
  --ink-2:#1d212b;
  --ink-3:#2a3040;
  --paper:#ffffff;
  --paper-2:#f7f5f1;
  --paper-3:#efeae2;
  --line:#e2ddd4;
  --line-dark:rgba(255,255,255,.14);

  --text:#23262e;
  --text-2:#4d5462;
  --text-3:#8a8f9c;
  --on-dark:#f2efe9;
  --on-dark-2:#a9a89f;

  --crimson:#b31b2c;
  --crimson-d:#8f1522;
  --bronze:#a9834e;
  --bronze-l:#c8a570;
  --gold:#c9a86a;

  /* 명조는 '인용문 전용'이다. 제목·본문에는 쓰지 않는다. */
  --quote:"Noto Serif KR",'Nanum Myeongjo',Georgia,serif;
  --sans:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,
         'Apple SD Gothic Neo','Malgun Gothic',"Noto Sans KR",sans-serif;
  /* 한글은 400 이 가늘어 보인다. 가변 폰트라 450 이라는 중간값을 쓸 수 있다. */
  --w-body:450;
  --w-head:700;

  --w:1280px;
  --pad:clamp(20px,4vw,48px);
  --r:2px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--text);
  font-family:var(--sans);font-size:16px;line-height:1.75;font-weight:var(--w-body);
  letter-spacing:-.01em;word-break:keep-all;overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
h1,h2,h3,h4{margin:0;font-weight:var(--w-head);line-height:1.35;letter-spacing:-.02em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}

.wrap{max-width:var(--w);margin:0 auto;padding-inline:var(--pad)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:8px;top:8px;z-index:999;background:#fff;padding:10px 16px;border:2px solid var(--crimson)}

/* ---------- Eyebrow / section heads ---------- */
.eyebrow{
  font-size:11px;letter-spacing:.22em;text-transform:uppercase;
  color:var(--bronze);font-weight:700;display:flex;align-items:center;gap:10px;
}
.eyebrow::before{content:"";width:24px;height:1px;background:var(--bronze);display:block}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:36px;flex-wrap:wrap}
.sec-head h2{font-family:var(--sans);font-size:clamp(26px,3vw,38px);margin-top:12px}
.sec-head p{color:var(--text-2);font-size:15px;margin-top:8px;max-width:52ch}

.more{
  font-size:13px;letter-spacing:.06em;color:var(--text-2);
  border-bottom:1px solid var(--line);padding-bottom:4px;transition:.2s;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
}
.more:hover{color:var(--crimson);border-color:var(--crimson)}
.more::after{content:"→";transition:transform .2s}
.more:hover::after{transform:translateX(4px)}

/* =========================================================
   Utility bar
   ========================================================= */
.util{background:var(--ink);color:var(--on-dark-2);font-size:12px}
.util .wrap{display:flex;align-items:center;justify-content:flex-end;gap:22px;height:38px}
.util a{transition:.2s}
.util a:hover{color:#fff}
.util .lang{display:flex;align-items:center;gap:10px}
.util .lang a{letter-spacing:.1em;font-weight:600;font-size:11px}
.util .lang a.on{color:#fff}
.util .lang span{opacity:.3}
.util .sns{display:flex;gap:12px}
.util .sns a{width:20px;height:20px;display:grid;place-items:center;border:1px solid var(--line-dark);border-radius:50%}
.util .sns svg{width:10px;height:10px;fill:currentColor}
.util select{
  background:transparent;color:var(--on-dark-2);border:1px solid var(--line-dark);
  font-size:11px;padding:4px 8px;border-radius:2px;font-family:var(--sans);
}
.util select option{color:#222}

/* =========================================================
   Header
   ========================================================= */
.hd{position:sticky;top:0;z-index:100;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.hd .wrap{display:flex;align-items:center;justify-content:space-between;gap:32px;height:84px}

.brand{display:flex;align-items:center;gap:14px;flex:none}
.brand .mark{
  font-family:var(--sans);font-size:30px;font-weight:700;letter-spacing:-.06em;
  color:var(--crimson);line-height:1;
}
.brand .txt{border-left:1px solid var(--line);padding-left:14px;line-height:1.25}
.brand .txt b{display:block;font-size:9px;letter-spacing:.28em;color:var(--text-3);font-weight:700}
.brand .txt span{display:block;font-size:16px;font-weight:700;letter-spacing:-.03em;color:var(--ink)}

.gnb{display:flex;gap:clamp(18px,2.6vw,42px);height:100%;align-items:stretch}
.gnb>li{display:flex;align-items:center;position:relative}
.gnb>li>a{
  font-size:15.5px;font-weight:600;letter-spacing:-.03em;padding:6px 0;position:relative;white-space:nowrap;
}
.gnb>li>a::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--crimson);
  transform:scaleX(0);transform-origin:left;transition:transform .25s;
}
.gnb>li:hover>a::after,.gnb>li.on>a::after{transform:scaleX(1)}

/* mega */
.mega{
  position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px);
  background:#fff;border:1px solid var(--line);box-shadow:0 18px 40px rgba(20,22,28,.10);
  min-width:190px;padding:14px 0;opacity:0;visibility:hidden;transition:.22s;
}
.gnb>li:hover .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
/* 오른쪽 끝 메뉴의 드롭다운은 가운데 정렬하면 화면 밖으로 나가 가로 스크롤이 생긴다.
   마지막 두 항목만 오른쪽 기준으로 붙인다. */
.gnb>li:nth-last-child(-n+2) .mega{left:auto;right:0;transform:translateY(6px)}
.gnb>li:nth-last-child(-n+2):hover .mega{transform:translateY(0)}
.mega a{display:block;padding:8px 22px;font-size:14px;color:var(--text-2);white-space:nowrap;transition:.18s}
.mega a:hover{color:var(--crimson);background:var(--paper-2)}

.hd-search{display:flex;align-items:center;gap:8px;border-bottom:1px solid var(--line);padding-bottom:5px;flex:none}
.hd-search input{border:0;outline:0;font-family:var(--sans);font-size:13px;width:120px;
  background:transparent;transition:width .2s ease}
.hd-search svg{width:14px;height:14px;stroke:var(--text-3);fill:none;stroke-width:2}

.burger{display:none;width:40px;height:40px;place-items:center}
.burger span{display:block;width:22px;height:2px;background:var(--ink);position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--ink)}
.burger span::before{top:-7px}.burger span::after{top:7px}

/* =========================================================
   Hero
   ========================================================= */
.hero{
  position:relative;background:var(--ink);color:var(--on-dark);overflow:hidden;
  min-height:min(78vh,660px);display:flex;align-items:center;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(120% 90% at 82% 15%, rgba(201,168,106,.20), transparent 58%),
    radial-gradient(90% 80% at 8% 92%, rgba(179,27,44,.26), transparent 60%),
    linear-gradient(160deg,#14161c 0%,#1b1f2a 52%,#101218 100%);
}
.hero::after{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px);
  background-size:100% 46px;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
          mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);
}
.hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(64px,9vw,110px)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(32px,6vw,80px);align-items:center}

.hero .eyebrow{color:var(--gold)}
.hero .eyebrow::before{background:var(--gold)}
.hero h1{
  font-family:var(--sans);font-weight:600;
  font-size:clamp(30px,4.4vw,58px);line-height:1.32;letter-spacing:-.035em;
  margin:26px 0 22px;
}
.hero h1 em{font-style:normal;color:var(--gold)}
.hero .lead{color:#c9c6bd;font-size:clamp(15px,1.3vw,17px);max-width:46ch;line-height:1.9}
.hero .en{margin-top:22px;font-size:13px;color:var(--on-dark-2);font-style:italic;letter-spacing:.01em;max-width:50ch}
.hero-cta{display:flex;gap:12px;margin-top:38px;flex-wrap:wrap}
.btn{
  display:inline-flex;align-items:center;gap:10px;padding:14px 26px;
  font-size:14px;font-weight:600;letter-spacing:-.01em;border:1px solid transparent;transition:.22s;
}
.btn-p{background:var(--crimson);color:#fff}
.btn-p:hover{background:var(--crimson-d)}
.btn-g{border-color:rgba(255,255,255,.28);color:var(--on-dark)}
.btn-g:hover{border-color:var(--gold);color:var(--gold)}
.btn::after{content:"→"}

/* featured card */
.feat{
  background:rgba(255,255,255,.045);border:1px solid var(--line-dark);
  backdrop-filter:blur(6px);padding:26px;
}
.feat .tag{
  display:inline-block;font-size:10px;letter-spacing:.18em;font-weight:700;
  color:var(--ink);background:var(--gold);padding:5px 10px;margin-bottom:18px;
}
.feat-body{display:flex;gap:20px;align-items:flex-start;color:inherit}
.feat-body:hover h3{color:var(--gold)}
.feat-body img{transition:transform .3s ease}
.feat-body:hover img{transform:translateY(-3px)}
.feat-body img{width:112px;flex:none;box-shadow:0 14px 30px rgba(0,0,0,.45)}
.feat h3{font-family:var(--sans);font-size:19px;line-height:1.5;color:#fff}
.feat p{font-size:13px;color:var(--on-dark-2);margin-top:10px;line-height:1.75}
.feat .meta{font-size:11px;letter-spacing:.08em;color:var(--gold);margin-top:14px}
.feat-nav{display:flex;gap:8px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line-dark);align-items:center}
.feat-nav button{width:30px;height:30px;border:1px solid var(--line-dark);display:grid;place-items:center;font-size:12px;color:var(--on-dark-2);transition:.2s}
.feat-nav button:hover{border-color:var(--gold);color:var(--gold)}
.feat-nav .count{margin-left:auto;font-size:11px;letter-spacing:.12em;color:var(--on-dark-2)}

/* =========================================================
   Intro / stats
   ========================================================= */
.intro{padding-block:clamp(64px,8vw,104px);background:var(--paper)}
.intro-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,72px)}
.intro h2{font-family:var(--sans);font-size:clamp(24px,2.6vw,34px);line-height:1.5;margin-top:14px}
.intro .body p{color:var(--text-2);font-size:15.5px;line-height:2}
.intro .body p+p{margin-top:18px}
.sign{margin-top:26px;font-size:14px;color:var(--text)}
.sign b{font-weight:700;font-size:18px;margin-left:8px}

.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);margin-top:56px;border:1px solid var(--line)}
.stats li{background:var(--paper);padding:30px 26px}
.stats .n{font-family:var(--sans);font-size:clamp(30px,3.4vw,42px);color:var(--crimson);line-height:1;letter-spacing:-.04em}
.stats .n small{font-size:15px;color:var(--text-2);margin-left:4px;letter-spacing:0}
.stats .l{font-size:13px;color:var(--text-2);margin-top:12px}

/* =========================================================
   Pillars
   ========================================================= */
.pillars{padding-block:clamp(64px,8vw,104px);background:var(--paper-2)}
.p-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.p-card{background:var(--paper);padding:36px 30px 32px;display:flex;flex-direction:column;min-height:280px;transition:.25s;position:relative}
.p-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--crimson);transform:scaleX(0);transform-origin:left;transition:transform .3s}
.p-card:hover{background:var(--ink);color:var(--on-dark)}
.p-card:hover::before{transform:scaleX(1)}
.p-card .idx{font-size:11px;letter-spacing:.18em;color:var(--bronze);font-weight:700}
.p-card h3{font-family:var(--sans);font-size:22px;margin:16px 0 14px}
.p-card p{font-size:14px;color:var(--text-2);line-height:1.85;transition:.25s}
.p-card:hover p{color:var(--on-dark-2)}
.p-card .go{margin-top:auto;padding-top:22px;font-size:13px;letter-spacing:.04em;color:var(--text-3);transition:.25s}
.p-card:hover .go{color:var(--gold)}
.p-card .go::after{content:" →"}

/* =========================================================
   Publications shelf
   ========================================================= */
.pubs{padding-block:clamp(64px,8vw,104px);background:var(--paper)}
.shelf{display:flex;gap:26px;overflow-x:auto;padding-bottom:26px;scroll-snap-type:x mandatory}
.shelf::-webkit-scrollbar{height:4px}
.shelf::-webkit-scrollbar-thumb{background:var(--line)}
.book{flex:0 0 178px;scroll-snap-align:start}
.book .cov{
  position:relative;background:var(--paper-3);aspect-ratio:3/4.3;overflow:hidden;
  box-shadow:0 10px 24px rgba(20,22,28,.14);transition:.28s;
}
.book:hover .cov{transform:translateY(-8px);box-shadow:0 20px 40px rgba(20,22,28,.22)}
.book .cov img{width:100%;height:100%;object-fit:contain;background:#fff}
.book .no{
  position:absolute;left:0;top:0;background:var(--ink);color:var(--gold);
  font-size:10px;letter-spacing:.14em;padding:5px 9px;font-weight:700;
}
.book h4{font-size:14px;margin-top:16px;line-height:1.6;font-weight:600}
.book .m{font-size:12px;color:var(--text-3);margin-top:6px}

/* =========================================================
   Life timeline
   ========================================================= */
.life{background:var(--ink);color:var(--on-dark);padding-block:clamp(64px,8vw,104px);position:relative;overflow:hidden}
.life::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(80% 70% at 88% 8%,rgba(201,168,106,.14),transparent 60%);
}
.life .wrap{position:relative;z-index:2}
.life .sec-head h2{color:#fff}
.life .sec-head p{color:var(--on-dark-2)}
.life .more{color:var(--on-dark-2);border-color:var(--line-dark)}
.life .more:hover{color:var(--gold);border-color:var(--gold)}
.tl{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line-dark);border-top:1px solid var(--line-dark)}
.tl li{background:var(--ink);padding:28px 20px 26px;transition:.25s;position:relative}
.tl li::before{content:"";position:absolute;top:-1px;left:0;width:0;height:2px;background:var(--gold);transition:width .35s}
.tl li:hover::before{width:100%}
.tl .yr{font-family:var(--sans);font-size:15px;color:var(--gold);letter-spacing:.02em}
.tl .t{font-size:14px;margin-top:12px;font-weight:600;color:#fff}
.tl .d{font-size:12.5px;color:var(--on-dark-2);margin-top:8px;line-height:1.7}
.life-quote{
  margin-top:56px;padding-top:40px;border-top:1px solid var(--line-dark);
  font-family:var(--quote);font-size:clamp(19px,2.2vw,27px);line-height:1.7;color:#fff;max-width:26ch;
}
.life-quote span{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.16em;color:var(--on-dark-2);margin-top:18px}

/* =========================================================
   News
   ========================================================= */
.news{padding-block:clamp(64px,8vw,104px);background:var(--paper-2)}
.n-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:clamp(28px,5vw,64px)}
.n-list li{border-bottom:1px solid var(--line)}
.n-list li:first-child{border-top:1px solid var(--line)}
.n-list a{display:flex;gap:24px;align-items:baseline;padding:22px 4px;transition:.2s}
.n-list a:hover{padding-left:12px;color:var(--crimson)}
.n-list .dt{font-size:12px;color:var(--text-3);letter-spacing:.04em;flex:none;font-variant-numeric:tabular-nums}
.n-list .tt{font-size:15.5px;font-weight:500}
.n-list .dt{margin-left:auto}
.n-list .cat{font-size:11px;letter-spacing:.1em;color:var(--bronze);flex:none;font-weight:700}

.col-card{background:var(--paper);border:1px solid var(--line);padding:28px}
.col-card .tag{font-size:10px;letter-spacing:.18em;font-weight:700;color:#fff;background:var(--bronze);padding:5px 10px;display:inline-block}
.col-card h3{font-family:var(--sans);font-size:19px;line-height:1.55;margin:18px 0 12px}
.col-card p{font-size:13.5px;color:var(--text-2);line-height:1.85}
/* 카드뉴스 칸의 책 두 권 */
.cc-books{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:20px}
.cc-books a{display:block}
.cc-books img{width:100%;height:auto;display:block;border:1px solid var(--line);
  transition:.2s}
.cc-books a:hover img{transform:translateY(-3px)}
.cc-books .v{display:block;margin-top:10px;font-size:10.5px;letter-spacing:.08em;
  color:var(--bronze);font-weight:700}
.cc-books .t{display:block;margin-top:3px;font-size:13px;line-height:1.5;
  font-weight:600;color:var(--text-1)}
.cc-books a:hover .t{color:var(--crimson)}
.cc-more{margin-top:18px;font-size:12.5px}
.cc-more a{color:var(--text-2);border-bottom:1px solid var(--line);padding-bottom:3px}
.cc-more a:hover{color:var(--crimson);border-color:var(--crimson)}


/* =========================================================
   Youth band
   ========================================================= */
.youth{padding-block:clamp(56px,7vw,88px);background:var(--paper)}
.y-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.y-card{
  position:relative;min-height:210px;padding:30px;display:flex;flex-direction:column;justify-content:flex-end;
  color:#fff;overflow:hidden;background:var(--ink-2);
}
.y-card::before{content:"";position:absolute;inset:0;transition:.35s}
.y-card:nth-child(1)::before{background:linear-gradient(145deg,#3a2f24,#1b1f2a)}
.y-card:nth-child(2)::before{background:linear-gradient(145deg,#2b3446,#151821)}
.y-card:nth-child(3)::before{background:linear-gradient(145deg,#3d222a,#181419)}
.y-card:hover::before{transform:scale(1.06)}
.y-card>*{position:relative;z-index:2}
.y-card .k{font-size:11px;letter-spacing:.18em;color:var(--gold);font-weight:700}
.y-card h3{font-family:var(--sans);font-size:23px;margin-top:12px}
.y-card p{font-size:13px;color:rgba(255,255,255,.7);margin-top:10px}

/* =========================================================
   Footer
   ========================================================= */
.ft{background:var(--ink);color:var(--on-dark-2);padding-block:56px 40px;font-size:13px}
.ft-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:36px;border-bottom:1px solid var(--line-dark)}
.ft .brand .mark{color:var(--gold)}
.ft .brand .txt{border-color:var(--line-dark)}
.ft .brand .txt span{color:#fff}
.ft .brand .txt b{color:var(--on-dark-2)}
.ft-links{display:flex;gap:28px;flex-wrap:wrap;font-size:13px}
.ft-links a:hover{color:#fff}
.ft-bot{display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;padding-top:28px;line-height:1.9}
.ft-bot address{font-style:normal}
.ft-bot .cr{font-size:11.5px;color:#6f6f6a;letter-spacing:.02em}
.ft-rel{display:flex;gap:18px;flex-wrap:wrap;font-size:12.5px;color:#82827c}
.ft-rel a:hover{color:var(--gold)}

/* 제목 + 연도 한 줄 목록 (박태준연구 소개의 총서·단행본) */
/* 소제목 + 목록이 번갈아 나오는 쪽(박태준연구 소개·연구분야)에서는 .prose 를
   토막토막 나눠 쓴다. 그러면 h2 가 매번 첫 자식이 되어 위 여백과 구분선이
   사라진다(.prose h2:first-child 는 쪽 맨 위를 위한 규칙이다). sec 를 붙인
   토막은 제목 간격을 되살린다. */
.prose.sec h2:first-child{margin-top:44px;padding-top:22px;
  border-top:1px solid var(--line)}
/* 소제목 옆에 붙는 건수. 제목만큼 커 보이지 않게 한다. */
.yr-n{font-size:12.5px;font-weight:400;color:var(--muted);letter-spacing:.02em;margin-left:4px}
/* 목록 바로 뒤에 오는 소제목은 줄이 겹친다. 목록의 마지막 줄로 갈음한다. */
.blist + .prose.sec h2:first-child{border-top:0;padding-top:0;margin-top:38px}
.prose h3{font-family:var(--sans);font-size:16px;color:var(--text);
  margin:26px 0 8px;font-weight:700}

.klist{max-width:840px;margin:18px 0 6px}
.klist li{border-bottom:1px solid var(--line)}
.klist a{display:flex;align-items:baseline;gap:16px;padding:14px 0;
  font-size:15px;color:var(--text-2);transition:.2s}
.klist a:hover{color:var(--crimson)}
.klist .kt{flex:1 1 auto;line-height:1.5}
.klist .kn{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.klist .ky{flex:none;font-size:12.5px;color:var(--muted);
  font-variant-numeric:tabular-nums}
.btnrow{display:flex;flex-wrap:wrap;gap:10px;max-width:840px}

/* =========================================================
   Search
   ========================================================= */
.hd-search{position:relative}
.sr-drop{position:absolute;top:calc(100% + 9px);right:0;width:420px;max-width:78vw;
  background:var(--paper);border:1px solid var(--line);
  box-shadow:0 12px 34px rgba(0,0,0,.10);z-index:120;max-height:62vh;overflow:auto}
.sr-drop a{display:block;padding:11px 16px;border-bottom:1px solid var(--line);
  font-size:13.5px;line-height:1.5}
.sr-drop a:last-child{border-bottom:0}
.sr-drop a:hover{background:var(--paper-2)}
.sr-drop .sr-t{display:block;color:var(--text-2)}
.sr-drop .sr-w{display:block;margin-top:3px;font-size:11.5px;color:var(--muted)}
.sr-drop .sr-all{text-align:center;color:var(--crimson);font-size:12.5px;background:var(--paper-2)}
.sr-no{padding:14px 16px;font-size:13px;color:var(--muted)}
mark{background:rgba(158,27,50,.13);color:inherit;padding:0 1px;border-radius:2px}

.sr-wrap{display:block}
.sr-main{max-width:840px;margin:0 auto}
.sr-hint{font-size:13px;color:var(--text-3)}
.sr-form{display:flex;gap:10px;margin:24px 0 6px}
.sr-form input{flex:1;min-width:0;border:1px solid var(--line);padding:12px 14px;
  font-family:var(--sans);font-size:15px;outline:0;background:var(--paper)}
.sr-form input:focus{border-color:var(--crimson)}
.sr-count{font-size:13px;color:var(--text-3);margin:16px 0 2px}
.sr-list li{border-bottom:1px solid var(--line)}
.sr-list a{display:block;padding:17px 0}
.sr-list .sr-t{display:block;font-size:16px;color:var(--text-2);line-height:1.55}
.sr-list a:hover .sr-t{color:var(--crimson)}
.sr-list .sr-w{display:block;margin-top:5px;font-size:11.5px;letter-spacing:.03em;
  color:var(--bronze)}
.sr-list .sr-x{display:block;margin-top:7px;font-size:13px;color:var(--text-3);line-height:1.75}
.sr-morewrap{margin-top:26px;text-align:center}

/* 좁은 화면에서는 머리말 검색창이 모바일 메뉴 안으로 들어간다(main.js) */
.gnb-search{padding:2px 0 14px !important;border-bottom:1px solid var(--line)}
.gnb-search .hd-search{display:flex;flex-wrap:wrap;width:100%}
.gnb-search .hd-search input{flex:1 1 auto;width:auto;text-align:left;padding:2px 0}
.gnb-search .sr-drop{position:static;flex:0 0 100%;width:100%;max-width:none;
  box-shadow:none;margin-top:12px;max-height:46vh}

/* =========================================================
   Quick links (구 홈페이지 첫 화면 아래 세 칸)
   ========================================================= */
/* 바탕색은 구 사이트의 띠 색이자 아이콘 원본의 배경색이다. 인물 사진은
   배경이 이 색이라 잘라 내지 않아도 띠에 그대로 녹아든다. */
.quick{background:#f2f1ed}
.quick .wrap{padding-left:0;padding-right:0}
.q-grid{display:grid;grid-template-columns:380px 1fr;align-items:center}
.q-photo{margin:0}
.q-photo img{display:block;width:380px;height:auto}
.q-list{display:grid;grid-template-columns:repeat(3,1fr);padding:40px 0 44px}
.q-list li{border-right:1px solid #ddcfbd}
.q-list li:last-child{border-right:0}
.q-list a{display:flex;flex-direction:column;align-items:center;
  color:#a9814a;text-align:center;line-height:1.5}
/* 그림 세 장은 크기가 제각각이다. 아래를 맞춰 글자 줄이 나란히 서게 한다. */
.q-list .ic{display:flex;align-items:flex-end;justify-content:center;
  height:132px;margin-bottom:18px}
.q-list img{display:block;max-width:100%;height:auto;
  transition:transform .25s ease}
.q-list a:hover img{transform:translateY(-5px)}
.q-list .k{font-size:17px;font-weight:600;letter-spacing:-.01em}
.q-list a:hover .k{color:#8c6636}
.q-list .e{font-size:13px;color:#b79a72;margin-top:3px}

@media (max-width:1080px){
  .q-grid{grid-template-columns:300px 1fr}
  .q-photo img{width:300px}
}
@media (max-width:860px){
  .q-grid{grid-template-columns:1fr}
  .q-photo{display:none}
  .q-list{padding:34px 24px 38px}
}
@media (max-width:560px){
  .q-list .ic{height:78px;margin-bottom:12px}
  .q-list img{max-height:78px;width:auto}
  .q-list .k{font-size:14px}
  .q-list .e{font-size:11.5px}
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width:1400px){
  .gnb{gap:22px}
  .hd-search input{width:96px}
}
@media (max-width:1240px){
  .gnb{gap:16px}
  .gnb>li>a{font-size:14px}
  /* 자리가 좁아지면 돋보기만 남기고, 누르면 펼친다(main.js 가 초점을 준다).
     펼친 칸은 메뉴 위로 겹쳐 놓는다 — 흐름에 끼워 넣으면 머리말이 넘친다. */
  .hd-search{border-bottom-color:transparent;cursor:text}
  .hd-search input{width:0;padding:0}
  .hd-search:focus-within input{position:absolute;right:0;top:-6px;width:210px;
    z-index:130;background:var(--paper);padding:6px 8px;
    border-bottom:1px solid var(--line);transition:none}
}
@media (max-width:1080px){
  .hero-grid{grid-template-columns:1fr}
  .intro-grid,.n-grid{grid-template-columns:1fr}
  .p-grid{grid-template-columns:repeat(2,1fr)}
  .tl{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .gnb,.hd-search{display:none}
  .burger{display:grid}
  .hd .wrap{height:70px}
  .util .wrap{gap:14px}
  .util select{display:none}
  .y-grid{grid-template-columns:1fr}
  .stats{grid-template-columns:1fr}
}
@media (max-width:560px){
  .p-grid{grid-template-columns:1fr}
  .tl{grid-template-columns:1fr}
  .feat-body{flex-direction:column}
  .feat-body img{width:88px}
  .n-list a{flex-wrap:wrap;gap:8px}
}

/* =========================================================
   하위 페이지 (tools/build_site.py 가 생성하는 구조)
   ========================================================= */
.sub-hero{
  background:var(--ink);color:var(--on-dark);padding-block:clamp(44px,6vw,72px);
  position:relative;overflow:hidden;
}
.sub-hero::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(90% 120% at 88% 0%, rgba(201,168,106,.16), transparent 62%),
    radial-gradient(70% 100% at 0% 100%, rgba(179,27,44,.20), transparent 60%);
}
.sub-hero .wrap{position:relative;z-index:2}
.sub-hero .eyebrow{color:var(--gold)}
.sub-hero .eyebrow::before{background:var(--gold)}
.sub-hero h1{font-family:var(--sans);font-size:clamp(26px,3.4vw,42px);margin:14px 0 18px;color:#fff}
.crumb{font-size:12px;color:var(--on-dark-2);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.crumb a:hover{color:var(--gold)}
.crumb span{opacity:.35}
.crumb em{font-style:normal;color:var(--gold)}

.sub-wrap{display:grid;grid-template-columns:216px 1fr;gap:clamp(28px,5vw,64px);
  padding-block:clamp(40px,6vw,72px);align-items:start}

/* 좌측 메뉴 */
.lnb{position:sticky;top:100px}
.lnb-t{font-family:var(--sans);font-size:19px;font-weight:600;padding-bottom:14px;
  border-bottom:2px solid var(--ink);margin-bottom:6px}
.lnb-t span{display:block;font-family:var(--sans);font-size:10px;letter-spacing:.16em;
  color:var(--text-3);font-weight:700;margin-top:6px}
.lnb li{border-bottom:1px solid var(--line)}
.lnb a{display:block;padding:12px 4px;font-size:14px;color:var(--text-2);transition:.18s}
.lnb a:hover{color:var(--crimson);padding-left:8px}
.lnb li.on a{color:var(--ink);font-weight:600}
.lnb li.on a::before{content:"";display:inline-block;width:5px;height:5px;background:var(--crimson);
  border-radius:50%;margin-right:8px;vertical-align:middle}

.sub-main{min-width:0}

/* 본문 */
.prose{font-size:15.5px;line-height:2;color:var(--text-2);font-weight:var(--w-body)}
.prose>p+p{margin-top:18px}
.prose .lead{font-size:clamp(17px,1.7vw,20px);line-height:1.85;color:var(--text);
  font-weight:600;margin-bottom:28px}
.prose h2{font-family:var(--sans);font-size:22px;color:var(--text);margin:44px 0 16px;
  padding-top:22px;border-top:1px solid var(--line)}
.prose h2:first-child{margin-top:0;padding-top:0;border-top:0}
.prose .sub{font-size:14px;color:var(--text-3)}
.prose a{color:var(--crimson);border-bottom:1px solid rgba(179,27,44,.3)}
/* 본문 안 단추에는 본문 링크의 밑줄이 따라붙지 않는다. */
.prose a.btn{border-bottom:0}
.fig{margin:28px 0}
/* 원본보다 크게 늘리지 않는다. 구 사이트 이미지 중에는 작은 것이 많아
   폭에 맞춰 늘리면 흐려진다. */
.fig img{width:auto;max-width:100%;border:1px solid var(--line)}
.fig figcaption{font-size:12.5px;color:var(--text-3);margin-top:10px}
.todo-note{margin-top:32px;padding:16px 18px;background:var(--paper-2);
  border-left:3px solid var(--bronze);font-size:13px;color:var(--text-2);line-height:1.8}

/* 표 */
.tbl{width:100%;border-collapse:collapse;margin:22px 0;font-size:14.5px}
.tbl th,.tbl td{border-bottom:1px solid var(--line);padding:14px 12px;text-align:left;vertical-align:top}
.tbl thead th{background:var(--paper-2);border-bottom:2px solid var(--ink);
  font-size:13px;letter-spacing:.02em;color:var(--text)}
.tbl tbody th{color:var(--text);font-weight:600;white-space:nowrap;width:1%}

/* 연혁·연보 */
.chrono{margin-top:8px}
.chrono-y{display:grid;grid-template-columns:104px 1fr;gap:24px;
  padding:26px 0;border-top:1px solid var(--line)}
.chrono-y:first-child{border-top:0;padding-top:0}
.chrono-y h3{font-family:var(--sans);font-size:26px;color:var(--crimson);
  letter-spacing:-.03em;line-height:1;position:sticky;top:110px}
.chrono-y ul li{display:flex;gap:16px;padding:7px 0;font-size:14.5px;line-height:1.8}
.chrono-y .d{flex:none;width:48px;color:var(--bronze);font-weight:600;font-size:13px;
  font-variant-numeric:tabular-nums;padding-top:2px}
.chrono-y .t{color:var(--text-2);font-weight:var(--w-body)}

/* 시대별 탭 */
.era-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:32px;
  border-bottom:1px solid var(--line);padding-bottom:0}
.era-tabs button{padding:11px 16px;font-size:13.5px;color:var(--text-3);font-weight:600;
  border-bottom:2px solid transparent;margin-bottom:-1px;transition:.2s;white-space:nowrap}
.era-tabs button:hover{color:var(--text)}
.era-tabs button.on{color:var(--crimson);border-bottom-color:var(--crimson)}
.era-h{font-family:var(--sans);font-size:20px;color:var(--text);margin-bottom:14px}
.js .era-pane{display:none}
.js .era-pane.on{display:block}
.js .era-pane .era-h{display:none}

/* 게시판 공통 */
.board-top{display:flex;align-items:center;justify-content:flex-start;gap:16px;
  padding-bottom:14px;border-bottom:2px solid var(--ink);margin-bottom:24px;flex-wrap:wrap}
.board-top .cnt{font-size:13px;color:var(--text-2)}
.board-top .cnt b{color:var(--crimson);font-size:15px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.board-more{text-align:center;margin-top:32px}
.board-more button{border:1px solid var(--line);padding:13px 32px;font-size:14px;
  font-weight:600;color:var(--text-2);transition:.2s}
.board-more button:hover{border-color:var(--ink);color:var(--ink)}

/* 카드형 목록 */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:30px 26px}
.bcard-cov{position:relative;aspect-ratio:3/4.2;background:var(--paper-3);overflow:hidden;
  box-shadow:0 8px 20px rgba(20,22,28,.12);transition:.28s;display:grid;place-items:center}
.bcard:hover .bcard-cov{transform:translateY(-6px);box-shadow:0 18px 34px rgba(20,22,28,.20)}
.bcard-cov img{width:100%;height:100%;object-fit:contain;background:#fff}
.bgrid-wide .bcard-cov{aspect-ratio:16/10}
.bcard-cov .noimg{font-family:var(--sans);font-size:22px;color:var(--bronze);
  letter-spacing:-.04em;opacity:.55}
.bcard-b h3{font-size:14.5px;line-height:1.6;margin-top:15px;font-weight:600;color:var(--text)}
.bcard-b .m{font-size:12px;color:var(--text-3);margin-top:7px;line-height:1.6}
.bcard-b .s{font-size:12.5px;color:var(--text-2);margin-top:9px;line-height:1.7;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}

/* 줄형 목록 */
.blist li{border-bottom:1px solid var(--line);display:flex;gap:20px;align-items:baseline;
  padding:17px 4px;transition:.2s}
.blist li:first-child{border-top:1px solid var(--line)}
/* 항목 전체가 링크인 목록에서는 <a> 가 flex 컨테이너여야 한다.
   그러지 않으면 제목과 날짜가 붙어 '뒤바뀐 관계2004-08-01' 처럼 보인다. */
.blist li>a{display:flex;gap:20px;align-items:baseline;width:100%}
.blist li:hover{padding-left:10px;background:var(--paper-2)}
.blist .tt{font-size:15px;color:var(--text);line-height:1.6;font-weight:500}
.blist .no{flex:none;width:38px;font-size:12px;font-weight:700;color:var(--bronze);
  font-variant-numeric:tabular-nums}
.blist .dt{margin-left:auto;flex:none;font-size:12px;color:var(--text-3);
  font-variant-numeric:tabular-nums}

@media (max-width:900px){
  .sub-wrap{grid-template-columns:1fr;gap:28px}
  .lnb{position:static}
  .lnb ul{display:flex;flex-wrap:wrap;gap:0 4px}
  .lnb li{border-bottom:0}
  .lnb li a{padding:9px 14px;border:1px solid var(--line);font-size:13px}
  .lnb li.on a{border-color:var(--ink);background:var(--ink);color:#fff}
  .lnb li.on a::before{display:none}
  .chrono-y{grid-template-columns:1fr;gap:12px}
  .chrono-y h3{position:static}
}
@media (max-width:560px){
  .bgrid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:22px 16px}
  .blist li{flex-wrap:wrap;gap:6px}
}

/* =========================================================
   개별 글 상세 (build_details)
   ========================================================= */
.sub-hero h1.h1-art{font-size:clamp(21px,2.5vw,31px);line-height:1.45;max-width:26ch}
.art-hd{padding-bottom:20px;border-bottom:2px solid var(--ink);margin-bottom:30px}
.art-hd:empty{display:none}
.art-m{display:flex;flex-wrap:wrap;gap:8px 22px;font-size:13px;color:var(--text-3)}
.art-m b{font-weight:600;color:var(--bronze);margin-right:6px}

.art-cover{margin:0 0 30px;max-width:260px}
.art-cover img{width:100%;border:1px solid var(--line);box-shadow:0 10px 26px rgba(20,22,28,.14)}

.art-body h2{font-size:18px;margin:36px 0 14px;padding-top:20px;border-top:1px solid var(--line)}
.art-body h2:first-child{margin-top:0;padding-top:0;border-top:0}
.art-body p+p{margin-top:14px}

/* 본문에 딸린 사진. 원본은 가로·세로·크기가 제각각이라 그대로 늘어놓으면
   줄이 들쭉날쭉해진다. 칸 높이를 맞추고 그 안에서 비율을 지켜 담는다. */
.art-gal{margin:34px 0 0;padding-top:22px;border-top:1px solid var(--line)}
.art-gal-in{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:14px}
.art-gal-in img{width:100%;height:190px;object-fit:contain;background:#f4f5f6;
  border:1px solid var(--line);padding:6px}

.era-q{font-size:17px;font-weight:700;line-height:1.6;color:var(--ink);
  margin:0 0 18px;padding-bottom:16px;border-bottom:1px solid var(--line);
  text-wrap:balance}
.art-tbl-wrap{overflow-x:auto;margin:22px 0}
.art-tbl{border-collapse:collapse;width:100%;min-width:420px;font-size:14px;line-height:1.7}
.art-tbl th,.art-tbl td{border:1px solid var(--line);padding:10px 12px;text-align:left;vertical-align:top}
.art-tbl th{background:var(--paper-2,#f7f5f2);font-weight:600;white-space:nowrap}
.art-more{margin:30px 0 0}
.art-files{margin-top:36px}
.art-files h2{font-size:16px;margin-bottom:12px}
.art-files li{padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.art-files a{color:var(--crimson)}
.art-files li{display:flex;align-items:center;gap:10px}
.art-ft{flex:none;font-size:11px;letter-spacing:.04em;color:var(--muted);border:1px solid var(--line);border-radius:3px;padding:1px 6px}

.art-vids{margin-top:36px}
.art-vids h2{font-size:16px;margin-bottom:12px}
.art-vids .vl li{border-bottom:1px solid var(--line)}
.art-vids .vl a{display:flex;align-items:center;gap:12px;padding:12px 0;
  font-size:14px;color:var(--text-2);transition:.2s}
.art-vids .vl a:hover{color:var(--crimson)}
.art-vids .vl a::before{content:'\25B6';flex:none;font-size:9px;color:var(--crimson)}
.vl-t{flex:1 1 auto}
.vl-d{flex:none;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.vl-note{margin-top:12px;font-size:12.5px;color:var(--text-3)}

.art-src{margin-top:34px;font-size:12.5px;color:var(--text-3);
  padding:14px 16px;background:var(--paper-2);border-left:3px solid var(--line)}
.art-src a{color:var(--text-2);border-bottom:1px solid var(--line)}
.art-src a:hover{color:var(--crimson)}

.art-nav{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
  border:1px solid var(--line);margin-top:40px}
.art-nav .pn{background:var(--paper);padding:18px 20px;font-size:14px;color:var(--text-2);
  display:block;transition:.2s;line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.art-nav .pn:hover{background:var(--paper-2);color:var(--crimson)}
.art-nav .pn span{display:block;font-size:11px;letter-spacing:.1em;color:var(--bronze);
  font-weight:700;margin-bottom:7px}
.art-nav .next{text-align:right}
.art-nav .prev:only-child{grid-column:1/-1}

.art-back{margin-top:36px;text-align:center}

@media (max-width:560px){
  .art-nav{grid-template-columns:1fr}
  .art-nav .next{text-align:left}
  .art-gal-in{grid-template-columns:repeat(auto-fill,minmax(140px,1fr))}
}

/* =========================================================
   분류 매트릭스 — 구 사이트에서 이미지 한 장이던 표를 텍스트로 옮긴 것
   (미션 / 주요사업 / 중장기 연구주제)
   ========================================================= */
.matrix{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);margin:8px 0 0}
.mrow{display:grid;grid-template-columns:210px 1fr;gap:1px;background:var(--line)}
.mrow>.mkey{
  padding:26px 24px;color:#fff;display:flex;align-items:center;
  font-size:19px;font-weight:700;line-height:1.4;letter-spacing:-.02em;
}
.mkey.t1{background:linear-gradient(135deg,#a9834e,#8d6b3d)}
.mkey.t2{background:linear-gradient(135deg,#d4287c,#b31b2c)}
.mkey.t3{background:linear-gradient(135deg,#a8c34a,#87a337)}
.mrow>.mval{background:var(--paper);padding:24px 26px}
.mval ul li{
  position:relative;padding-left:16px;font-size:14.5px;line-height:1.85;
  color:var(--text-2);margin-bottom:9px;
}
.mval ul li:last-child{margin-bottom:0}
.mval ul li::before{
  content:"";position:absolute;left:0;top:11px;width:4px;height:4px;
  background:var(--bronze);border-radius:50%;
}
.mval .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;margin:-24px -26px;background:var(--line)}
.mval .mgrid>div{background:var(--paper);padding:24px 26px}
.mval .mgrid h3{font-size:17px;color:var(--bronze);margin-bottom:14px;font-weight:700}

/* 미션 선언문 */
.mission{
  background:var(--paper-2);border:1px solid var(--line);
  padding:clamp(32px,5vw,56px);text-align:center;margin-bottom:8px;
}
.mission .who{font-size:14px;color:var(--text-3);margin-bottom:18px}
.mission p{font-size:clamp(18px,2.2vw,25px);line-height:1.72;font-weight:600;color:var(--text)}
.mission p+p{margin-top:18px}
.mission .hi{color:var(--crimson)}

@media (max-width:760px){
  .mrow{grid-template-columns:1fr}
  .mrow>.mkey{padding:18px 22px;font-size:17px}
  .mval .mgrid{grid-template-columns:1fr}
}

/* 상태 안내 (구 사이트에서 이미지였던 '현재 진행중인 ~ 없습니다' 류) */
.empty-state{
  background:var(--paper-2);border:1px dashed var(--line);
  padding:34px 20px;text-align:center;color:var(--text-3);
  font-size:15px;margin:6px 0 18px;
}

/* 자료 내려받기 목록 (E-카다로그) */
.dl-list{border-top:2px solid var(--ink);margin:8px 0 0}
.dl-item{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:22px 4px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.dl-item h3{font-size:16.5px;font-weight:600;color:var(--text)}
.dl-item .m{font-size:13px;color:var(--text-3);margin-top:6px}

/* 사진 나란히 배치 (조각상·인사말) */
.statue-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:26px;align-items:start;margin:32px 0}
.statue-grid .fig{margin:0}
.statue-grid .fig.tall img{max-height:520px;width:auto}
@media (max-width:560px){ .statue-grid{grid-template-columns:1fr} }

/* 생애 — 시대별 본문과 사진 */
.bio-intro{padding-bottom:30px;margin-bottom:8px;border-bottom:1px solid var(--line)}
.era-sub{font-size:15px;font-weight:600;color:var(--bronze);margin-bottom:20px}
.era-sub span{color:var(--text-3);font-weight:400;margin-left:8px;font-size:13px}
.js .era-pane.on .era-sub{display:block}
/* 사진을 본문 오른쪽에 띄워 해당 대목 옆에 오게 한다 */
.bio-body{overflow:hidden}
.bio-body .bio-fig{float:right;width:224px;margin:6px 0 20px 30px;clear:right}
.bio-body .bio-fig img{width:100%}
.bio-body .bio-fig figcaption{font-size:12.5px;line-height:1.6;margin-top:8px}
.bio-body p+p{margin-top:16px}
@media (max-width:720px){
  .bio-body .bio-fig{float:none;width:100%;max-width:320px;margin:22px auto}
}

/* ── 연보(시대별 타임라인) ─────────────────────────────────── */
.cr-nav{display:flex;flex-wrap:wrap;gap:6px;margin:26px 0 30px}
.cr-nav a{padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  font-size:13px;font-weight:600;color:var(--text-3);letter-spacing:0;
  text-decoration:none;background:#fff;transition:.15s}
.cr-nav a:hover{color:var(--crimson);border-color:var(--crimson)}
.cr-nav a.on{color:#fff;background:var(--crimson);border-color:var(--crimson);
  cursor:default}
.cr-nav a:last-child{margin-left:auto}
.cr-nav a.on:hover{color:#fff}

.cr-era{margin-top:54px;scroll-margin-top:96px}
.cr-h{margin-bottom:6px}
.cr-range{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;
  color:var(--bronze)}
.cr-h h2{margin:4px 0 0;font-family:var(--sans);font-size:24px;line-height:1.35;
  font-weight:700;color:var(--text)}
.cr-blurb{margin:8px 0 0;max-width:62ch;font-size:14.5px;line-height:1.85;
  color:var(--text-3);font-weight:var(--w-body)}

ol.cr{list-style:none;margin:22px 0 0;padding:0 0 0 4px;
  border-left:1px solid var(--line)}
.cr-i{position:relative;display:grid;grid-template-columns:104px 1fr;
  gap:26px;padding:24px 0 24px 26px}
.cr-i+.cr-i{border-top:1px solid var(--line)}
.cr-i::before{content:"";position:absolute;left:-5px;top:34px;width:9px;height:9px;
  border-radius:50%;background:#c9cdd6}
.cr-i.has-p::before{background:var(--crimson)}
.cr-y{flex:none}
.cr-y b{display:block;font-size:21px;font-weight:700;color:var(--crimson);
  line-height:1.2;letter-spacing:0}
.cr-y i{display:block;margin-top:3px;font-style:normal;font-size:12.5px;
  color:var(--text-3);font-weight:600}
.cr-b{display:flex;gap:28px;align-items:flex-start}
.cr-t{flex:1;min-width:0}
.cr-t p{margin:0;font-size:15px;line-height:1.9;color:var(--text-2);
  font-weight:var(--w-body)}
.cr-t p+p{margin-top:8px}
.cr-p{flex:0 0 auto;width:auto;max-width:300px;margin:0}
/* 원본 사진은 가로/세로가 섞여 있다. 세로 사진이 행을 혼자 길게
   늘이지 않도록 높이를 묶어 준다(확대는 하지 않는다). */
.cr-p img{display:block;width:auto;max-width:100%;max-height:300px;height:auto;
  border:1px solid var(--line)}
.cr-p figcaption{margin-top:8px;font-size:12.5px;line-height:1.65;
  color:var(--text-3);font-weight:var(--w-body)}
/* 영문 연도별 연구주제: 묶음 제목(h3) 아래 '주제 + 설명'이 줄줄이 이어진다.
   주제와 설명이 붙어 있으면 어디서 끊기는지 보이지 않는다. */
.era-pane h3{
  margin:38px 0 4px; font-size:13px; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--bronze);
}
.era-pane h3:first-of-type{margin-top:24px}
.era-pane h3 + p{border-top:1px solid var(--line); padding-top:18px}
.era-pane p b{display:block; margin-bottom:6px; font-size:15.5px; color:var(--text)}
.era-pane > p{margin:0 0 22px}
.era-pane ul{margin:18px 0 8px; padding-left:18px}
.era-pane ul li{margin-bottom:8px; font-size:14.5px; line-height:1.85}

/* 사이트 밖으로 나가는 메뉴 항목(발전기금 → 포스텍 발전기금).
   누르면 창이 바뀌므로 화살표로 미리 알린다. */
.lnb a.ext::after,.mega a.ext::after{
  content:'↗'; margin-left:6px; font-size:.85em; color:var(--text-3);
  vertical-align:.05em;
}
.lnb a.ext:hover::after,.mega a.ext:hover::after{color:inherit}

/* =========================================================
   청년사업 — FAQ 접이식 문답, 서식·자료실
   ========================================================= */
.faq{margin-top:36px;border-top:1px solid var(--line)}
.faq-q{border-bottom:1px solid var(--line)}
.faq-q summary{
  list-style:none; cursor:pointer; padding:20px 44px 20px 26px; position:relative;
  font-size:15.5px; font-weight:500; line-height:1.6; transition:color .15s;
}
.faq-q summary::-webkit-details-marker{display:none}
/* 물음표 자리에 Q 를 두면 문답이라는 것이 한눈에 보인다. */
.faq-q summary::before{
  content:'Q'; position:absolute; left:0; top:20px;
  font-size:13px; font-weight:700; color:var(--bronze); letter-spacing:.04em;
}
/* 여닫이 표시: 가로선 하나에 세로선을 겹쳤다가, 열리면 세로선을 지운다. */
.faq-q summary::after{
  content:''; position:absolute; right:8px; top:50%; width:13px; height:13px;
  margin-top:-6px;
  background:
    linear-gradient(var(--text-3),var(--text-3)) center/13px 1px no-repeat,
    linear-gradient(var(--text-3),var(--text-3)) center/1px 13px no-repeat;
  transition:transform .2s, background-size .2s;
}
.faq-q[open] summary::after{
  background:linear-gradient(var(--crimson),var(--crimson)) center/13px 1px no-repeat;
}
.faq-q summary:hover{color:var(--crimson)}
.faq-q summary:focus-visible{outline:2px solid var(--crimson); outline-offset:2px}
.faq-a{padding:0 44px 24px 26px}
.faq-a p{margin:0 0 12px; font-size:14.5px; line-height:1.95; color:var(--text-2)}
.faq-a p:last-child{margin-bottom:0}

.fmlist{margin-top:36px;border-top:1px solid var(--line)}
.fm{padding:26px 2px; border-bottom:1px solid var(--line)}
.fm h3{margin:0; font-size:16px; font-weight:700; line-height:1.55}
.fm-d{
  margin:8px 0 0; font-size:12px; color:var(--text-3); letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
}
.fm-b{margin-top:14px}
.fm-b p{margin:0 0 8px; font-size:14.5px; line-height:1.9; color:var(--text-2)}
.fm-b p:last-child{margin-bottom:0}

@media (max-width:560px){
  .faq-q summary{padding:18px 36px 18px 22px}
  .faq-a{padding:0 8px 20px 22px}
}
@media (prefers-reduced-motion:reduce){
  .faq-q summary,.faq-q summary::after{transition:none}
}

/* 메인 '연구소 소식' 목록 칸과 그 아래 한 줄 안내 (영문판) */
.n-col{min-width:0}
.n-note{margin:16px 0 0;font-size:12px;line-height:1.7;color:var(--text-3)}
.src-note{margin:52px 0 0;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px;color:var(--text-3);font-weight:var(--w-body)}

@media (max-width:860px){
  .cr-b{flex-direction:column;gap:16px}
  .cr-p{max-width:100%}
  .cr-p img{max-height:420px}
}
@media (max-width:560px){
  .cr-i{grid-template-columns:1fr;gap:10px;padding-left:22px}
  .cr-y{display:flex;align-items:baseline;gap:8px}
  .cr-y b{font-size:19px}
  .cr-i::before{top:28px}
  .cr-era{margin-top:42px}
}

/* 시대별 연보: 이전/다음 시대 */
.cr-pager{display:flex;gap:12px;margin-top:40px}
.cr-pager a{flex:1;min-width:0;display:block;padding:16px 20px;
  border:1px solid var(--line);border-radius:4px;text-decoration:none;
  background:#fff;transition:.15s}
.cr-pager a:hover{border-color:var(--crimson)}
.cr-pager span{display:block;font-size:12px;font-weight:600;color:var(--text-3);
  letter-spacing:.04em}
.cr-pager b{display:block;margin-top:4px;font-size:16px;font-weight:700;
  color:var(--crimson);letter-spacing:0}
.cr-pager .cr-next{text-align:right}
.cr-pager .cr-next:only-child{margin-left:auto;flex:0 1 50%}
.src-note a{color:var(--crimson);font-weight:600}

@media (max-width:560px){
  .cr-nav a:last-child{margin-left:0}
  .cr-pager{flex-direction:column}
  .cr-pager .cr-next{text-align:left}
}

/* 전체연보 표 (년도 / 당시 나이 / 내용)
   45행짜리 표는 가로줄만으로는 열이 안 읽힌다. 세로 구분선 + 줄무늬 +
   열마다 다른 정렬·색으로 세 열이 눈에 바로 갈리게 한다. */
.tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:4px}
table.cr-tbl{width:100%;min-width:680px;border-collapse:collapse;
  border:1px solid var(--line);border-top:2px solid var(--text);background:#fff}
.cr-tbl caption{caption-side:top;text-align:left;padding:0 0 10px;
  font-size:12.5px;color:var(--text-3);font-weight:var(--w-body)}
.cr-tbl th,.cr-tbl td{border-right:1px solid var(--line)}
.cr-tbl tr>*:last-child{border-right:0}
.cr-tbl thead th{padding:13px 14px;background:#eef0f3;
  border-bottom:1px solid #cfd4db;border-right-color:#dfe3e8;
  font-size:13px;font-weight:700;color:var(--text);letter-spacing:0;
  white-space:nowrap}
.cr-tbl thead th:nth-child(-n+2){text-align:center}
.cr-tbl thead th:last-child{text-align:left}
.cr-tbl tbody th,.cr-tbl tbody td{padding:14px 16px;
  border-bottom:1px solid var(--line);font-size:14.5px;line-height:1.8;
  vertical-align:top}
.cr-tbl tbody tr:last-child th,.cr-tbl tbody tr:last-child td{border-bottom:0}
.cr-tbl tbody tr:nth-child(even){background:#f8f9fa}
.cr-tbl tbody th{text-align:center;white-space:nowrap;font-weight:700;
  color:var(--crimson);letter-spacing:0}
.cr-tbl .cr-age{text-align:center;white-space:nowrap;color:var(--text-3);
  font-size:13px;font-weight:600}
.cr-tbl tbody td:last-child{text-align:left;color:var(--text-2);
  font-weight:var(--w-body)}
.cr-tbl tbody tr:hover{background:#fdf3f4}

@media (max-width:560px){
  /* 좁은 화면에서 표를 옆으로 밀며 읽게 하지 않는다.
     연도·나이를 한 줄로 올리고 내용을 그 아래로 내린다. */
  table.cr-tbl{min-width:0;border-top:1px solid var(--line)}
  .cr-tbl thead{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
  .cr-tbl tbody tr{display:block;padding:15px 0;
    border-bottom:1px solid var(--line)}
  .cr-tbl tbody tr:hover{background:none}
  .cr-tbl tbody th,.cr-tbl tbody td{display:inline;width:auto;padding:0;border:0}
  .cr-tbl tbody th{font-size:16px}
  .cr-tbl .cr-age{margin-left:8px}
  .cr-tbl tbody td:last-child{display:block;margin-top:7px}
}

.cr-tbl col.c-y{width:104px}
.cr-tbl col.c-a{width:104px}
@media (max-width:560px){
  .cr-tbl col.c-y,.cr-tbl col.c-a{width:auto}
  /* 세로줄과 좌우 테두리는 좁은 화면에서 의미가 없다 — 글이 테두리에
     붙어 보이지 않도록 지운다. */
  table.cr-tbl{border-left:0;border-right:0}
  .cr-tbl th,.cr-tbl td{border-right:0}
  .cr-tbl tbody tr:nth-child(even){background:none}
  .cr-tbl tbody tr:last-child th,.cr-tbl tbody tr:last-child td{border-bottom:0}
}

/* ── 박태준을 말한다 (인용 카드) ───────────────────────────── */
.quotes{list-style:none;margin:34px 0 0;padding:0;
  columns:2;column-gap:26px}
.q{break-inside:avoid;-webkit-column-break-inside:avoid;page-break-inside:avoid;
  position:relative;margin:0 0 26px;padding:30px 30px 24px;
  background:#fbfbfc;border:1px solid var(--line);border-top:2px solid var(--crimson)}
.q::before{content:"\201C";position:absolute;top:0;left:14px;
  font-family:var(--quote);font-size:66px;line-height:1;
  color:rgba(179,27,44,.10);pointer-events:none}
.q blockquote{position:relative;margin:0}
.q blockquote p{margin:0;font-family:var(--quote);font-size:15.5px;
  line-height:1.95;color:var(--text);font-weight:500}
.q blockquote p+p{margin-top:12px}
.q-ctx{margin:0 0 16px;padding-bottom:14px;border-bottom:1px dashed var(--line);
  font-size:13px;line-height:1.85;color:var(--text-3);font-weight:var(--w-body)}
.q-by{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  margin:18px 0 0;padding-top:14px;border-top:1px solid var(--line)}
.q-by::before{content:"";flex:none;width:16px;height:1px;background:var(--crimson);
  align-self:center}
.q-by b{font-size:14.5px;font-weight:700;color:var(--crimson);letter-spacing:0}
.q-by span{font-size:12.5px;line-height:1.6;color:var(--text-3);
  font-weight:var(--w-body)}

@media (max-width:1000px){
  .quotes{columns:1}
}
@media (max-width:560px){
  .q{padding:24px 20px 20px}
  .q::before{left:8px;font-size:56px}
}

/* 신문 연재 글의 사진 설명 줄 (원본 사진은 이미 사라졌다) */
.art-body .art-cap{margin:20px 0;padding:11px 14px;border-left:2px solid var(--line);
  background:#fafafb;font-size:13px;line-height:1.75;color:var(--text-3);
  font-weight:var(--w-body)}

/* 게시판 '더 보기'는 JS 가 li.hidden 으로 항목을 접는다.
   그런데 .blist li{display:flex} / .bgrid .bcard{display:block} 이
   브라우저 기본 [hidden]{display:none} 보다 우선순위가 높아 항목이
   그대로 보였다 — 12개 게시판 전부에서 '더 보기'가 죽어 있었다. */
.board li[hidden],.board [hidden]{display:none!important}

/* 본문 중간에 놓인 사진 (원문에서 캡션과 짝지어 있던 자리 그대로) */
.art-body .art-fig{margin:30px 0;text-align:center}
/* 전역 img{display:block} 때문에 text-align 만으로는 가운데로 오지 않는다. */
.art-body .art-fig img{display:block;margin:0 auto;max-width:100%;width:auto;
  height:auto;border:1px solid var(--line)}
/* 세로로 긴 그림(책 표지 등)은 좁게 싣는다 */
.art-body .art-fig-nar img{max-width:300px}
.art-body .art-fig figcaption{margin:10px auto 0;max-width:640px;font-size:13px;
  line-height:1.7;color:var(--text-3);font-weight:var(--w-body)}

/* 요약 + 원문 링크만 싣는 기사 항목 */
.art-src{margin:34px 0 0;padding:20px 22px;border:1px solid var(--line);
  background:#fafafb}
.art-src p{margin:0;font-size:13.5px;line-height:1.8;color:var(--text-3);
  font-weight:var(--w-body)}
.art-src .go{margin-top:14px}
.art-src .art-src-note{margin-top:12px;padding-top:12px;
  border-top:1px dashed var(--line);font-size:12.5px}

/* 목록의 매체 이름 (언론자료) */
.blist .src{flex:none;width:132px;font-size:12.5px;font-weight:600;
  color:var(--bronze);line-height:1.5;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:560px){
  .blist .src{width:auto}
}

/* 생애 머리 이미지 */
.bio-hero{margin:22px 0 26px}
.bio-hero img{display:block;width:100%;height:auto}

/* ── 영상 목록 ──────────────────────────────────────────── */
.v-sec{margin-top:52px}
.v-sec h2{font-family:var(--sans);font-size:22px;font-weight:700;color:var(--text);
  margin:0;padding-top:22px;border-top:1px solid var(--line)}
.v-sec:first-of-type h2{padding-top:0;border-top:0}
.v-blurb{margin:8px 0 0;max-width:62ch;font-size:14.5px;line-height:1.85;
  color:var(--text-3);font-weight:var(--w-body)}
.v-grid{list-style:none;display:grid;gap:30px 24px;margin:24px 0 0;padding:0;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.v-card{min-width:0}
.v-play{position:relative;display:block;width:100%;padding:0;border:0;
  background:#0d0f12;cursor:pointer;overflow:hidden;border-radius:3px}
.v-play img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;
  transition:opacity .2s,transform .35s}
.v-play:hover img{opacity:.82;transform:scale(1.02)}
.v-play::after{content:"";position:absolute;left:50%;top:50%;
  width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;
  background:rgba(179,27,44,.92) url("data:image/svg+xml;charset=utf-8,\
%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E\
%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E") no-repeat 54% 50%/24px 24px;
  transition:transform .2s}
.v-play:hover::after{transform:scale(1.08)}
.v-play:focus-visible{outline:3px solid var(--crimson);outline-offset:3px}
.v-dur{position:absolute;right:8px;bottom:8px;padding:2px 7px;border-radius:2px;
  background:rgba(0,0,0,.78);color:#fff;font-size:11.5px;font-weight:600;
  letter-spacing:0;font-variant-numeric:tabular-nums}
.v-frame{position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:3px;overflow:hidden}
.v-frame iframe,.v-frame video{position:absolute;inset:0;width:100%;height:100%;border:0}
.v-b{padding-top:12px}
.v-b h3{margin:0;font-size:15.5px;line-height:1.5;font-weight:600;color:var(--text);
  letter-spacing:0}
.v-m{margin:6px 0 0;font-size:12.5px;font-weight:600;color:var(--bronze)}
.v-d{margin:7px 0 0;font-size:13.5px;line-height:1.75;color:var(--text-3);
  font-weight:var(--w-body)}
@media (max-width:560px){
  .v-grid{grid-template-columns:1fr;gap:26px}
  .v-sec{margin-top:40px}
}