/* =========================================================
   서림 동아시아고문헌연구소 — 연구소형(홍보·학술) 전용 스타일 (랜딩 키트 style.css 위에 더한다)
   기준: dicolab-design references/lab-site.md · seo-aeo-geo.md
   콘셉트: 한지·먹·인주 — 바탕은 한지색, 글은 먹색, 인주 붉은색(--c-seal)은 도장 모양 표시와 주 버튼에만
   메인은 사진 한 장 + 세로쓰기 제목(넓은 화면), 2차 메뉴는 키트 기본 알약 탭
   ========================================================= */
:root {
  --c-ink: #1B1A17;
  --c-text: #36332D;
  --c-muted: #6E685C;
  --c-line: #E5DECD;
  --c-line-strong: #A49B87;
  --c-bg: #FBF8F1;
  --c-surface: #F2ECDD;
  --c-gray: #EFE9DA;
  --c-primary: #9E2B25;
  --c-primary-deep: #2A2622;
  --c-primary-soft: #F4E1DA;
  --c-sun: #B07A2A;
  --c-seal: #9E2B25;
  --c-notice-bg: #F7EAE2; --c-notice: #9E2B25;
  --font-display: "Nanum Myeongjo", var(--font-body);
  --radius-xl: 2px; --radius: 2px; --radius-sm: 2px;
  --shadow-card: 0 12px 30px rgba(42, 38, 34, .1);
}
body { background: var(--c-bg); }
[hidden] { display: none !important; }
.sec-title, .page-head__title, .sub-visual__group, .statement__lead, .intro__lead, .vision-head__lead { font-weight: 800; letter-spacing: -0.03em; }
.statement__lead, .intro__lead, .vision-head__lead { font-weight: 400; }
.statement__lead b, .intro__lead b, .vision-head__lead b, .sec-title b { color: var(--c-primary); font-weight: 800; }
.logo__ko { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.02em; }
.logo__en { font-size: .5rem; letter-spacing: .14em; }
.gnb__link, .util-btn { white-space: nowrap; }
@media (max-width: 1360px) { .gnb__link { min-width: 0; padding: 0 clamp(10px, 1.3vw, 22px); font-size: 1.0625rem; } .site-header__inner { gap: 16px; } }
body[data-group="research"] .gnb__item[data-group="research"] > .gnb__link,
body[data-group="archive"] .gnb__item[data-group="archive"] > .gnb__link,
body[data-group="events"] .gnb__item[data-group="events"] > .gnb__link,
body[data-group="pubs"] .gnb__item[data-group="pubs"] > .gnb__link { color: var(--c-primary); }
.site-header { background: rgba(251, 248, 241, .94); }
.site-header.is-mega, .gnb__sub { background: var(--c-bg); }

.btn--seal { background: var(--c-seal); color: #fff; }
.btn--seal:hover { background: #7E211C; color: #fff; }
.btn--small { min-height: 40px; padding: 0 16px; }
.linklike { padding: 4px 0; border: 0; background: none; cursor: pointer; font: inherit; font-weight: 700; color: var(--c-primary); text-decoration: underline; text-underline-offset: .2em; }
.fine { margin-top: 18px; font-size: .875rem; line-height: 1.6; color: var(--c-muted); }
.seal { display: inline-grid; place-items: center; padding: 3px 8px; border: 1.5px solid var(--c-seal); border-radius: 2px; color: var(--c-seal); font-family: var(--font-display); font-weight: 800; font-size: .8125rem; line-height: 1.2; transform: rotate(-2deg); }
.seal--sm { font-size: .6875rem; padding: 1px 6px; }

/* 사진 위 어두운 면: 먹색 */
.sub-visual__media::after { background: linear-gradient(0deg, rgba(27, 26, 23, .78), rgba(27, 26, 23, .4)); }

/* ---------- 메인 히어로: 사진 한 장 + 세로쓰기 ---------- */
.shero { position: relative; min-height: clamp(560px, 82svh, 820px); display: grid; isolation: isolate; color: #fff; overflow: hidden; }
.shero__media { position: absolute; inset: 0; z-index: -2; margin: 0; }
.shero__media img { width: 100%; height: 100%; object-fit: cover; }
.shero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(27, 26, 23, .93) 0%, rgba(27, 26, 23, .8) 50%, rgba(27, 26, 23, .45) 100%); }
.shero__inner { position: relative; display: grid; align-content: end; padding-block: clamp(48px, 8vw, 110px); }
.shero__eyebrow { font-family: var(--font-display); font-size: 1rem; letter-spacing: .1em; color: #E9DFC6; }
.shero__title { margin-top: 18px; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 1.2rem + 3.6vw, 4rem); line-height: 1.3; letter-spacing: -0.03em; color: #fff; }
.shero__title .shero__line { display: block; }
.shero__brushbox { display: none; }
.shero__desc { max-width: 30em; margin-top: 22px; font-size: var(--fs-lead); line-height: 1.75; color: rgba(255, 255, 255, .86); }
.shero__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.shero__seal { position: absolute; right: var(--gutter); top: clamp(32px, 6vw, 72px); display: grid; place-items: center; width: 74px; height: 74px; border: 3px solid #C9463E; color: #E35A50; font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; text-align: center; transform: rotate(-4deg); }
/* 넓은 화면: 히어로 전체를 쓰는 붓글씨 SVG — 왼쪽은 소개 글, 오른쪽은 세로 제목(오른쪽에서 왼쪽으로 읽는다) */
@media (min-width: 1024px) {
  .shero::after { background: linear-gradient(90deg, rgba(27, 26, 23, .92) 0%, rgba(27, 26, 23, .84) 55%, rgba(27, 26, 23, .78) 100%); }
  .shero__inner { position: static; align-content: center; }
  .shero__text { position: static; max-width: 560px; }
  .shero__eyebrow, .shero__desc, .shero__btns { position: relative; z-index: 1; }
  /* h1 글자는 화면 읽기·검색용으로만 남기고(눈에는 숨김), 붓글씨 SVG 를 보인다 */
  .shero__title { position: absolute; width: 1px; height: 1px; margin: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .shero__brushbox { position: absolute; inset: 0; display: block; pointer-events: none; }
  .shero__brush { display: block; width: 100%; height: 100%; font-family: var(--font-display); }
  .shero__seal { display: none; }
  .bc { fill: #fff; stroke: #fff; stroke-width: 1; text-anchor: middle; dominant-baseline: central; font-weight: 800; paint-order: stroke; }
  .seal-svg__t { fill: #E35A50; font-family: var(--font-display); font-weight: 800; font-size: 30px; text-anchor: middle; dominant-baseline: central; }
  .ch, .seal-svg { transform-box: fill-box; transform-origin: center; }
  /* 대표 모션: ① 글자가 화면 곳곳에 크게 써진다(윤곽 → 먹) ② 한곳으로 날아와 모여 세로 제목이 된다 ③ 書林 도장 */
  .has-motion .ch { transform: translate(var(--sx), var(--sy)) scale(var(--ss)) rotate(var(--sr)); opacity: .5; animation: gather 1.3s cubic-bezier(.75, 0, .2, 1) calc(2.6s + var(--i) * .05s) forwards; }
  .has-motion .bc { fill-opacity: 0; stroke-dasharray: 300; stroke-dashoffset: 300; animation: bc-stroke .7s cubic-bezier(.5, 0, .3, 1) calc(.3s + var(--i) * .11s) forwards, bc-fill .5s ease-out calc(.75s + var(--i) * .11s) forwards; }
  .has-motion .seal-svg { opacity: 0; animation: stamp .42s cubic-bezier(.3, 1.5, .5, 1) 4.4s forwards; }
  .has-motion .shero__eyebrow, .has-motion .shero__desc, .has-motion .shero__btns { opacity: 0; animation: rise .8s ease-out forwards; }
  .has-motion .shero__eyebrow { animation-delay: 3.4s; } .has-motion .shero__desc { animation-delay: 3.7s; } .has-motion .shero__btns { animation-delay: 3.95s; }
  .has-motion .shero__media img { animation: drift 14s ease-out both; }
}
@keyframes bc-stroke { to { stroke-dashoffset: 0; } }
@keyframes bc-fill { to { fill-opacity: 1; stroke-width: 0; } }
@keyframes gather { to { transform: none; opacity: 1; } }
@keyframes stamp { 0% { opacity: 0; transform: rotate(10deg) scale(2.4); } 70% { opacity: 1; transform: rotate(-2deg) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes drift { from { transform: scale(1.08); } to { transform: scale(1); } }

/* 다가오는 행사 + 학술지 */
.ev-split { display: grid; gap: clamp(28px, 4vw, 56px); align-items: start; }
@media (min-width: 1024px) { .ev-split { grid-template-columns: minmax(0, 1fr) 300px; } }
.evs { border-top: 2px solid var(--c-ink); }
.ev { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: 4px 24px; padding: 22px 0; border-bottom: 1px solid var(--c-line); }
.ev__date time { display: grid; }
.ev__date b { font-family: var(--font-display); font-size: 1.75rem; font-weight: 800; color: var(--c-ink); line-height: 1.1; }
.ev__date span { font-size: .8125rem; color: var(--c-muted); }
.ev__kind { display: flex; align-items: center; gap: 8px; font-size: .875rem; font-weight: 700; color: var(--c-primary); }
.ev__title { margin-top: 4px; font-family: var(--font-display); font-size: 1.1875rem; font-weight: 800; line-height: 1.45; }
.ev__place { margin-top: 4px; font-size: .9375rem; color: var(--c-muted); }
.ev__done { font-size: .75rem; font-weight: 600; color: var(--c-muted); }
.evs--past .ev__date b, .evs--past .ev__title { color: var(--c-muted); }
.evhead { padding-bottom: 12px; font-family: var(--font-display); font-size: var(--fs-h3); }
.dday { padding: 0 7px; border-radius: 2px; background: var(--c-seal); color: #fff; font-size: .75rem; font-weight: 700; line-height: 1.7; }
@media (max-width: 479px) { .ev { grid-template-columns: 1fr; } .ev__date time { grid-auto-flow: column; justify-content: start; align-items: baseline; gap: 10px; } }
.journal { position: relative; display: grid; gap: 6px; justify-items: center; padding: 34px 24px 26px; border: 1px solid var(--c-line-strong); background: var(--c-surface); text-align: center; color: var(--c-ink); }
.journal::before { content: ""; position: absolute; inset: 8px; border: 1px solid var(--c-line); pointer-events: none; }
.journal__label { font-size: .8125rem; color: var(--c-muted); }
.journal__title { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; writing-mode: vertical-rl; letter-spacing: .12em; margin: 8px 0; }
.journal__no { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; color: var(--c-primary); }
.journal__meta { font-size: .875rem; color: var(--c-muted); }
.journal__go { margin-top: 8px; font-weight: 700; color: var(--c-primary); }
.journal:hover { background: #fff; }

/* 산하 센터 */
.centers { display: grid; gap: 0; border-top: 2px solid var(--c-ink); }
@media (min-width: 900px) { .centers { grid-template-columns: repeat(3, minmax(0, 1fr)); } .center + .center { border-left: 1px solid var(--c-line-strong); } }
.center { display: grid; gap: 8px; align-content: start; padding: 28px clamp(18px, 2.4vw, 32px); border-bottom: 1px solid var(--c-line-strong); }
.center__n { font-family: var(--font-display); font-weight: 800; font-size: 2.25rem; color: var(--c-primary); line-height: 1; }
.center h2, .center h3 { font-family: var(--font-display); font-size: 1.375rem; font-weight: 800; }
.center__en { font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; color: var(--c-muted); }
.center p { color: var(--c-text); }
.center__tags { font-size: .875rem; color: var(--c-muted) !important; }

/* ---------- 자료실 카드 (서지 카드) ---------- */
.cards { display: grid; gap: 16px; }
@media (min-width: 720px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card-item a { position: relative; display: grid; gap: 10px; align-content: start; height: 100%; padding: 26px 24px 22px 30px; border: 1px solid var(--c-line-strong); background: #fff; color: var(--c-ink); transition: box-shadow .25s, border-color .25s; }
.card-item a::before { content: ""; position: absolute; left: 12px; top: 18px; bottom: 18px; border-left: 1px dashed var(--c-line-strong); }  /* 책을 맨 실 자리 */
.card-item a:hover { border-color: var(--c-ink); box-shadow: var(--shadow-card); }
.card-item__code { font-size: .75rem; letter-spacing: .06em; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.card-item__name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; line-height: 1.4; }
.card-item__name span { display: block; margin-top: 2px; font-size: .9375rem; font-weight: 400; color: var(--c-muted); letter-spacing: .08em; }
.card-item__desc { font-size: .9375rem; color: var(--c-text); }
.card-item__meta { display: grid; gap: 4px; margin: 4px 0 0; padding-top: 10px; border-top: 1px solid var(--c-line); font-size: .8125rem; }
.card-item__meta div { display: grid; grid-template-columns: 3em minmax(0, 1fr); gap: 8px; }
.card-item__meta dt { color: var(--c-muted); }
.card-item__meta dd { margin: 0; }
.card-item .seal { position: absolute; right: 16px; top: 16px; }
.afind { display: grid; gap: 0; margin-bottom: 18px; border-top: 2px solid var(--c-ink); border-bottom: 1px solid var(--c-line-strong); }
.afind__row { display: grid; gap: 10px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
@media (min-width: 720px) { .afind__row { grid-template-columns: 5em minmax(0, 1fr); } .afind__row--last { grid-template-columns: auto minmax(0, 320px); justify-content: space-between; } }
.afind__row--last { border-bottom: 0; }
.afind__label { font-family: var(--font-display); font-weight: 800; }
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { min-height: 40px; padding: 0 14px; border: 1px solid var(--c-line-strong); border-radius: 2px; background: #fff; font: inherit; font-size: .9375rem; color: var(--c-ink); cursor: pointer; }
.tag[aria-pressed="true"] { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.afind__check { display: flex; align-items: center; gap: 8px; min-height: 40px; font-weight: 600; }
.afind__check input { width: 20px; height: 20px; accent-color: var(--c-seal); }
.afind__search input { width: 100%; min-height: 44px; padding: 0 14px; border: 1px solid var(--c-line-strong); background: #fff; font: inherit; }
.acount { margin-bottom: 12px; color: var(--c-muted); }
.empty { padding: 28px 0; color: var(--c-muted); }

/* 자료 보기 */
.aview__grid { display: grid; gap: 28px; margin-top: 28px; }
@media (min-width: 1024px) { .aview__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } }
.aview__grid .media { aspect-ratio: 4 / 3; border: 1px solid var(--c-line-strong); }
.biblio { width: 100%; border-collapse: collapse; border-top: 2px solid var(--c-ink); }
.biblio th, .biblio td { padding: 12px 10px; border-bottom: 1px solid var(--c-line); text-align: left; vertical-align: top; font-size: .9375rem; }
.biblio th { width: 6.5em; background: var(--c-surface); font-weight: 700; color: var(--c-ink); }
.aview .post-body { max-width: none; }
.aview .post-body h2 { margin-top: .8em; font-family: var(--font-display); font-size: 1.25rem; }
.cite { padding: 18px 20px; border-left: 3px solid var(--c-seal); background: var(--c-surface); }
.cite__label { font-size: .8125rem; color: var(--c-muted); }
.cite__text { margin: 4px 0 6px; font-family: var(--font-display); }

/* 간행물: 책장 */
.shelf { display: flex; flex-wrap: wrap; gap: 18px; align-items: end; padding: 24px 24px 0; border-bottom: 10px solid #6B4E2E; background: var(--c-surface); }
.spine { display: grid; justify-items: center; gap: 8px; }
.spine__btn { display: grid; justify-items: center; gap: 10px; width: 78px; height: 260px; padding: 18px 0; border: 0; border-radius: 2px 2px 0 0; background: #EDE3CB; box-shadow: inset 0 0 0 1px #CDBF9E, inset 6px 0 0 #D9CCAE; font: inherit; cursor: pointer; transition: transform .25s var(--ease); }
.spine:first-child .spine__btn { background: #E8DABA; height: 280px; }
.spine__btn:hover, .spine__btn:focus-visible { transform: translateY(-10px); }
.spine__t { writing-mode: vertical-rl; font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; letter-spacing: .14em; color: var(--c-ink); }
.spine__no { writing-mode: vertical-rl; font-family: var(--font-display); font-weight: 800; color: var(--c-primary); }
.spine__d { font-size: .6875rem; color: var(--c-muted); }
.spine__meta { padding-bottom: 8px; font-size: .75rem; color: var(--c-muted); }
.books { display: grid; gap: 14px; }
@media (min-width: 720px) { .books { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .books { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.book { display: grid; gap: 8px; align-content: start; min-height: 180px; padding: 22px; border: 1px solid var(--c-line-strong); background: #fff; border-left: 8px solid var(--c-primary-deep); }
.book__series { font-size: .8125rem; color: var(--c-primary); font-weight: 700; }
.book h3 { font-family: var(--font-display); font-size: 1.125rem; font-weight: 800; line-height: 1.45; }
.book__y { margin-top: auto; font-size: .8125rem; color: var(--c-muted); }

/* 연구: 진행 과제 */
.plist { border-top: 2px solid var(--c-ink); }
.plist li { display: grid; gap: 4px 20px; padding: 18px 0; border-bottom: 1px solid var(--c-line); }
@media (min-width: 900px) { .plist li { grid-template-columns: 9em minmax(0, 1fr) auto; align-items: center; } }
.plist__y { font-size: .875rem; color: var(--c-muted); font-variant-numeric: tabular-nums; }
.plist b { font-family: var(--font-display); font-weight: 800; color: var(--c-ink); }
.vision-word { font-family: var(--font-display); font-size: clamp(2.5rem, 1.4rem + 3.6vw, 4.5rem); }

/* 조직도 */
.tree { display: grid; justify-items: center; gap: 28px; margin-bottom: clamp(32px, 4vw, 48px); }
.tree p { display: grid; justify-items: center; gap: 2px; padding: 14px 30px; border: 1px solid var(--c-ink); background: #fff; position: relative; }
.tree__top { background: var(--c-ink) !important; color: #fff; }
.tree__top span { color: rgba(255, 255, 255, .7); }
.tree p span { font-size: .8125rem; color: var(--c-muted); }
.tree__mid::before { content: ""; position: absolute; left: 50%; bottom: 100%; height: 28px; border-left: 1px solid var(--c-ink); }
.centers--page .center__mail { font-size: .875rem; }

/* 바닥글·휴대폰 하단 */
.site-footer { background: var(--c-surface); }
.site-footer__centers { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: .9375rem; font-weight: 600; }
.site-footer__centers a:hover { color: var(--c-primary); }
.sbar { display: none; }
@media (max-width: 1023px) {
  body.has-sbar { padding-bottom: calc(60px + env(safe-area-inset-bottom)); }
  .sbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1fr 1fr; padding-bottom: env(safe-area-inset-bottom); background: var(--c-ink); }
  .sbar a { display: grid; place-items: center; min-height: 56px; font-family: var(--font-display); font-weight: 800; color: #fff; }
  .sbar a:first-child { background: var(--c-seal); }
  body:has(.site-menu:not([hidden])) .sbar { display: none; }
}
.seorim-toast { position: fixed; left: 50%; bottom: 24px; z-index: 300; max-width: calc(100% - 32px); padding: 12px 18px; background: var(--c-ink); color: #fff; font-size: .9375rem; transform: translate(-50%, 12px); opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.seorim-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
@media (max-width: 1023px) { .seorim-toast { bottom: 76px; } }
@media (prefers-reduced-motion: reduce) { .spine__btn:hover { transform: none; } .seorim-toast { transform: translate(-50%, 0); } }